CSS动画实现闪烁效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            border-radius: 100%;
            margin: 200px;
            animation: twinkle 0.5s infinite alternate;
        }
        @keyframes twinkle {
            0%{
                opacity:.0.8;
            }
            100%{
                opacity:0;
            }
        }
    </style>
</head>
<body>
<div id="div"></div>
</body>
<script>

</script>
</html>

运行效果

不断闪烁
在这里插入图片描述
在这里插入图片描述

发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/KaiSarH/article/details/104404638