CSS3实现圆圈动态发光特效动画

最新推荐文章于 2023-06-09 13:30:51 发布

正在修炼web的小芮

最新推荐文章于 2023-06-09 13:30:51 发布

阅读量1k

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125916506

版权

本文介绍如何利用CSS3实现一个圆圈的动态发光特效动画，通过在body中创建元素并应用特定的CSS样式，达到吸引用户的视觉效果。

摘要由CSDN通过智能技术生成

在body里面创建盒子

<body>
    <div class="circle-wrap">
        <div class="circle">
            <div class="big-circle"></div>
            <div class="small-circle"></div>
        </div>
    </div>
    <div class="smallcircle2"></div>
    <div class="bigcircle2"></div>

    <div class="item"></div>
</body>

写入css样式修饰

    <style>
        body{
            background: pink;
        }
        .circle-wrap{
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .circle{
            width: 24px;
            height: 24px;
            position: relative;
        }
        .big-circle{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: skyblue;
            position: ab