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%;
    }
}
相关推荐
blackorbird2 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者3 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强3 小时前
Chrome和IE获取本机ip地址
前端
天***88963 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*3 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls4 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友4 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵4 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机5 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安6 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding