用SVG和CSS制作带有透明度的闪烁圆圈

2023-12-19 03:19:47

如何实现带有透明度的圆圈闪烁

在数字设计领域，动画和动态效果对于吸引用户注意力和提高参与度至关重要。其中，圆圈闪烁是一种常见且有效的方法，可以用来指示加载、活动或警报。然而，当传统动画格式（如GIF）不适合时，实现具有透明度的圆圈闪烁可能是一项挑战。本文将探讨使用SVG和CSS来实现这种效果的两种方法，为网页设计和应用程序开发人员提供一个实用的解决方案。

SVG方法

SVG（可缩放矢量图形）是一种基于XML的矢量图像格式，支持动画和交互功能。通过使用SVG，我们可以创建具有透明度的圆圈，并利用其动画能力实现闪烁效果。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="currentColor" stroke="black" stroke-width="2" opacity="0.5" />
  <animate attributeName="opacity" values="0;1;0" dur="1s" repeatCount="indefinite" />
</svg>

这个SVG代码创建了一个半径为40、填充为当前颜色、轮廓为黑色、透明度为0.5的圆圈。<animate>元素定义了一个动画，该动画以1秒为间隔闪烁圆圈的透明度，并一直重复。

CSS方法

CSS（层叠样式表）是用于定义网页布局和样式的语言。通过使用CSS，我们可以创建具有透明度的圆圈，并利用其关键帧动画功能实现闪烁效果。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.5;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}