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. python-*args和**kwargs作用和区别

    1. *args 不定长的参数:*args 无论你传递一个参数还是二个还是多个都可以.(*args传入的是无命名参数,例如:add(1,2,3,4,5)存储的是元祖)args可以自定义其他名称 def ...

  2. linux文件名乱码解决

    问题描述:公司的FTP服务器早就搭建好,windows客户端可以上传文件到FTP服务器,但是上传去的文件在LINUX目录下文件是乱码. 解决方法:首先编辑/etc/sysconfig/i18n这个文件 ...

  3. Confluence 6 在升级之前

    在这个指南中,我们将会与你一同对最新的 Confluence 站点在 Windows 或者 Linux 平台进行安装和更新. 如果你的 Confluence 安装实例是当前的许可证的话,那么对 Con ...

  4. Vue+Element-ui+DateTimePicker 日期时间选择器传值给后台

                废话不多说,看代码: <template> <div class="block"> <span class="dem ...

  5. 微信小程序 页面跳转方式

    // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectT ...

  6. 控制dom 加载成功后事件

  7. Ios证书申请流程

    1. 创建appId l 苹果开发网站→Account-overview下的Cerficates,IDs & Profiles→AppIDs,点击添加 l 填写App ID描述,在App ID ...

  8. 如何将baseUrl项目地址提取放到放到static

    原本项目的baseUrl地址是放在src/common/config.js ,但是这有一个缺点,就是本地测试一个地址,生产一个地址.每发一次不同環境的包就要build一下,太麻烦了!有没有解决的办法呢 ...

  9. Oracle单机Rman笔记[6]---记一次oracle脱机异地还原

    系统情况介绍 正式环境:windows 2008 r2-32bit/ Oracle: Release 11.2.0.1.0 目标环境:windows 2012 Standard-64bit / Ora ...

  10. [CentOS 7] TexLive2017中kpsewhich Bug的修复

    使用TexLive有一段时间了,从2015到2017,一直运行如常. 最近,想把以前的文档重新编译,却发现不能正常运行,费了好大一番工夫,才终于修复了这个bug,记录如下. 问题描述:编译一个简单的 ...