使用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按钮跑马灯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5 的a标签 Href 拨电话的写法
Nov 04 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
Python之批量创建文件的实例讲解
2018/05/10 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Python初学者常见错误详解
2019/07/02 Python
如何使用python切换hosts文件
2020/04/29 Python
基于python实现删除指定文件类型
2020/07/21 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
上海中网科技笔试题
2012/02/19 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
医学生自我鉴定范文
2013/11/08 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
空气环保标语
2014/06/12 职场文书
学校食堂标语
2014/10/06 职场文书
安全月宣传标语
2014/10/07 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
比较node.js和Deno
2021/04/27 Javascript
Python 视频画质增强
2022/04/28 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python