当前位置：首页 > CSS

css制作轮回眼

2026-01-28 17:43:38CSS

使用CSS制作轮回眼效果

轮回眼是《火影忍者》中的经典元素，可以通过CSS的渐变和动画实现。以下是两种实现方法：

方法一：同心圆渐变实现静态轮回眼

css制作轮回眼

.rinnegan {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    radial-gradient(circle at center, 
      purple 0%, 
      purple 10%, 
      transparent 10%),
    radial-gradient(circle at center, 
      black 15%, 
      black 25%, 
      transparent 25%),
    radial-gradient(circle at center, 
      purple 30%, 
      purple 40%, 
      transparent 40%);
  position: relative;
}

方法二：动画效果实现动态轮回眼

.rinnegan-animated {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at center, 
    purple 0%, 
    purple 10%, 
    transparent 10%),
  radial-gradient(circle at center, 
    black 15%, 
    black 25%, 
    transparent 25%);
  position: relative;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

方法三：添加瞳孔细节

css制作轮回眼

.rinnegan-detailed::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: white;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 0 5px black,
    0 0 0 10px purple;
}

方法四：波纹动画效果

.rinnegan-ripple {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: purple;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid white;
  animation: ripple 3s infinite;
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

HTML结构示例：

<div class="rinnegan"></div>
<div class="rinnegan-animated"></div>
<div class="rinnegan-detailed"></div>
<div class="rinnegan-ripple">
  <div class="ripple-circle"></div>
  <div class="ripple-circle" style="animation-delay: 1s"></div>
</div>

这些方法可以单独使用或组合使用，通过调整颜色、大小和动画参数可以获得不同的视觉效果。

标签: css