首页
所有分类
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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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
智利购物网站(5) 斯洛伐克购物网站(7) 菲律宾购物网站(13) 沙特阿拉伯购物网站(9) 秘鲁购物网站(1) 捷克购物网站(26) 匈牙利购物网站(11) 新西兰购物网站(42) 北美洲购物网站(1) 卡塔尔购物网站(3)
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php生成短域名函数
2015/03/23 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
如何利用python查找电脑文件
2018/04/27 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python怎么判断模块安装完成
2020/06/19 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
新加坡最早生产电动滑板车的制造商之一：FunsToTheFore
2020/09/08 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
村官工作鉴定评语
2014/01/27 职场文书
大型会议接待方案
2014/03/01 职场文书
反邪教警示教育方案
2014/05/13 职场文书
父亲节活动策划方案
2014/08/24 职场文书
教师师德考核自我评价
2014/09/13 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
道歉信范文
2015/05/12 职场文书
教师教育教学随笔
2015/08/15 职场文书