首页
所有分类
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 3D制作实战案例分析
Sep 18 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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) group by(1) 表结构(1) REGEXP(1) 分布式追踪(1) kubernetes(1) HBuilder(1) GPU(1) Express(1) delete in(1)
You might like
mysql4.1以上版本连接时出现Client does not support authentication protocol问题解决办法
2007/03/15 PHP
php数组遍历类与用法示例
2019/05/24 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
HTML页面定时跳转方法解析（2种任选）
2016/12/22 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
Flask入门教程实例：搭建一个静态博客
2015/03/27 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python工厂函数用法实例分析
2018/05/14 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python中的heapq模块源码详析
2019/01/08 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
Jacadi Paris美国官方网站：法国童装品牌
2017/10/15 全球购物
New Balance澳大利亚官网：运动鞋和健身服装
2019/02/23 全球购物
斯图尔特·韦茨曼鞋加拿大官网：Stuart Weitzman加拿大
2019/10/13 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
工作决心书范文
2014/03/11 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
委托函范文
2015/01/29 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
初中运动会前导词
2015/07/20 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
新学期新寄语，献给新生们！
2019/11/15 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python