[分享]css做一双写轮眼图

CSS可以用来制作很多有趣的效果，比如在网页中制作出《火影忍者》中著名的写轮眼图。下面我们来看看如何使用CSS来制作这样一幅写轮眼图。.eye { width: 80px; height: 80px;...

CSS可以用来制作很多有趣的效果，比如在网页中制作出《火影忍者》中著名的写轮眼图。下面我们来看看如何使用CSS来制作这样一幅写轮眼图。

.eye {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: white;
   box-shadow: 0px 0px 0px 10px black;
   position: relative;
}

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

.eye::after {
   content: "";
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: white;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

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

代码解析：

首先，在CSS中我们定义了一个名为".eye"的类，用来描述整个写轮眼图的外观，包括它的大小、形状等等。

然后，在".eye"类中，我们使用了"::before"和"::after"伪元素来分别表示写轮眼的黑色部分和白色部分。我们为它们分别设置了它们的大小、形状、位置等属性。

最后，在第二个"::after"伪元素中我们创建了一个小黑点，用来表示写轮眼中的瞳孔部分。

通过这些CSS代码，我们可以创建出一个非常逼真的写轮眼图，为我们的网页增添一分趣味和魅力。