CSS制作阴阳(伪元素/关键帧)-优快云博客

用普通的方法画出阴阳以及用伪元素做出的一些改进

1.在`<body>`里添加div标签,第一层的`<div>`用来做外面的大圆.它的两个子元素`<div>`标签用来画内部的两个小圆.

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'yin-yang'>       
    <div class="black"></div>
    <div class="white"></div>
  </div>
</body>
</html>
复制代码

css部分

.yin-yang{
  height:300px;
  width:300px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%,#000000 50%);
}
复制代码

第五行里用到了渐变,产生了一个上白下黑的圆形.

2.画一个小圆,用绝对定位定位它的位置.可在其父元素里添加`position:relative;`.

.black{
  position:absolute;
  top:75px;
  background: #ffffff;
  height:20px;
  width:20px;
  border:65px solid;
  border-radius:50%;
}
复制代码

小圆设置其height和width为20像素,背景白色(盖住父元素的一点黑色

),加上一边65像素的大黑 border正好是大圆的半径.则小圆的 border-top距其父元素75像素.

3.复制第二步,绝对定位将其定位于父元素的右边.border的颜色为白色,背景黑色.(设置绝对定位后变为块级元素)

.white{
  position:absolute;
  top:75px;
  right:0;
  background: #000000;
  height:20px;
  width:20px;
  border:65px solid white;
  border-radius:50%;
} 
复制代码

你中有我,我中有你的阴阳就完成啦.

接下来用伪元素来实现画出阴阳图

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class = 'triangle'>
    
  </div>
</body>
</html>
复制代码

这样就可以少写两个<div>标签
css部分

.yin-yang::after{
  content:'';
  position:absolute;
  top:75px;
  right:0;
  background: #000000;
  height:20px;
  width:20px;
  border:65px solid white;
  border-radius:50%;
} 
复制代码

另一部分做相同改写即可.需要注意的是这里必须加一句content:'';(可以加内容但是并不会显示),否则就不显示啦.

继续添加如下代码

@keyframes spin {
  from {
    transform:rotate(0deg)
  }
  to {
    transform:rotate(360deg)
  }
}
复制代码

将.yin-yang选择器的内容改为

.triangle{
  height:300px;
  width:300px;
  border-radius:50%;
  background: linear-gradient(to bottom, #ffffff 50%,#000000 50%,#000000 50%);
  position:relative;
  animation-name:spin;
  animation-duration:3s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}
复制代码

最后四句的意思依次是引用spin,设置一次动画的时间为3s,不停的旋转,线性的旋转.
预览传送门: 春夏秋冬