css动画效果可由animation,css实现动画效果

　　在学习css3的过程中，发现了很多很酷的效果，利用css3的属性就可以轻松实现。动画是css3动画效果中的常见属性。下面我们来学习一下如何利用这个属性来制作下面这个带有流光按钮效果的鼠标停止按钮~

　　在此之前，简单介绍一下动画属性的用法。

　　动画：[animation-name] [animation-duration] [animation-timing-function] [animation-iteration-count] [animation-direction]第一步:设置div的宽度和高度以及圆角边框，形成圆角矩形。第二步:将背景色设置为三种颜色的渐变(最后一种颜色需要和第一种颜色一样，这样流动时就不会有卡色)，将背景大小设置为400%。主要代码如下

　　背景-图像：线性渐变(向左，#EAD6EE，#A0F1EA，rgb(124，241，241)，#e3a5f0，# EAD 6 ee)；背景尺寸：400%；分析：现在背景中三种颜色的渐变大小是div的四倍，所以div只显示一种颜色。用帧动画效果控制背景的移动，加上动画属性保持流动~

　　第三步:使用帧动画控制背景定位的横向移动。(@keyframes功能：定义动画，简单动画可以直接用关键字from和to，复杂动画可以用0%~100%，分段设置对应的动画效果，即从一种状态过渡到另一种状态)

　　@关键帧运行{ 100%{背景位置：400% 0px；}}然后用伪悬停实现鼠标上移时的动画效果~

　　伪主码

　　@关键帧运行{ 100%{背景位置：400% 0px；} } .div2:hover{动画：跑4s线性0s无限；}案例完整代码：

　　！DOCTYPE html html lang= en head meta charset= UTF-8 title document/title style . div 2 { position:absolute；左：calc(50%-150 px)；top:calc(50%-150 px)；宽度：300px高度：100px边框半径：50px文本对齐：居中；背景色：浅绿色；行高：100px背景-图像：线性渐变(向左，#EAD6EE，#A0F1EA，rgb(124，241，241)，#e3a5f0，# EAD 6 ee)；背景尺寸：400%；} @关键帧运行{ 100% { background-position:400% 0px；} } .div2:hover{动画：跑4s线性0s无限；}/style/head body div class= div 2 let s go/div/body/html简单的css3流光动画效果就实现了。

　　关于动画在CSS3中实现streamer按钮效果的这篇文章到此为止。有关css3动画流按钮的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。