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

妖狐艹你老母 2022-05-28 02:39 167阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/12160.html][http_www.demodashi.com_demo_12160.html]

### 目录 ###

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

### 一、实现思路 ###

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

### 二、所用特性 ###

#### transform ####

> transform: none|transform-functions;

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

#### animation ####

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

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

#### @keyframes ####

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

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>animationname</td> 
   <td>必需。定义动画的名称。</td> 
  </tr> 
  <tr> 
   <td>keyframes-selector</td> 
   <td>必需。动画时长的百分比。合法的值：0-100%；from（与 0% 相同）；to（与 100% 相同）</td> 
  </tr> 
  <tr> 
   <td>css-styles</td> 
   <td>必需。一个或多个合法的 CSS 样式属性。</td> 
  </tr> 
 </tbody> 
</table>

### 三、示例代码 ###

HTML:

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

### 四、实例效果 ###

![渐显图片效果图][t9ltlRGX1oonjozT8r2.gif]

### 五、组件化(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][http_www.demodashi.com_demo_12160.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_12160.html]: http://www.demodashi.com/demo/12160.html
[t9ltlRGX1oonjozT8r2.gif]: /images/20220528/482ad3ae2d564c45869bd5b02cdf9d52.png