css 流动边框，蚂蚁线

最新推荐文章于 2024-08-31 12:28:59 发布

转载最新推荐文章于 2024-08-31 12:28:59 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_42740797/article/details/112626552

文章标签：

#css3

css 专栏收录该内容

23 篇文章

订阅专栏

蚂蚁线的效果
在这里插入图片描述

蚂蚁线的解剖效果
在这里插入图片描述

总结:通过4条虚线的移动产生效果

此次内容只对顶部虚线进行解析

1、盒子相对定位 4条虚线绝对相对

2、transform: translateX(-200px)的作用

-200px 200px指的是正方形的边长 -200px 就是让虚线向左移动200px

没有transform: translateX(-200px) 在这里插入图片描述
有transform: translateX(-200px)

最后通过 animation: toRight 8s linear infinite;

使其有动画的移动会远处

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width:200px;
            height:200px;
            background: #b4affd;
            overflow: hidden;
        }
        .box>span{
            position: absolute;
        }
        .box>span:nth-child(4n+1){/*上*/
            left:0;
            top:0;
            height: 0px;
            width:400px;
            border-top:5px dashed black;
            animation: toRight 8s linear infinite;
            transform: translateX(-200px);
            animation-direction:alternate;
        }
        @keyframes toRight{
            to{
                transform: translateX(0px);
            }
        }
        .box>span:nth-child(4n+2){/*右*/
            right:0;
            top:0;
            height: 400px;
            width:0px;
            border-right:5px dashed black;
            animation: toBottom 8s linear infinite;
            transform: translateY(-200px);
            animation-direction:alternate;
        }
        @keyframes toBottom{
            to{
                transform: translateY(0px);
            }
        }
        .box>span:nth-child(4n+3){/*下*/
            left:0;
            bottom:0;
            height: 0px;
            width:400px;
            border-bottom:5px dashed black;
            animation: toLeft 8s linear infinite;
            transform: translateX(0px);
            animation-direction:alternate;
        }
        @keyframes toLeft{
            to{
                transform: translateX(-200px);
            }
        }
        .box>span:nth-child(4n){/*左*/
            left:0;
            top:0;
            height: 400px;
            width:0px;
            border-left:5px dashed black;
            animation: toTop 8s linear infinite;
            transform: translateY(0px);
            animation-direction:alternate;
        }
        @keyframes toTop{
            to{
                transform: translateY(-200px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>