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来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
HTTP中的Content-type详解
Jan 18 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中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
php文件上传类的分享
2017/07/06 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
淘宝搜索框效果实现分析
2011/03/05 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
python+opencv实现车道线检测
2021/02/19 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
后勤自我鉴定
2013/10/13 职场文书
自主招生自荐书
2013/11/29 职场文书
公积金单位接收函
2014/01/11 职场文书
家具促销活动方案
2014/02/16 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
python使用BeautifulSoup 解析HTML
2022/04/24 Python
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript