自上而下渐显图片的CSS3实现

代码地址如下:
http://www.demodashi.com/demo/12160.html

目录

  • 一、实现思路
  • 二、所用特性
  • 三、示例代码
  • 四、实例效果
  • 五、组件化(Vue)

一、实现思路

从效果上来想,图片自上而下渐显,图片的位置和大小都是没有变动的。思考过后发现仅仅靠一个标签很难实现预期的效果,于是考虑加一个元素作为可见窗口,控制图片相对于可见窗口的位置来实现目标效果。控制图片在视野中的位置不变,可见窗口自上而下移动,就实现了图片自上而下的显示。

二、所用特性

transform

transform: none|transform-functions;

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义定义 3D 转换,使用 16 个值的 4x4 矩阵。不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

animation

animation: name duration timing-function delay iteration-count direction;

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

@keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。合法的值:0-100%;from(与 0% 相同);to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

三、示例代码

HTML:

<div class="gradient-wrapper">
  <img src="demo.png">
</div>

CSS:

@keyframes wrapper-gradient {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes img-gradient {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.gradient-wrapper {
  display: inline-block;
  overflow: hidden;
  animation: wrapper-gradient 2s linear;
}
.gradient-wrapper>img {
  animation: img-gradient 2s linear;
}

第1步

首先将可见窗口设置为inline-block,使其对外的表现和类似,之后设置overflow: hidden;实现对可见区域的控制:

.gradient-wrapper {
  display: inline-block;
  overflow: hidden;
}

第2步

利用animation和transform实现可见窗口的自上而下移动:

.gradient-wrapper {
  animation: wrapper-gradient 2s linear;
}

第3步

控制图片位置的不变:

.gradient-wrapper>img {
  animation: img-gradient 2s linear;
}

四、实例效果

五、组件化(Vue)

利用上述思路,还可以将这种效果做成图片加载组件,并且在图片加载完成后开始进行动画。这里用Vue提供组件化的例子,具体原理一样,就不再分解讲述。实际还可以做更多优化和处理,比如可以传递更多参数控制图片样式,控制动画的持续时间,动画函数等,这些与效果关联性不大,就不在此文扩展了。

GradientPic.vue:

<template>
  <div :class="[loaded ? 'gradient-wrapper' : '']"><img :src="src" @load="loaded = true"></div>
</template>

<script>
export default {
  props: ['src'],
  data () {
    return {
      loaded: false
    }
  }
}
</script>

<style scoped>
  @keyframes wrapper-gradient {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes img-gradient {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  .gradient-wrapper {
    display: inline-block;
    overflow: hidden;
    animation: wrapper-gradient 2s linear;
  }
  .gradient-wrapper>img {
    animation: img-gradient 2s linear;
  }
</style>

自上而下渐显图片的CSS3实现

代码地址如下:
http://www.demodashi.com/demo/12160.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

posted on 2018-03-06 09:43  demo例子集  阅读(429)  评论(0编辑  收藏  举报

导航