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>
简单的css3流光动画效果就实现啦
到此这篇关于CSS3中animation实现流光按钮效果的文章就介绍到这了,更多相关css3 animation 流光按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
CSS3动画之利用requestAnimationFrame触发重新播放功能
这篇文章主要介绍了利用requestAnimationFrame重新播放(触发)CSS3动画,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-11
本文通过实例代码给大家介绍了CSS3 animation – steps 函数，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-30
这篇文章主要介绍了css中用animation的steps属性制作帧动画，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-25
本篇介绍的animation属性和传统的动画制作一样，能控制帧的每一步，制作出更强大的动画效果。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2018-12-25
这篇文章主要介绍了css3的动画特效之动画序列（animation） 的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-22- 这篇文章主要为大家详细介绍了CSS3中Animation动画属性用法，教大家如何使用animation动画，感兴趣的小伙伴们可以参考一下2016-07-04
最新评论