首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

使用CSS实现按钮边缘跑马灯动画

Posted in HTML / CSS onMay 07, 2023

先来看看效果：

使用CSS实现按钮边缘跑马灯动画

制作过程：

1. 定义标签，a标签是按钮，4个span就是按钮周围那四条行动的蓝边。：

 

<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
          night
    </a>

2. 定义按钮.night的基本样式：

.night{
            position: relative;
            width: 300px;
            height: 100px;
            color: rgb(18, 190, 243);
            letter-spacing: 12px;
            font-size: 50px;
            line-height: 100px;
            text-align: center;
            /* background-color: rgb(31, 49, 133); */
            background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
            text-transform: uppercase;
            user-select: none;
            text-decoration: none;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgb(14, 20, 105),
            0 0 5px rgb(9, 208, 235);
            transition: all 0.5s;
            
        }

position ： 相对定位。

letter-spacing：字间距。

linear-gradient：渐变颜色。

text-transform：全部字母为大写。

user-select：文本不可选中。

text-decoration：消除默认下划线。

overflow：溢出隐藏。

box-shadow：阴影。

transition：过渡效果。

3. 鼠标经过按钮样式变化：

.night:hover{
            text-shadow: 0 0 5px rgb(18, 190, 243),
            0 0 8px rgb(18, 190, 243),
            0 0 10px rgb(18, 190, 243); 
            background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
            box-shadow: inset 0 0 10px rgb(14, 20, 105),
            0 0 5px rgb(9, 208, 235),
            0 0 10px rgb(9, 208, 235);
        }

text-shadow：文字阴影。

lineear-gradient：渐变色变化。

box-shadow：盒子阴影变化。

4. 4条span的基本样式：

.night span{
            position: absolute;   
        }

absolute 绝对定位

5. 设置按钮上方那条运动蓝线样式：

.night span:nth-child(1){
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
            animation: move1 2s linear infinite;
        }
        @keyframes move1 {
            0%{
                transform: translateX(-100%);
            }
            100%{
                transform: translateX(100%);
            }
        }

linear-gradient：渐变色。

transparent为透明色。

animation：设置动画，让蓝线运动起来。

transform: translateX(-100%); 在X轴上的偏移为-100%。

transform: translateX(100%); 让它偏移到100%。

6. 以此类推，其它三条也设置动画，再让左边和右边那条设置动画延迟便可。：

.night span:nth-child(2){
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            transform: translateY(-100%);
            background-image: linear-gradient(to bottom,  transparent ,  rgb(0, 153, 255)  );            
            animation: move2 2s linear infinite;
            animation-delay: 1s;
        }
        @keyframes move2 {
           
            100%{
                transform: translateY(100%);
            }
        }
        .night span:nth-child(3){
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
            animation: move3 2s linear infinite;
        }
        @keyframes move3 {
            0%{
                transform: translateX(100%);
            }
            100%{
                transform: translateX(-100%);
            }
        }
        .night span:nth-child(4){
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            transform: translateY(100%);
            background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
            animation: move4 2s linear infinite;
            animation-delay: 1s;
        }
        @keyframes move4 {
            100%{
                transform: translateY(-100%);
            }
        }

animation-delay: 1s; 设置动画延迟1秒播放。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(4, 4, 19);
        }
        .night{
            position: relative;
            width: 300px;
            height: 100px;
            color: rgb(18, 190, 243);
            letter-spacing: 12px;
            font-size: 50px;
            line-height: 100px;
            text-align: center;
            /* background-color: rgb(31, 49, 133); */
            background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
            text-transform: uppercase;
            user-select: none;
            text-decoration: none;
            overflow: hidden;
            box-shadow: inset 0 0 10px rgb(14, 20, 105),
            0 0 5px rgb(9, 208, 235);
            transition: all 0.5s;
            
        }
        .night:hover{
            text-shadow: 0 0 5px rgb(18, 190, 243),
            0 0 8px rgb(18, 190, 243),
            0 0 10px rgb(18, 190, 243); 
            background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
            box-shadow: inset 0 0 10px rgb(14, 20, 105),
            0 0 5px rgb(9, 208, 235),
            0 0 10px rgb(9, 208, 235);
        }
            
        .night span{
            position: absolute;   
        }
        .night span:nth-child(1){
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
            animation: move1 2s linear infinite;
        }
        @keyframes move1 {
            0%{
                transform: translateX(-100%);
            }
            100%{
                transform: translateX(100%);
            }
        }
        .night span:nth-child(2){
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            transform: translateY(-100%);
            background-image: linear-gradient(to bottom,  transparent ,  rgb(0, 153, 255)  );            
            animation: move2 2s linear infinite;
            animation-delay: 1s;
        }
        @keyframes move2 {
           
            100%{
                transform: translateY(100%);
            }
        }
        .night span:nth-child(3){
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
            animation: move3 2s linear infinite;
        }
        @keyframes move3 {
            0%{
                transform: translateX(100%);
            }
            100%{
                transform: translateX(-100%);
            }
        }
        .night span:nth-child(4){
            top: 0;
            left: 0;
            width: 2px;
            height: 100%;
            transform: translateY(100%);
            background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
            animation: move4 2s linear infinite;
            animation-delay: 1s;
        }
        @keyframes move4 {
            100%{
                transform: translateY(-100%);
            }
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
          night
    </a>
</body>
</html>

到此这篇关于使用CSS实现按钮边缘跑马灯动画的文章就介绍到这了,更多相关CSS按钮跑马灯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章，希望大家以后多多支持三水点靠木！

 

使用CSS实现按钮边缘跑马灯动画

- Author -

北极光之夜。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
HTML5教程之html 5 本地数据库（Web Sql Database）
Apr 03 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
html5清空画布方法（三种）
Oct 16 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
使用CSS实现音波加载效果
table不让td文字溢出操作方法
Dec 24 #HTML / CSS
table设置超出部分隐藏，鼠标移上去显示全部内容的方法
Dec 24 #HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 #HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
南麂列岛(1) SRF-S84(1) ICF-SW55(1) ICF-SW7600GR(1) SRF-S83(1) 根德(2) 台湾(1) Panasonic(1) 松下(1) PL660(1)
You might like
session 的生命周期是多长
2006/10/09 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python3.5实现socket通讯示例(TCP）
2017/02/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
运动会100米解说词
2014/01/23 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
工伤私了协议书范本
2014/11/24 职场文书
期末考试复习计划
2015/01/19 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书