首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >修改这些简单的加载点

修改这些简单的加载点
EN

Stack Overflow用户
提问于 2019-06-10 00:01:13
回答 1查看 131关注 0票数 4

下面是使用TweenMax库创建一个简单的加载点动画的代码。

TweenMax.staggerTo(".dots", 2, {
  x: 220,
  backgroundColor: 'white',
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.4, false)
}, 0.4);
TweenMax.staggerFrom(".dots", 2, {
  opacity: 0,
  scale: 0.7,
  repeat: -1,
  ease: SlowMo.ease.config(0.5, 0.4, true)
}, 0.4);
html {
  width: 260px;
  height: 32px;
  overflow: hidden;
}

body {
  background-color: transparent;
  text-align: center;
  padding: 50px;
}

.container {
  background-color: transparent;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dots {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #d0c9d8;
  opacity: 1;
  left: -120px;
}

.link {
  position: absolute;
  bottom: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  text-decoration: none;
}
<div class="container">
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
  <div class="dots"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

<script src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

如你所见,有5个点是动画的。但是我想把点的数量减少到3。

删除2个div会在即将到来的动画点和正在淡出的点之间创建一个很长的空间……

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56516165

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档