CSS 动画实战：使用 CSS3 实现 Apple Watch 上的呼吸灯动画效果

然后就来写样式，每个圆的尺寸是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);
}

demo地址

调整布局

到上一步，你会发现，现在圆圈是在视窗的左上角的。按照最初的设想，是要居中显示的。所以，需要在圆圈结构外面加一层结构把它包裹起来，这样就很容易实现居中的视觉效果。

添加一个**.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>