[分享]css3实现八卦图

CSS3可以让我们实现绚丽的动画效果和漂亮的图形。在本文中，我们将介绍如何用CSS3实现八卦图。/ 先给八卦图的容器设置宽度和高度 / .gossip { width: 200px; height: ...

CSS3可以让我们实现绚丽的动画效果和漂亮的图形。在本文中，我们将介绍如何用CSS3实现八卦图。

/* 先给八卦图的容器设置宽度和高度 */
.gossip {
  width: 200px;
  height: 200px;
}

/* 下面开始画八卦图 */
/* 1. 先画一个圆 */
.gossip::before {
  content: ';
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #000;
}

/* 2. 八卦图的左半部分 */
.gossip::after {
  content: ';
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  border-width: 50px 50px 0 50px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  transform: rotate(45deg) translate(0, -50%);
}

/* 3. 八卦图的右半部分 */
.gossip::before {
  background-color: #000;
  position: relative;
}
.gossip::after {
  background-color: #fff;
  position: absolute;
}

/* 4. 最后给八卦图加上动画效果 */
.gossip {
  animation: rotate 5s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
} 

我们用CSS3的:before和:after伪元素，实现了八卦图的左右两部分，再加上一些简单的动画效果，就能让八卦图充满生机。