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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
Html5获取用户当前位置的几种方式
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
substr()函数中文版
2006/10/09 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
Js四则运算函数代码
2012/07/21 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
详解Vue项目中实现锚点定位
2019/04/24 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
深入解析Python中的__builtins__内建对象
2016/06/21 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
服务标兵事迹材料
2014/05/04 职场文书
共青团员自我评价范文
2014/09/14 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2014年督导工作总结
2014/11/19 职场文书
市级三好学生评语
2014/12/29 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python