CSS3中animation实现流光按钮效果
在学习css3的过程中，发现很多看着炫酷的效果，利⽤css3的属性能很简单的实现，animation是css3动画效果中常见的属性。下⾯让我们了解⼀下如何利⽤这个属性做出以下⿏标停在按钮上有流光按钮效果~
在此之前简单介绍⼀下animation属性的⽤法。
animation：[ animation-name(检索或设置对象所应⽤的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animation-timing-function(检索或设置对象动画的过渡类型) ] || [ animation-delay(检索或设置对象动画延迟的时间) ] || [ animation-iteration-count(检索或设置对象动画的循环次数) ] || [ animation-direction(检索或设置对象动画在循环中是否反向运动) ]
第⼀步：给div设置宽⾼和圆⾓边框成⼀个圆⾓矩形。
第⼆步：设置背景颜⾊为三种颜⾊的渐变⾊（最后⼀个颜⾊需要和第⼀个颜⾊⼀样，这样流动起来不会有卡颜⾊的情况），并将背景⼤⼩设为400%，主要代码如下
background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background-size: 400%;
分析：现在背景为三种颜⾊的渐变⼤⼩是div的四倍，所以div只显⽰出⼀个颜⾊，利⽤帧动画效果控制背景的移动，加上animation属性就可以⼀直流动了~
第三步：利⽤帧动画控制背景定位的横向移动。（@keyframes作⽤：定义动画，简单的动画可以直接
使⽤关键字from和to，复杂的利⽤0%~100%，分段设置相应的动画效果，即从⼀种状态过渡到另⼀种状态）
@keyframes run{
100%{
background-position: 400% 0px;
}
}
再利⽤伪类hover实现⿏标移上去就出现动画的效果~
伪类主要代码
@keyframes run{
100%{
background-position: 400% 0px;
}
}
.div2:hover{
animation: run 4s linear 0s infinite;
}
案例完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div2{
position:absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 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>
css中的position属性简单的css3流光动画效果就实现啦
到此这篇关于CSS3中animation实现流光按钮效果的⽂章就介绍到这了，更多相关css3 animation 流光按钮内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。