⾃上⽽下渐显图⽚的CSS3实现
⽬录
⼀、实现思路
⼆、所⽤特性
三、⽰例代码
四、实例效果
五、组件化(Vue)
⼀、实现思路
从效果上来想，图⽚⾃上⽽下渐显，图⽚的位置和⼤⼩都是没有变动的。思考过后发现仅仅靠⼀个标签很难实现预期的效果，于是考虑加⼀个元素作为可见窗⼝，控制图⽚相对于可见窗⼝的位置来实现⽬标效果。控制图⽚在视野中的位置不变，可见窗⼝⾃上⽽下移动，就实现了图⽚⾃上⽽下的显⽰。
⼆、所⽤特性
transform
transform: none|transform-functions;
值描述
cssclass属性
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 倾斜转换。
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⼤师代发，拒绝转载，转载需要作者授权

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。