CSS简单实用的加载动画、骨架屏有效果图

效果图

.wxml

复制代码
<!-- 骨架屏 -->
<view wx:for="{{skeleton}}" wx:key="index" class="container center" style="--w:{{item.w}}rpx;--h:{{item.h}}rpx" />
<!-- 3D转圈 -->
<view class="arco-loading center">
  <view wx:for="{{5}}" wx:key="index" class="arco-loading-item" />
</view>
<!-- 旋转 -->
<view class="half-circle" />

.wxss

复制代码
page{ text-align: center; }
.center{ margin: 0 auto 100rpx; }
/* 骨架屏 */
.container{
  width: var(--w);
  height: var(--h);
  background: linear-gradient(90deg,#F2F3F5 25%,#E5E6EB 37%,#F2F3F5 63%);
  background-size: 400% 100%;
  animation:skeleton 1.5s cubic-bezier(0,0,1,1) infinite;
}
@keyframes skeleton {
  from{ background-position:100% 50%; }
  to{ background-position: 0 50%; }
}
/* 加载 */
.arco-loading{
  position: relative;
  width: 102rpx;
  height: 16rpx;
  transform-style: preserve-3d;
  perspective: 400rpx;
}
.arco-loading-item{
  position: absolute;
  top: 0;
  left: 50%;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #165DFF;
  transform: translate(-50%) scale(0);
  animation: arco 2s cubic-bezier(0,0,1,1) infinite forwards;
}
.arco-loading-item:nth-child(2) {
  background-color: #306FFF;
  animation-delay: .4s
}
.arco-loading-item:nth-child(3) {
  background-color: #1D4DD2;
  animation-delay: .8s
}
.arco-loading-item:nth-child(4) {
  background-color: #466ACB;
  animation-delay: 1.2s
}
.arco-loading-item:nth-child(5) {
  background-color: #5D7CCB;
  animation-delay: 1.6s
}
@keyframes arco{
  0% {
    transform: translate3D(-48%,0,-2rpx) scale(0.5)
  }
  22%{
    transform: translate3D(-280%,0,0) scale(1.25)
  }
  44%{
    transform: translate3D(-48%,0,2rpx) scale(2)
  }
  47%{
    transform: translateZ(2rpx) scale(2)
  }
  50% {
      transform: translate3D(48%,0,2rpx) scale(2)
  }
  72%{
    transform: translate3D(280%,0,0) scale(1.25)
  }
  94%{
    transform: translate3D(48%,0,-2rpx) scale(0.5)
  }
  97% {
    transform: translateZ(-2rpx) scale(0.5)
  }
}
/* 圆 */
.half-circle {
  width: 70rpx;
  height: 70rpx;
  border: 2px solid transparent;
  border-top-color:red;
  border-right-color:red;
  margin: 0 auto;
  border-radius:50%;
  animation: turn linear infinite 1.5s;
}
@keyframes turn{
  from{ transform: rotate(-360deg); }
  to{ transform: rotate(360deg); }
}

.js

复制代码
Page({
  data: {
    skeleton:[
      {w:100,h:100},
      {w:500,h:100},
      {w:300,h:60},
    ]
  },
})

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
半生过往3 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw3 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
涔溪6 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
996幸存者8 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮9 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
代码的余温10 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心10 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
3Katrina14 小时前
我仿造了一个掘金App的首页...
前端·css
The_era_achievs_hero16 小时前
UniappDay03
vue.js·微信小程序·uni-app
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制