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

立即下载用AI写一个

发布时间：2017-12-11

1人 | 浏览：7492次 | 收藏 |

技术：HTML, CSS3

运行环境：IE10+, 主流浏览器

概述

利用CSS3的transform、animation，实现图片自上而下逐渐显示的效果。即似乎有一层遮罩层把图片盖住，然后慢慢向下拉开遮罩层看见图片。本文更倾向于原理性的简单探索，如需要更加绚丽的效果，还可以在此基础上做更多的定制和修改。

详细

### 目录

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

### 一、实现思路

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

### 二、所用特性

#### 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:
```HTML
<div class="gradient-wrapper">
  <img src="demo.png">
</div>
```

CSS:
```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，使其对外的表现和<img>类似，之后设置`overflow: hidden;`实现对可见区域的控制:

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

#### 第2步

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

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

#### 第3步

控制图片<img>位置的不变:

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

### 四、实例效果

![](/contentImages/image/20171211/t9ltlRGX1oonjozT8r2.gif "渐显图片效果图")

### 五、组件化(Vue)

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

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

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

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

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子