【CSS3】太极图----三层div实现

2019-11-02 18:21:17

字体：大中小

来源：转载

供稿：网友

这里写图片描述

方法一：三层div实现

思路：（1）通过渐变把外层圆形div的content分成上下黑白两个区域；（2）用中间层两个圆形div的content颜色来改变本区域的颜色；（3）用内层两个圆形div的content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>太极</title> <style class="cp-pen-styles"> *{ padding:0; margin:0; } .outer{ background: linear-gradient(to bottom,white 50%,black 50%); margin:100px auto; width:400px; height:400px; border-radius: 50%; position:relative; border:1px solid black; transition: all 5s ease; } .outer:hover{ transform: rotate(360deg) scale(2); } .outer .left{ background: white; width:200px; height:200px; border-radius: 50%; position:absolute; left: 0; top:100px; } .outer .left .leftInner{ background: black; width:80px; height:80px; border-radius: 50%; position:absolute; left: 60px; top:60px; } .outer .right{ background: black; width:200px; height:200px; border-radius: 50%; position:absolute; right: 0; top:100px; } .outer .right .rightInner{ background: white; width:80px; height:80px; border-radius: 50%; position:absolute; left:60px; top:60px; } </style></head><body><div class="outer"> <div class="left"> <div class="leftInner"></div> </div> <div class="right"> <div class="rightInner"></div> </div></div></body></html>

方法二：伪类实现

思路：（1）通过渐变把外层圆形div分成上下黑白两个区域；（2）添加伪类，用伪类的圆形边框颜色来改变本区域的颜色；（3）通过伪类的圆形content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>太极</title> <style> *{ margin:0; padding:0; } div, :before, :after { box-sizing: border-box; } #taiji { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; background: linear-gradient(0deg, black 50%, white 50%); border-radius: 50%; border:1px black solid; } @keyframes taiji { from{ transform: rotate(0deg) scale(1); } to{ transform: rotate(360deg) scale(2); } } #taiji:hover { animation: taiji 1s ease 0s infinite; } #taiji:before, #taiji:after { content: ""; display: block; position: absolute; width: 50%; height: 50%; top: 25%; border-radius: 50%; border: 35px solid transparent; } #taiji:before { left: 0; border-color: black; background-color: white; } #taiji:after { right: 0; border-color: white; background-color: black; } </style></head><body> <div id="taiji"></div></body></html>

上一篇：AMD 和 CMD 的区别有哪些？