maid_04的博客

走在路上的小小FE

最简单的加载动效
纯CSS实现加载动效:一个小程序的加载页面(emmm….简单可依赖)

这是小程序的一个进入页面

HTML实现代码

<view class='onloadPic'>
  <view></view>
  <view></view>
  <view></view>
</view>

css实现代码
用块状元素设置布局,画三个像加载图标的圆点,用animation实现过渡动画

.onloadPic{
  width: 84rpx;
  height: 36rpx;
  margin: 30rpx auto;
}
.onloadPic view{
  width: 10rpx;
  height: 10rpx;
  line-height: 36rpx;
  display: inline-block;
  margin: .19em;
  background: #ccc;
  border-radius: .6em;
  -webkit-animation: loading .5s infinite alternate;
          animation: loading .5s infinite alternate;
}
.onloadPic view:nth-of-type(2) {
  background: #ccc;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.onloadPic view:nth-of-type(3) {
  background: #ccc;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
@-webkit-keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
阅读更多
个人分类: 小程序 前端学习
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

最简单的加载动效

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭