HTML代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <a href="#">
        <span></span>
        <span id="1"></span>
        <span></span>
        <span id="2"></span>
        Button
    </a>
</body>
</html>

CSS代码

body{
    margin:;
    padding:;
    background:#2f3640;
}
a{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:#1670f0;
    font-size:60px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
    padding:30px;
    overflow: hidden;
}
a::before{
    content: "";
    position: absolute;
    top:2px;
    left:2px;
    bottom:2px;
    width:50%;
    background:rgba(255, 255, 255, .05)
}
a span:nth-child(1){
    position: absolute;
    top:;
    left:;
    width:100%;
    height:4px;
    background:linear-gradient(to right,#2f3640,#1779ff);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}
a span:nth-child(2){
    position: absolute;
    top:;
    right:;
    width:4px;
    height:100%;
    background:linear-gradient(to bottom,#2f3640,#1779ff);
    animation: animate2 1s linear infinite;
    animation-delay: 0.5s;
}
@keyframes animate2{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}
a span:nth-child(3){
    position: absolute;
    bottom:;
    right:;
    width:100%;
    height:4px;
    background:linear-gradient(to left,#2f3640,#1779ff);
    animation: animate3 1s linear infinite;
}
@keyframes animate3{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}

a span:nth-child(4){
    position: absolute;
    bottom:;
    left:;
    width:4px;
    height:100%;
    background:linear-gradient(to top,#2f3640,#1779ff);
    animation: animate4 1s linear infinite;
    animation-delay: 0.5s;
}
@keyframes animate4{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}

JS代码（为了解决刚打开网页线条全部存在问题）

        var one = document.getElementById("1");
        var two = document.getElementById("2");
        one.style.visibility = "hidden";
        two.style.visibility = "hidden";
        window.setTimeout(function(){
            one.style.visibility = "visible";
        two.style.visibility = "visible";
        },500)

最终效果如图：

CSS效果：跑马灯按钮的更多相关文章

  1. Vue学习笔记四：跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  2. TextView的跑马灯效果（AS开发实战第二章学习笔记）

    TextView的跑马灯效果跑马灯用到的属性与方法说明singleLine 指定文本是否单行显示ellipsize 指定文本超出范围后的省略方式focusable 指定是否获得焦点,跑马灯效果要求设置 ...

  3. 安卓之文本视图TextView及跑马灯效果

    一.基本属性和设置方法 二.跑马灯用到的属性与方法说明 三.省略方式的取值说明 四.跑马灯效果案例代码   (1)布局xml文件 <?xml version="1.0" en ...

  4. 【跑马灯】纯css3跑马灯demo

    我们写跑马灯一般都是用js控制定时器不断循环产生,但是定时器消耗比较大,特别是程序中很多用到定时器的时候,感觉有的时候比较卡.但是css3样式一般不会.这里主要的思路就是用css3代替js定时器实现一 ...

  5. js_跑马灯

    跑马灯?刚听到这个词的时候,脑袋第一个想到的是跑马?嗯?就是香港的那种跑马场.懂?其次就是霓虹灯了,一闪一闪的多好看. 霓虹灯?哦,那是城市的杰作,记忆中是.开往城市边缘开,把车窗都摇下来,用速度换一 ...

  6. marquee标签跑马灯连续无空白播放效果 纯CSS（chrome opera有效）

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  7. csdn左侧个人栏目美化，css英文颜色大全，跑马灯效果，点击转到qq联系，点击转到发送邮件。

    跑马灯效果: <a href="http://mmmmmm.me" target="_blank"><marquee><font ...

  8. js+css简单效果（幕布，跑马灯）

    2.js普通的盒子,css的优先级 css的优先级 !important >>>>>  style 行内样式  >>>>> #id选择器 # ...

  9. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

随机推荐

  1. vue版 文字滚动

    用法:<marque :text="bannerText"></marque> 下载

  2. CF #552（div3）G 最小lcm

    题目链接:http://codeforces.com/contest/1154/problem/G 题意:lcm是最小公倍数,本题就是给你一个数组(可能会重复),要求你判断出那两个数的最小公倍数最小, ...

  3. Linux进程管理的学习

    uptime 简洁显示服务器负载 uptime 显示内核版本 uname -r dstat命令 cpu.内存.io等查看工具 dstat dstat --top-cpu dstat --top-io ...

  4. 百度EasyDL文本分类自定义API示例代码 python

    因为需要将命名实体中的组织机构名进一步区分为政府.企业.社会组织等,在easydl上做了一个文本分类模型,但是要用这个接口时候发现, 官方文档中竟然还在用urllib2的库,且不完整.好多地方会报错, ...

  5. react生命周期-新增与替换

    class A extends React.Component { // 用于初始化 state constructor() {} // 用于替换 `componentWillReceiveProps ...

  6. php上传文件，接口是java,go。

    $uri = ‘https://www.xxx.com/api/xxxxx’; $ch = curl_init(); //加@符号curl就会把它当成是文件上传处理 $tmpName = $_FILE ...

  7. mysql 循环、游标

    mysql 循环只能在存储过程.代码记录 CREATE DEFINER=`front`@`%` PROCEDURE `a_1`() BEGIN -- 声明变量,接收游标循环变量 DECLARE _co ...

  8. 深入理解Redis系列之SpringBoot集成Redis

    SpringBoot环境 快速搭建一个SpringBoot工程 进入 https://start.spring.io 网站, 使用该网站初始化一个SpringBoot工程 添加相关依赖 因为使用spr ...

  9. kali ssh远程连接过程

    准备工具: kali系统,secureCRT, 首先在kali系统中配置ssh文件,我们知道linux总是把所有的配置管理信息当作文件处理,所以对ssh的配置也是相当于对文件的编辑. vi /etc/ ...

  10. 使用Python+turtle绘制动画重现龟兔赛跑现场

    问题描述: 在经典的龟兔赛跑故事中,兔子本来是遥遥领先的,结果因为骄傲,居然在比赛现场睡了一觉,醒来后发现乌龟已经快到终点了,于是赶紧追赶,无奈为时已晚,最终输掉了比赛.本文使用turtle绘制乌龟和 ...