使用 CSS 实现边框环绕旋转动画

效果展示

实现思路

第一步：先绘制一个容器（为方便展示层级，暂时设置黑色背景）

第二步：在容器里添加一个元素作为背景，容器宽高须大于容器对角线长度 （为方便展示层级，暂时设置透明）

第三步：让背景旋转起来

第四步：隐藏超出容器的部分

第五步：绘制内容部分覆盖在容器上，未覆盖部分即是边框

实现代码

html

            <div class="box-wrap">
                <div class="border-layer"></div>
                <div class="box-content"></div>
            </div>
        

css

            /* 容器 */
            .box-wrap{
                width:300px;
                height:200px;
                border-radius: 10px;
                overflow: hidden;
                position: relative;
            }
            /* 作为边框的旋转层 */
            .box-wrap .border-layer{
                background-image:
                    conic-gradient(
                        from 45deg,
                        #ffbe44 0deg 90deg,
                        #5DADE2 90deg 180deg,
                        #ee5732 180deg 270deg,
                        #2ECC71 270deg 360deg
                    );
                position:absolute;
                left:50%;
                top:50%;
                width:370px;
                height:370px;
                margin-left:-185px;
                margin-top:-185px;
                animation:6s infinite linear rotate;
            }
            /* 旋转动画 */
            @keyframes rotate { 
                from { transform: rotate(0deg); } 
                to { transform: rotate(360deg); }  
            }
            /* 内容层 */
            .box-wrap .box-content{
                width:292px;
                height:192px;
                background-color:#fff;
                border-radius: 8px;    
                overflow: hidden;
                position: absolute;
                top:4px;
                left:4px;
                padding:10px;
                box-sizing: border-box;
            }