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

时间:2021-1-8 作者:admin

然后就来写样式,每个圆的尺寸是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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。