利用css3中animation属性怎样实现流光按钮效果?
发布时间:2022-04-14 13:56:56 所属栏目:语言 来源:互联网
导读:使用css3中animation属性如何实现流光按钮效果?我们知道css3中animation属性是css3动画效果中常见的属性,因此使用这个属性我们能够实现很多酷炫的效果,下面小编就给大家分享如何使用animation属性实现鼠标停在按钮上有流光按钮效果的代码。 在此之前简单
使用css3中animation属性如何实现流光按钮效果?我们知道css3中animation属性是css3动画效果中常见的属性,因此使用这个属性我们能够实现很多酷炫的效果,下面小编就给大家分享如何使用animation属性实现鼠标停在按钮上有流光按钮效果的代码。 在此之前简单介绍一下animation属性的用法。 animation:[ animation-name(检索或设置对象所应用的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animation-timing-function(检索或设置对象动画的过渡类型) ] || [ animation-delay(检索或设置对象动画延迟的时间) ] || [ animation-iteration-count(检索或设置对象动画的循环次数) ] || [ animation-direction(检索或设置对象动画在循环中是否反向运动) ] 第一步:给div设置宽高和圆角边框成一个圆角矩形。 第二步:设置背景颜色为三种颜色的渐变色(最后一个颜色需要和第一个颜色一样,这样流动起来不会有卡颜色的情况),并将背景大小设为400%,主要代码如下 第三步:利用帧动画控制背景定位的横向移动。(@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; } @keyframes run{ 100%{ background-position: 400% 0px; } } .div2:hover{ animation: run 4s linear 0s infinite; (编辑:常州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |