css animation 实现闪烁动画gif效果，小圆圈
CSS 可以实现一个类似于 GIF 的闪烁动画效果，以下是一个使用 CSS animation 属性制作的小圆点闪烁动画示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Dot Blink</title>
<style>
.dot {
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%; /* 圆形 */
display: inline-block;
animation: blink 1s infinite alternate; /* 闪烁动画 */
}
@keyframes blink {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="dot"></div> <!-- 小圆点 -->
</body>
</html>这段代码会创建一个小圆点，通过 CSS animation 属性和 @keyframes 规则实现闪烁效果。动画名为 blink，持续时间为 1 秒，并且设置为无限次数循环(infinite)，且每次动画交替(alternate)显示。
评论已关闭