本文作者:DurkBlue

分享一个loading三个原点加载动画

分享一个loading三个原点加载动画摘要:         在实际开发中,当因为网站流量多。需要一些懒加载数据来提高用户体验性的话,做一些loa...

        在实际开发中,当因为网站流量多。需要一些懒加载数据来提高用户体验性的话,做一些loading动画特效是必须的。不但简洁大方,还能明亮心情。哈哈,特别好.

        

        以下是实际代码

        index.wxml

<view wx:if="{{true}}class="loading-contain">
                  <view class="point-list"></view>
                  <view class="point-list"></view>
                  <view class="point-list"></view>
                </view>

            index.wxss

/*加载动画*/
.loading-contain {
  height: 56rpx;
  text-align: center;
}
.loading-contain .point-list{
  margin: 0 10rpx;
  height: 30rpx;
  width: 30rpx;
  border-radius: 50%;
  display: inline-block;
  transform: scale(0);
  animation: bulge 2s infinite ease-in-out;
}
.loading-contain .point-list::after {
  position: absolute;
  display: inline-block;
  content: '';
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: inherit;
  top: 0;
  left: 0;
  z-index: -1;
  transform: scale(1);
  animation: blow 2s infinite ease-in-out;
}
.loading-contain .point-list:nth-child(1) {
  background-color: #ff8f95;
  animation-delay: 0s;
}

.loading-contain .point-list:nth-child(2) {
  background-color: #f4b568;
  animation-delay: .25s;
}

.loading-contain .point-list:nth-child(3) {
  background-color: #a2ddff;
  animation-delay: .50s;
}
@keyframes bulge {
  50% {
    transform: scale(1);
  }
}


此篇文章由DurkBlue发布,转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2020-12-11
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(1)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,2425人围观)参与讨论

还没有评论,来说两句吧...