在学习css3的 过程中 ，发现很多看着炫酷的效果， 利用 css3的属性能很 简单 的实现，animation是css3动画效果中常见的属性。下面让我们 了解 一下如何利用这个属性 做出 以下鼠标停在按钮上有流光按钮效果~
在此之前简单介绍一下animation属性的用法。
animation：[ animation-n am e(检索或设置对象所应用的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animation -t iming-function(检索或设置对象动画的过渡类型) ] || [ animation-delay(检索或设置对象动画延迟的时间) ] || [ animation -i teration-count(检索或设置对象动画的循环次数) ] || [ animation-direction(检索或设置对象动画在循环中 是否 反向运动) ]
第一步 ：给div设置 宽 高和 圆 角边框成一个圆角矩形。
第二步 ：设置 背景颜色 为三种颜色的渐变色（最后一个颜色需要和第一个颜色一样，这样流动起来不会有卡颜色的情况），并将背景大小设为400%，主要代码如下
background-image: linear-gra die nt(to left , # EAD6EE,#A0 F1 EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background-size : 400%;
分析：现在背景为三种颜色的渐变大小是div的四倍，所以div只显示出一个颜色，利用帧动画效果控制背景的移动，加上animation属性就可以一直流动了~
第三步 ：利用帧动画控制背景定位的横向移动。（@keyframes作用：定义动画，简单的动画可以直接使用关键字 From 和to，复杂的利用0%~100%，分段设置相应的动画效果，即从一种状态过渡到另一种状态）
@keyframes run{
100%{
background-pos IT ion: 400% 0px;
}
}
再利用 伪类 hover实现鼠标移上去就出现动画的效果~
伪类主要代码
@keyframes run{
100%{
background-position: 400% 0px;
}
}
.div2:hover{
animation: run 4s linear 0s infinite;
}
案例完整代码：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<title>Document</title>
<style>
.div2{
position:absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
h ei ght: 100px;
border-radius: 50px;
text-align: center ;
background-color:aqua;
line-height: 100px;
background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background- Size: 400%;
}
@keyframes run{
100%{
background-position: 400% 0px;
}
}
.div2:hover{
animation: run 4s linear 0s infinite;
}
</style>
</head>
<body>
<div class="div2">
Let's Go
</div>
</body>
</html>
简单的css3流光动画效果就实现啦
到此这篇关于CSS3中animation实现流光按钮效果的 文章 就介绍到这了,更多相关css3 animation 流光按钮内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS3中animation实现流光按钮效果 全部内容，希望文章能够帮你解决 CSS3中animation实现流光按钮效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3中animation实现流光按钮效果的详细内容...