自上而下渐显图片的CSS3实现
目录
- 一、实现思路
- 二、所用特性
- 三、示例代码
- 四、实例效果
- 五、组件化(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实现
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权
