CSS强大的功能--太极图的实现

/* 创建一个类来表示太极图的基本结构 */
.yin-yang {
  width: 100px; /* 太极图的宽度 */
  height: 100px; /* 太极图的高度 */
  background-color: #ffffff; /* 太极图的背景颜色 */
  border-radius: 50%; /* 让太极图显示为圆形 */
  position: relative; /* 相对定位，以便我们可以在其上放置阴阳 */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 内阴影增加立体感 */
}
 
/* 创建阴的样式 */
.yin-yang .yin {
  width: 50%; /* 阴的宽度为太极图宽度的一半 */
  height: 100%; /* 阴的高度为太极图的高度 */
  background-color: #000000; /* 阴的颜色为黑色 */
  border-radius: 50%; /* 圆形 */
  position: absolute; /* 绝对定位，以便我们可以控制其位置 */
  top: 0; /* 从顶部开始 */
  left: 0; /* 从左边开始 */
  transition: all 0.5s ease-in-out; /* 动画效果 */
}
 
/* 创建阳的样式 */
.yin-yang .yang {
  width: 50%; /* 阳的宽度为太极图宽度的一半 */
  height: 100%; /* 阳的高度为太极图的高度 */
  background-color: #ffffff; /* 阳的颜色为白色 */
  border-radius: 50%; /* 圆形 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 从顶部开始 */
  right: 0; /* 从右边开始 */
  transition: all 0.5s ease-in-out; /* 动画效果 */
}
 
/* 当鼠标悬停在太极图上时，阴阳发生变化 */
.yin-yang:hover .yin {
  left: 50%; /* 阴移动到中间 */
}
 
.yin-yang:hover .yang {
  width: 0%; /* 阳的宽度变为0，即消失 */
}

这段代码定义了一个简单的太极图结构，并且使用CSS伪类:hover实现了当鼠标悬停在太极图上时阴阳发生变化的交互效果。通过设置transition属性，我们为阴阳的变化增加了平滑的动画效果。这个示例展示了如何使用CSS创建交互式图形，并且是学习CSS动画和定位的一个很好的起点。