引用css3中animation属性怎样实现流光按钮效果？

发布时间：2023-07-22 14:52:53 所属栏目：语言来源：

导读：使用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%，主要代码如下

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流光动画效果就实现啦

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!