怎么新建MySQL数据库
阅读：955
使用css3中animation属性如何实现流光按钮效果？我们知道css3中animation属性是css3动画效果中常见的属性，因此使用这个属性我们能够实现很多酷炫的效果，下面小编就给大家分享如何使用animation属性实现鼠标停在按钮上有流光按钮效果的代码。
在此之前简单介绍一下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>
简单的css3流光动画效果就实现啦
以上就是关于css3 animation属性的介绍以及animation属性实现流光按钮效果的代码，本文代码有一定的借鉴价值，有需要的朋友可以了解一下，希望对大家学习有帮助，想要了解更多css3 animation属性的内容大家可以继续关注其他文章。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理