照着别人的图画了一个太极图，小白第一次画出这种东西还是很有成就感的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 一个大的div包含一整个图像 内有两个div表示两个大半圆.d1,.d2，两个大半圆内有两个一半半径的半圆.d11,.d21, 大的div内还有两个小圆用来做圆的眼睛 */ body{background:#aaa;} #parent{width:200px;height:200px;margin:0 auto; position:absolute; top:50%;left:50%;margin-left:-100px;margin-top:-100px; border-radius: 50%; } .d1,.d2{width:100px;height:200px;position:relative; float: left; border:0px solid #000; } .d1{ border-radius:100px 0 0 100px;border-right:0px solid transparent; background:#000; } .d1>.d11{width:50px;height:100px;border-radius:100px 0 0 100px; background:#fff; position:absolute;top:100px;left:50px; } /* .d1>.d11{ width:30px;height:30px; border-radius:50%;background:#fff; position:absolute;top:35px;left:85px; } */ .d2{ border-radius:0 100px 100px 0;border-left:0px solid transparent; background:#fff; } .d2>.d21{width:50px;height:100px;border-radius:0 100px 100px 0; background:#000; } .d3,.d4{width:20px;height:20px;border-radius:50%;position:absolute;} .d3{ background:#fff; top:40px;left:90px; } .d4{ background:#000; top:140px;left:90px; } /*给这个图添加一个事件，鼠标放上去就缓慢旋转——过渡方法*/ /* #parent:hover{ transition-property: all; transition-duration:100s; transition-timing-function: linear; transform:rotate(18000deg); }*/ /*使用动画实现一直旋转，鼠标放上去就停止旋转*/ #parent{ transition-property: all; animation-name:rotate_taiji; animation-duration:5s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; } @keyframes rotate_taiji{ 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} } #parent:hover{ animation-play-state: paused; } </style> </head> <body> <div id="parent"> <div class="d1"> <div class="d11"> <div class="d111"></div> </div> </div> <div class="d2"> <div class="d21"> <div class="d211"></div> </div> </div> <div class="d3"></div> <div class="d4"></div> </div> </body> </html>