CSS3中animation实现流光按钮效果


Posted in HTML / CSS onDecember 21, 2020

在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有流光按钮效果~

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属性就可以一直流动了~

CSS3中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 流光按钮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 #HTML / CSS
html+css3实现的登录界面
Dec 09 #HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 #HTML / CSS
CSS3 实现的火焰动画
Dec 07 #HTML / CSS
CSS3 实现的加载动画
Dec 07 #HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 #HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 #HTML / CSS
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js Math 对象的方法
2013/09/01 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
C语言如何决定使用那种整数类型
2016/11/26 面试题
个人社会实践自我鉴定
2014/03/24 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
python爬虫之selenium库的安装及使用教程
2021/05/23 Python
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers