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. Nginx缓存

    一.基于proxy_cache的缓存 worker_processes ; events { worker_connections ; } http { include mime.types; def ...

  2. Caffe on Mac OS X 10.11

    在Mac环境安装Caffe环境(CPU_ONLY) http://blog.csdn.net/xidiancoder/article/details/52081519   有问题 http://blo ...

  3. OO面向对象第一单元总结

    OO面向对象第一单元总结(表达式求导) 写在前面: 魔鬼课程oo第一单元终于结束,当终究要落笔总结,竟不知从何写起…… 回首再去看第一次的作业,你会满足于那时的幸福,或许,这就是成长吧! 千言万语,一 ...

  4. 20165309 《网络对抗技术》 Kali安装

    20165309 <网络对抗技术> Kali安装 1. 目的要求 下载 安装 网络 共享 软件源 2. 主要步骤 下载系统镜像文件 进入Kali官网下载,我选择的是64位版本: 虚拟机设置 ...

  5. 『高性能模型』Roofline Model与深度学习模型的性能分析

    转载自知乎:Roofline Model与深度学习模型的性能分析 在真实世界中,任何模型(例如 VGG / MobileNet 等)都必须依赖于具体的计算平台(例如CPU / GPU / ASIC 等 ...

  6. python中pyperclip库的功能

    python3中pyperclip库的功能 作用就是复制.粘贴 例子 import pyperclip pyperclip.copy('Hello world!') pyperclip.paste() ...

  7. 工作笔记6-java相关

    1.有时候安装失败或者要装新版本的JDK,可先卸载JDK: a.   首先执行命令查看服务器下的JDK的版本:命令如下:rpm -qa |grep jdk b.   然后执行命令:yum -y rem ...

  8. Qt 适合做界面

    确实感觉的Qt的界面开发相比MFC方便了许多,不用为设计和实现窗口烦恼.不需要太细研究界面的实现,从Qt自带的例子中就能轻松学习和应用.在界面开发上Qt的实用比MFC前进了许多.做C++开发不管怎样如 ...

  9. textarea右下角黑点

    先记录问题及解决方法,原因后续深入了解 在布局中,用到了textarea 输入框,在Android手机上却显示右下角有一个黑点,检查代码无误,代码没有多余的点符号. 解决:在textarea 中添加 ...

  10. python(元组，不可修改序列)

    元组也是序列,区别于列表,它不可更改,语法简单只要加逗号隔开即可 1.1,2,3 (1,2,3) 2.42, (42,) 3.3*(40+2) 126 3*(40+2,) (42,42,42) 4.x ...