[分享]css做一双写轮眼

CSS是一门非常强大的样式语言，可以用来实现各种各样的效果。在这篇文章中，我们来学习如何使用CSS来制作一双写轮眼。首先，我们需要创建一个HTML文档来放置我们的写轮眼。下面是HTML代码： 我们为这...

CSS是一门非常强大的样式语言，可以用来实现各种各样的效果。在这篇文章中，我们来学习如何使用CSS来制作一双写轮眼。

首先，我们需要创建一个HTML文档来放置我们的写轮眼。下面是HTML代码：

<div class="sharingan"></div> 

我们为这个div添加了一个类名“sharingan”，用来在CSS中引用这个元素。

接下来，我们来编写CSS代码来实现写轮眼的效果。下面是CSS代码：

.sharingan {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: relative;
}

.sharingan::before {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
  border-radius: 50%;
  background-color: white;
}

.sharingan::after {
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 37.5px;
  left: 37.5px;
  border-radius: 50%;
  background-color: black;
  transition: all 0.2s ease-in-out;
}

.sharingan:hover::after {
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
} 

这段代码实现了以下效果：

• 圆形的红色背景。
• 白色的一个小圆圈在正中央。
• 黑色的轮廓圆圈在小圆圈外围。
• 在鼠标悬停在红色圆圈上时，黑色圆圈会扩大到与红色圆圈相同的大小。

在上面的代码中，我们使用了伪元素(::before和::after)来实现小圆圈和轮廓圆圈。我们还使用了CSS过渡(transition)效果，使得黑色圆圈扩大时更加平滑。

最终的效果如下图所示：

通过CSS，我们可以轻松地实现各种各样的效果，包括这个有趣的写轮眼效果。希望这篇文章能够帮助你更好地理解CSS。