transition-property :规定设置过渡效果的css属性名称(默认值all)
transition-duration :规定完成过渡效果需要多少秒或毫秒(默认0s)
transition-timing-function :指定过渡函数,规定速度效果的速度曲线(默认为ease函数)
transition-delay :指定开始出现的延迟时间(默认延迟0s)
注意:transition四个子属性之间只能用空格隔开,不能用逗号隔开
基于jQuery css3制作简洁的3D卡片叠加,点击下一步按钮进度条步骤切换特效。其实,脚本简单地说就是一条条的文字命令,这些文字命令是可以看到的,脚本程序在执行时,是由系统的一个解释器,将其一条条的翻译成机器可识别的指令,并按程序顺序执行,因为脚本在执行时多了一道翻译的过程,所以它比二进制程序执行效率要稍低一些。这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用CSS3帧动画来制作各种动画效果。制作方法
HTML结构
该特效的HTML结构采用无序列表的HTML结构,其中每一个li.card元素代表一种卡片。
<ul class="card-list">
<li class="card">
<div class="card-color color-rain">
<div class="rain"></div>
</div>
<div class="card-info">
<p>63 ℉</p>
<p>low of 61 ℉</p>
</div>
</li>
......
</ul>
复制代码
CSS样式
首先给卡片一些基本样式。
.card {