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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、实现思路

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

二、所用特性

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;
}

四、实例效果

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

五、组件化(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实现

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: CSS