下面是“教你使用css制作出超级炫酷的血轮眼和轮回眼特效”的完整攻略：

下面是“教你使用css制作出超级炫酷的血轮眼和轮回眼特效”的完整攻略：

教你使用css制作出超级炫酷的血轮眼和轮回眼特效

准备工作

在开始之前，需要准备以下工作：

1. 在html中引入以下css样式：

.eye {
  width: 30px;
  height: 30px;
  background: white;
  border: 3px solid black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

.eye::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: black;
  border-radius: 50%;
}

1. 在html中添加以下结构：

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

制作血轮眼特效

接下来，实现血轮眼特效的步骤如下：

1. 在html中添加以下结构：

<div class="eye blood-eye">
  <div class="inner-eye blood-inner-eye"></div>
</div>

1. 在css中为两个新添加的class .blood-eye 和 .blood-inner-eye 添加以下样式：

.blood-eye:before {
  background: #f00;
}

.blood-inner-eye {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle at 50% 50%, #f00, #840000);
  position: absolute;
  top: -20px;
  left: -20px;
  border-radius: 50%;
  animation: eye-animation 6s linear infinite;
  transform-origin: center center;
}

1. 为了让特效看起来更加真实，需要在两个类上添加动画效果：

@keyframes eye-animation {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0.5);
  }
}

1. 至此，血轮眼特效已经完成。在页面上添加多个类似的结构即可得到更加炫酷的效果。示例：

<div class="eye blood-eye">
  <div class="inner-eye blood-inner-eye"></div>
</div>

<div class="eye blood-eye">
  <div class="inner-eye blood-inner-eye"></div>
</div>

制作轮回眼特效

接下来，实现轮回眼特效的步骤如下：

1. 在html中为轮回眼添加新的class .mangekyo-eye 和 .mangekyo-inner-eye：

<div class="eye mangekyo-eye">
  <div class="inner-eye mangekyo-inner-eye"></div>
</div>

1. 在css中为两个新添加的class .mangekyo-eye 和 .mangekyo-inner-eye 添加以下样式：

.mangekyo-eye {
  width: 100px;
  height: 100px;
  border: none;
  background: radial-gradient(#fff 30%, #000 40%, #000 70%, #fff 80%);
  position: relative;
  border-radius: 0%;
}

.mangekyo-eye:before {
  content: '';
  position: absolute;
  top: 33%;
  right: 0;
  border-right: 20px solid white;
  border-bottom: 20px solid black;
  width: 0;
  height: 0;
  z-index: -1;
}

.mangekyo-inner-eye {
  width: 70px;
  height: 70px;
  background: radial-gradient(#e6e6e6 30%, #a3a3a3 70%, #a3a3a3 80%, #e6e6e6);
  position: absolute;
  top: 11px;
  left: 11px;
  border-radius: 50%;
  animation: eye-animation 6s linear infinite;
  transform-origin: center center;

  &:after {
    content: '';
    position: absolute;
    top: 20%;
    right: -8%;
    width: 25%;
    height: 40%;
    background: white;
    box-shadow: 0 -2px 0px rgba(0, 0, 0, 0.15), 0 2px 0px rgba(0, 0, 0, 0.15), 1px -4px 0px rgba(0, 0, 0, 0.15), 1px 4px 0px rgba(0, 0, 0, 0.15);
    transform: rotate(-35deg);
  }
}

1. 至此，轮回眼特效已经完成。同样的，在页面上添加多个类似的结构即可得到更加炫酷的效果。示例：

<div class="eye mangekyo-eye">
  <div class="inner-eye mangekyo-inner-eye"></div>
</div>

<div class="eye mangekyo-eye">
  <div class="inner-eye mangekyo-inner-eye"></div>
</div>

以上是“教你使用css制作出超级炫酷的血轮眼和轮回眼特效 ”的完整攻略，希望能帮助到你。