Live
x
<!-- 关键点在于使用 border-radiuss 生成一个不太圆的圆，然后对纯色块进行切割--><!-- 详情参见：https://github.com/chokcoco/iCSS/issues/22--><div class="container"> <div class="wave"></div> <p>45%</p></div>
Live
xxxxxxxxxx60
.container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118, 218, 255); top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;}.wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%; &::before, &::after{ content: ""; position: absolute; width: 400px; height: 400px; top: 0; left: 50%; background-color: rgba(255, 255, 255, .4); border-radius: 45%; transform: translate(-50%, -70%) rotate(0); animation: rotate 6s linear infinite; z-index: 1; } &::after { border-radius: 47%; background-color: rgba(255, 255, 255, .9); transform: translate(-50%, -70%) rotate(0); animation: rotate 10s linear -5s infinite; z-index: 2; }}p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; color: #000; z-index: 10;}@keyframes rotate { 50% { transform: translate(-50%, -73%) rotate(180deg); } 100% { transform: translate(-50%, -70%) rotate(360deg); }}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.