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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
canvas绘制太极图的实现示例
Apr 29 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
小程序转发探索示例
2019/02/19 Javascript
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Django数据统计功能count()的使用
2020/11/30 Python
会议主持词
2014/03/17 职场文书
公司业务员岗位职责
2014/03/18 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2016教师国培研修感言
2015/12/08 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript