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

cyz1410012024-06-04 11:44

效果例图：

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%;
    }
}