有趣的css3动画效果

今天我用了css3玩了一个有趣的css动画效果，值得掌握。

线条围绕容器转动

运行效果

1592710224991.gif

实现方式

这个效果并不是直接使用animation来实现的，而是通过clip属性来实现的。外边的蓝色运动的线条实际为一个完整的div，只是通过clip属性裁剪后只剩下上下左右之中的一边。clip属性依据上-右-下-左的顺序，以左上角(0, 0)为标准点进行裁剪，如果传入的参数为auto，则表示不裁剪

实现代码

html部分：

<div class="box">
            <div class="line-box">

            </div>
        </div>

css部分:

.box {
                margin: 200px auto;
                position: relative;
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.5);
            }

            .line-box {
                position: absolute;
                width: 220px;
                height: 220px;
                left: 0;
                top: 0;
                margin-left: -10px;
                margin-top: -10px;
                border: 2px solid red;
                box-sizing: border-box;
                animation: move 5s linear infinite;
            }

            @keyframes move {

                0%,
                100% {
                    clip: rect(0 220px 2px 0);
                }

                25% {
                    clip: rect(0 220px 220px 218px);
                }

                50% {
                    clip: rect(218px 220px 220px 0);
                }

                75% {
                    clip: rect(0 2px 220px 0);
                }
            }

有趣的css3动画，谢谢观赏！