标签:调用 alternate 蓝色 gradient 逆向 animation 了解 image 应该
一、CSS3 过渡
(一)、CSS3过渡简介
CSS3过渡是元素从一种样式逐渐改变为另一种的效果。
实现过渡效果的两个要件:
定义动画的规则
过渡transition (作用) 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”
(二)、transition属性
语法 : {transition: 属性名 持续时间 过渡方法}
transition-timing-function 属性取值
实例:
原有的状态是灰底红字,鼠标悬停在上面利用transition属性设置了一个3s 之内的变化,背景为由红到蓝的渐变色,文字颜色也逐渐变成白色。
1、首先定义div标签的原始状态,
2、再设置当鼠标悬停在上面的状态。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过渡</title> 6 <style> 7 div{ 8 height: 100px; 9 width:300px; 10 line-height:30px; 11 border-radius:5px; 12 align-content:center; 13 color:red; 14 background-color: #999; 15 transition:all 1s linear; 16 } 17 div:hover{ 18 color:white; 19 /*background-color: #007;*/ 20 background:linear-gradient(to bottom,#f0f,#00f) 21 } 22 </style> 23 </head> 24 <body> 25 <div align="center" style="font-size:30px">transition</div> 26 </body> 27 </html>
表现效果:(因为过渡是一个动态的效果,所以下面仅展示初始状态、中间、过渡后的效果)
初始
中间
最后
二、CSS3动画
(一)、CSS3中的动画实现的是什么效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。动画效果是通过animation属性来完成的。
用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器。
实现动画效果两要件:
了解动画的形成原理:
是根据人的“视觉暂留”现象,将一组静止的图形连续出现后,便形成了动画。Flash动画就是基于此原理来制成动画的,时间轴上的每一帧在编辑区中有不同的图形,当时间轴上的帧以当前帧频向前移动时,我们看到的是编辑区中的一组图形不断变化,从而产生了运动的视觉效果
(二)、animation属性设置动画效果
animation属性取值
animation-timing-function 属性取值
实例:
用动画animation属性实现在位置变化的同时颜色也发生相应的变化。
颜色:由红色—黄色—蓝色—绿色—红色;
位置:距左0px距顶0px—距左200px距顶0px—距左200px距顶200px—距左0px距顶200px—距左0px距顶0px(回到原地)
animation属性:@keyframes(关键帧) 动画名称为mycolor;一个动画周期为5s;动画运动先慢后快再慢ease;动画开始前等待2s;无限(infinite)循环播放;动画正在运行(runing)。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画</title> 6 <style> 7 div{ 8 width:400px; 9 height:400px; 10 background:red; 11 position:relative; 12 animation-name:mycolor; 13 /*animation-name规定@keyframes 动画名称*/ 14 animation-duration:5s; 15 /*animation-duration规定一个动画完成的周期所花费的秒或毫秒*/ 16 animation-timing-function:ease; 17 /*animation-timing-function规定动画的速度曲线*/ 18 animation-delay:2s; 19 /*animation-delay规定动画何时开始。默认值为0*/ 20 animation-iteration-count:infinite; 21 /*animation-iteration-count规定动画播放的次数*/ 22 animation-direction:alternate; 23 /*animation-driection规定动画是否在下一周期逆向地播放*/ 24 animation-play-state:running; 25 /*animation-play-state规定动画是否正在运行或暂停*/ 26 } 27 @keyframes mycolor 28 { 29 0% {background:red;left:0px; top:0px; } 30 25% {background:yellow; left:200px; top:0px;} 31 50% {background:blue;left:200px; top:200px} 32 75% {background:green;left:0px; top:200px;} 33 100% {background:red;left:0px; top:0px;} 34 } 35 </style> 36 </head> 37 <body> 38 <div></div> 39 </body> 40 </html>
除了可以这样每个属性单独设置,也可以使用animation 的简写属性:
1 div{ 2 width:400px; 3 height:400px; 4 background:red; 5 position:relative; 6 animation:mycolor 5s linear 2s infinite alternate; 7 }
标签:调用 alternate 蓝色 gradient 逆向 animation 了解 image 应该
原文地址:https://www.cnblogs.com/nyw1983/p/11361089.html