主要是从 CSS3
中的 linear-gradient
@keyframes
和 border-radius
等属性上下手, 兼容到 IE10
box1 和 box2
分别为左右两个渐变半圆,结合到一起就成了一整个渐变圆, box3
圆的半径稍小,遮盖在整个渐变圆上,背景为白色,产生渐变圆环的效果。
效果图如下:
HTML:
<div class='box'>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>