首页
所有分类
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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
实例讲解CSS3中Transform的perspective属性的用法
Apr 22 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
保加利亚购物网站(3) 希腊购物网站(6) 约旦购物网站(1) 冰岛购物网站(1) 马耳他购物网站(1) 哈萨克斯坦购物网站(2) 罗马尼亚购物网站(10) 白俄罗斯购物网站(3) 乌克兰购物网站(27) 亚洲购物网站(6)
You might like
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
PHP比你想象的好得多
2014/11/27 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
一看就会的vuex实现登录验证（附案例）
2020/01/09 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
Python中有趣在__call__函数
2015/06/21 Python
python实现决策树
2017/12/21 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
深入了解Python 变量作用域
2020/07/24 Python
使用django自带的user做外键的方法
2020/11/30 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
怎样声明子类
2013/07/02 面试题
专科应届生求职信
2013/11/24 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers