用普通的方法画出阴阳以及用伪元素做出的一些改进
1.在<body>里添加div标签,第一层的<div>用来做外面的大圆.它的两个子元素<div>标签用来画内部的两个小圆.
html部分
JS Bin 复制代码
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像素,背景白色(盖住父元素的一点黑色
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部分
JS Bin 复制代码
这样就可以少写两个<div>标签
.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,不停的旋转,线性的旋转.
预览传送门: