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. jquery表单提交获取数据(带toast dialog)

    最近写了一个召集令,传统表单提交注册.写写遇到的费时间的点与解决办法 git项目地址:form-demo(针对于手机版,懒人可以直接使用,有排版和样式) demo使用Jquery,toast使用jqu ...

  2. spring cloud(四)熔断器Hystrix

    熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...

  3. mybatis注解调用存储过程

    mapper @SelectProvider(type = RoleMenuSqlProvider.class,method = "updateRoleMenuRelation") ...

  4. Linux桌面系统常用软件和笔记(更新)

    (一).下文涉及到的环境 manjaro.deepin.Arch等 有些可以通用 有些不可以通用 (二).常用软件下载 一.桌面美化软件 1.桌面壁纸下载软件: varirety 下载方式:可以在多个 ...

  5. Oracle单机Rman笔记[2]---RMAN基础介绍

    A.DBA对于备份恢复的问题: 1.在数据库发生故障时,丢失多少数据是可承受的? 2.恢复数据库时,能够忍受的最长时间多少? 3.为了确保您的数据能够被恢复,愿意投入多少成本? 4.备份期间可以关闭系 ...

  6. 初学python类编的一个求矩形小程序

    简单的程序不简单,里面包含类定义类,传参,初始化,方法调用,创建实例,格式输出.主要在python中随时定义变量随时用,我这道题题想好久就是我初识类,传参,不是所有参数都的加单引号.简单的东西,复杂话 ...

  7. ubuntu16.04安装anaconda、环境配置

    anaconda默认3.7降级到3.6 conda install python=3.6 anaconda安装后找不到conda命令: 执行测试命令 conda info -e conda: comm ...

  8. 文件操作fopen

    这块所谓的"文件操作"就是把文件的内容读进程序,然后根据具体的格式进行解析,或者是显示,或者是修改. 也就是把一个文件加载到程序里面,然后对其进行修改. 文件操作就三步(固定的三步 ...

  9. 单链表ADT

    本博客第一篇学术性博客,所以还是写点什么东西: 首先这篇博客以及以后的博客中的代码尽量百分之90是自己写过的: 可能有部分图片和代码是我认为别人更好的故摘抄下来, 本人三观正确,所以一定会表明来源: ...

  10. Buzzsumo大型教程（内容营销+外链outreach必备）营销神器

    做内容营销,Buzzsumo基本是必备工具.做谷歌白帽SEO的百分八十应该都用过或者至少接触过.在国外就更不用说了,很多网络营销大牛眼里,Buzzsumo的重要程度绝对超过Ahrefs! Buzzsu ...