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%;
    }
}
相关推荐
万少2 分钟前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder4 分钟前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix15 分钟前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句15 分钟前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易15 分钟前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟22 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子29 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao1 小时前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿2871 小时前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端1 小时前
发布一个monaco-editor 汉化包
前端·npm·vite