沒啥用系列 之《太極圖》
阿新 • • 發佈:2020-08-03
效果:
css部分:
.taiji{ position: relative; width: 300px; height: 300px; margin: 100px auto; border-radius: 50%; border-width: 1px; border-style: solid; border-color: #000; background-color: #000; /*從0-50%用背景色。50%開始到100%用#fff*/ background-image: linear-gradient(to right,transparent 50%,#fff 50%);/*影象的線性漸變*/ animation: Spin 4s ease-in-out infinite; } @keyframes Spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } .taiji::before{ content:''; position: absolute; left: 75px; top:1px; width: 0; height: 0; padding: 25px; border-radius: 100%; border: 49px solid #000; background: #fff;// background-clip:padding-box;/*背景被裁剪到內邊距框*/ } .taiji::after{ content:''; position:absolute; top:149px; left:75px; width:0; height:0; padding:25px; border-radius:50%; border:49px solid #fff; background: #000; // background-clip:padding-box; }
html 部分:
<div class="taiji"></div>