7、css3实现边框不停地跑动效果

效果例图:

1、上html代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<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="./3.css" />
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box">
            中国云南昆明
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
</body>
</html>

2、上css代码:

css 复制代码
.container{
    width: 800px;
    height: 680px;
    margin: 20px auto;
    position: relative;
}
.box{
    width: 420px;
    height: 210px;
    margin: 100px auto;
    line-height: 210px;
    text-align: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 700;
    letter-spacing: 0.6em;
}
.line{
    position: absolute;
}
.line:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,transparent, #008c8c);
    animation: move1 8s linear infinite;
}
@keyframes move1 {
    0%{
        left: -100%;
    }
    50%,
    100%{
        left: 100%;
    }    
}
.line:nth-child(2){
    top: -100%;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg,transparent, #008c8c);
    animation: move2 8s linear infinite;
    animation-delay: 2s;
}
@keyframes move2 {
    0%{
        top: -100%;
    }
    50%,
    100%{
        top: 100%;
    } 
}


.line:nth-child(3){
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 4px;
    background: linear-gradient(270deg,transparent, #008c8c);
    animation: move3 8s linear infinite;
    animation-delay: 4s;
}
@keyframes move3 {
    0%{
        right: -100%;
    }
    50%,
    100%{
        right: 100%;
    } 
}
.line:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(360deg,transparent, #008c8c);
    animation: move4 8s linear infinite;
    animation-delay: 6s;
}
@keyframes move4 {
    0%{
        bottom: -100%;
    }
    50%,
    100%{
        bottom: 100%;
    }
}
相关推荐
kymjs张涛20 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵25 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62237 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94944 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
土豆12502 小时前
提升CSS开发效率的必备Chrome插件
css·chrome