然后就来写样式,每个圆的尺寸是125px。因为动画中的每个圆都是彼此叠加的,所以这里需要使用绝对定位来实现UI布局。
.circle { border-radius: 50%; height: 125px; position: absolute; transform: translate(0, 0); width: 125px; }
需要注意的是,我们这里使用transform方法中的translate属性来实现动画,比起使用top,right来性能更加高效,动画也更加顺滑。
首先是设置圆圈的背景颜色,先把它设置为白色的背景,然后调整下它的透明度:
body { background: #000; } .circle { background: #fff; height: 125px; width: 125px; border-radius: 50%; position: absolute; opacity: 0.75; transform: translate(0, 0); }
调整布局
到上一步,你会发现,现在圆圈是在视窗的左上角的。按照最初的设想,是要居中显示的。所以,需要在圆圈结构外面加一层结构把它包裹起来,这样就很容易实现居中的视觉效果。
添加一个**.watch-face**类,宽高和圆圈一样。
<div class="watch-face"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div>