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

代码地址如下：
http://www.demodashi.com/demo/12160.html

一、实现思路

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

二、所用特性

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实现

代码地址如下：
http://www.demodashi.com/demo/12160.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

自上而下渐显图片的CSS3实现相关推荐

html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 超个性的感应鼠标悬停图片色彩渐显效果 ul.gallery { width: 750px; /* ...
QML 实现图片帧渐隐渐显轮播
前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方 ...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
图片渐隐渐显的切换效果 window.onload = function() { var testDiv = document.getElementById('test'); testDiv.styl ...
JS 特效学习 002：图片渐显
没图的JS都是耍流氓!!! 一.实现效果: 二.原理分析: 在介绍实现步骤之前,先跟大家说说图像渐显的本质问题:如何实现渐渐显示? 渐显的本质是改变图像的透明度,从完全透明逐渐增加非透明度,直到 ...
利用Trigger完成WPF 的动画-渐显
原文:利用Trigger完成WPF 的动画-渐显其实渐显很简单,就是改变控件的透明度. WPF提供了Trigger这个东西. 下面是动画代码: 1 2 3 4 5 6 7 8 9 10 11 12 ...
网站设计之Flash简单动画入门介绍（一）字体闪烁及渐显
在制作网站过程中,增加些动画效果是非常美妙的一件事.由于最近在当Flash和PS课程的助教,也辅导学生完成PS.Flash.HTML等操作,所以这篇文章主要是对Flash动画的入门介绍,希望对你有所帮 ...
动画自制弹框上滑+渐显效果
<view class="mask {{showShare ? 'slidefadeUp' : 'slidefadeDown'}}" wx:if="{{showSh ...
仿新浪微博滚动，无文字渐显功能
又一款仿新浪微博的文字滚动功能,去掉了滚动开始时候的文字渐显效果,似乎更明淅了,又一种风格的新浪微博大厅文字滚动,要的就复制代码吧. <!DOCTYPE HTML> <html la ...
苹果6s关闭系统定位服务器,苹果手机定位账号-强势渐显
在icloud选项里面找到查找我的iphone"并打开它,登录你的苹果ID帐号.那是因为一个手机给另一个手机做了定位. 具体操作步骤如下在使用查找我的iphone需要设置一下在iphone, ...

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

目录

一、实现思路

二、所用特性

transform

animation

@keyframes

三、示例代码

第1步

第2步

第3步

四、实例效果

五、组件化(Vue)

自上而下渐显图片的CSS3实现相关推荐

最新文章

热门文章