小程序制作小程序启动开屏动画，让你的小程序炫酷起来！

CSS与页面

WXML代码

<view wx:if="{{showTransition}}" bind:tap="infoPage" class="card">
</view>

• 变量showTransition：控制是显示动画还是显示首页内容
• infoPage：手动关闭动画方法
• card：样式

WXSS代码

.card {
  position: relative;
  width: 100%;
  height: 100vh;
  /* 可以改变背景颜色 */
  background: linear-gradient(120deg, #e99361 0%, #63c4f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
}
.card::before, .card::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: #fff;
  transition: all 2s;
}
.card::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}
.card::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}
.card::before, .card::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  animation: expand 2s;
}
@keyframes expand {
  0% {
    width: 10%;
    height: 10%;
    border-radius: 15px;
  }
  100% {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
}
.card:after {
  content: "韩博士";
}

JS代码

data: {
 // 启动动画控制
 showTransition: true
},

onLoad(options) {
  setTimeout(() => {
    this.infoPage();
  }, 3000); // 调整动画执行的时间
},
 
/**
 * 跳过引导
 */
infoPage() {
  this.setData({
    showTransition: false
  })
},

😁 作者：Teddy (公众号：码尚云软件)
ok！到这里就大功告成，小编（Teddy）在这里先感谢大家的到来。
虽然不是太详细，小编已经很努力，给小编来个一键三连(点赞，关注，收藏)，小编会越来越努力。。。