当前位置：首页 > CSS

css制作轮回眼

2026-04-01 21:01:53CSS

CSS 制作轮回眼效果

通过CSS可以实现类似《火影忍者》中轮回眼的视觉效果，主要利用伪元素、渐变和动画属性。以下是具体实现方法：

HTML结构

css制作轮回眼

<div class="rinnegan-eye"></div>

CSS样式

.rinnegan-eye {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #4a148c 10%, #0d47a1 30%, #b71c1c 50%);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.rinnegan-eye::before,
.rinnegan-eye::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #000;
}

.rinnegan-eye::before {
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rinnegan-eye::after {
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}

进阶效果增强

添加同心圆纹路

css制作轮回眼

.rinnegan-eye {
  /* 原有样式基础上添加 */
  box-shadow: 
    0 0 0 5px #000,
    0 0 0 10px #4a148c,
    0 0 0 15px #000,
    0 0 0 20px #0d47a1;
}

旋转动画效果

.rinnegan-eye {
  animation: rotate 20s linear infinite;
}

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

响应式调整

通过CSS变量可以方便调整眼睛大小：

:root {
  --eye-size: 200px;
}

.rinnegan-eye {
  width: var(--eye-size);
  height: var(--eye-size);
}

.rinnegan-eye::before {
  width: calc(var(--eye-size) * 0.2);
  height: calc(var(--eye-size) * 0.2);
}

.rinnegan-eye::after {
  width: calc(var(--eye-size) * 0.1);
  height: calc(var(--eye-size) * 0.1);
}