方法一：三层div实现。思路：（1）通过渐变把外层圆形div的content分成上下黑白两个区域；（2）用中间层两个圆形div的content颜色来改变本区域的颜色；（3）用内层两个圆形div的content颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！**css 代码**```css:run<!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:200px; height:200px; border-radius: 50%; position:relative; border:1px solid black; transition: all 5s ease; } .outer:hover{ transform: rotate(360deg) scale(1.5); } .outer .left{ background: white; width:100px; height:100px; border-radius: 50%; position:absolute; left: 0; top:50px; } .outer .left .leftInner{ background: black; width:40px; height:40px; border-radius: 50%; position:absolute; left: 30px; top:30px; } .outer .right{ background: black; width:100px; height:100px; border-radius: 50%; position:absolute; right: 0; top:50px; } .outer .right .rightInner{ background: white; width:40px; height:40px; border-radius: 50%; position:absolute; left:30px; top:30px; } </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颜色来恢复本区域的颜色。鼠标置于太极图上，太极图还会旋转！**html 代码**```html:run<!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>```
