CSS圆形旋转边框

最新推荐文章于 2024-10-13 19:30:05 发布

原创最新推荐文章于 2024-10-13 19:30:05 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文介绍了一种使用CSS实现的特殊动画效果，通过:before和:after伪元素结合clip-path属性来创建动态的图形边界。文章详细展示了如何利用关键帧动画使边界按预定路径旋转，同时保持了良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 .abackimg {
 div{
        position: relative;
        text-align: center;
        font-size: 24px;
        width: 100%;
        height: 100%;
        border: 2px solid rgb(179, 191, 231);
        border-radius: 50%;
        transition: all .3s;
        &::before, &::after {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid rgb(17, 36, 100);
            transition: all .5s;
            animation: clippath 3s infinite linear;
            // background-color: aquamarine;
        border-radius: 50%;
        clip-path: polygon(50% 50%, 100% 46%, 100% 23%, 100% 0, 74% 0, 53% 0, 15% 0);
        }
        &::after {
            animation: clippath 3s infinite -1.5s linear;
        }
        @keyframes clippath {
            0%{-webkit-transform:rotate(0deg);}
            25%{-webkit-transform:rotate(90deg);}
            50%{-webkit-transform:rotate(180deg);}
            75%{-webkit-transform:rotate(270deg);}
            100%{-webkit-transform:rotate(360deg);}
        }

    }
  }