這類的東西網上一搜就是大把的，看著比較空曠的博客，所以自己也來寫一個。 ...
這類的東西網上一搜就是大把的，看著比較空曠的博客，所以自己也來寫一個。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #yin-yang{ position: absolute; margin:auto; top:0; right:0; bottom:0; left:0; /*上面一段代碼是垂直居中定位*/ width:192px; height:96px; background-color:white ; border-color: black; border-style: solid; border-width: 2px 2px 98px 2px; border-radius: 100%; animation-name: turn; /*動畫名稱*/ animation-delay: 1s; /*動畫延遲時間*/ animation-direction: normal; /*動畫效果有反覆交遞等*/ animation-duration: 1s; /*動畫執行時間*/ animation-timing-function: linear; /*動畫執行方法此為勻速方法*/ animation-iteration-count: infinite; /*執行動畫的次數此為無限次數*/ } #yin-yang:before{ content:''; position: absolute; top:50%; left:0; width:24px; height:24px; background-color: white; border:36px solid black; border-radius: 100%; } #yin-yang:after{ content:''; position: absolute; top:50%; right: 0; width:24px; height:24px; background-color: black; border:36px solid white; border-radius: 100%; } @keyframes turn{ 0{transform: rotate(0);} 100%{transform: rotate(360deg);} } </style> </head> <body> <div id="yin-yang"></div> </body> </html>
