一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS3中animation实现流光按钮效果代码示例

时间:2020-12-21 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS3中animation实现流光按钮效果代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

在此之前简单介绍一下animation属性的用法。

animation:[ animation-name(检索或设置对象所应用的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animation-timing-function(检索或设置对象动画的过渡类型) ] || [ animation-delay(检索或设置对象动画延迟的时间) ] || [ animation-iteration-count(检索或设置对象动画的循环次数) ] || [ animation-direction(检索或设置对象动画在循环中是否反向运动) ]

第一步:给div设置宽高和圆角边框成一个圆角矩形。

第二步:设置背景颜色为三种颜色的渐变色(最后一个颜色需要和第一个颜色一样,这样流动起来不会有卡颜色的情况),并将背景大小设为400%,主要代码如下

css;">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;
        }

案例完整代码:




    
    Document
    


    
Let's Go

热门栏目