用纯CSS3实现闪闪发光的动画

最新推荐文章于 2025-03-03 08:00:00 发布

努力的小懒

最新推荐文章于 2025-03-03 08:00:00 发布

阅读量6.5k

点赞数 2

分类专栏： CSS3 文章标签： CSS3 animation 纯CSS3实现动画

本文链接：https://blog.csdn.net/qq_34576876/article/details/95532946

版权

用纯CSS3实现闪闪发光的动画，最终实现效果如下图所示
在这里插入图片描述
以下展示实现该效果的代码：

<!DOCTYPE HTML>
        <html>
        <head>
            <title>纯CSS3实现闪闪发光的动画</title>
            <style>
                body{
                    background-color:#000000;
                }
                /*0%开始，100%结束*/
                @keyframes scale{
                    0%{transform:scale(1)}
                    50%,75%{transform:scale(3)}
                    78%,100%{opacity:0}
                }
                .item1 {
                position: absolute;
                width: 14px;
                height: 14px;
                background-color: #FFFF00;
                border-radius: 50%;
                margin: 100px  100px 50px 200px;
                }
                .item1:before {
                content: '';

最低0.47元/天解锁文章