微信小程序动画

最新推荐文章于 2021-12-16 15:56:54 发布

milli236

最新推荐文章于 2021-12-16 15:56:54 发布

阅读量306

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/milli236/article/details/88795769

版权

微信小程序专栏收录该内容

21 篇文章 0 订阅

订阅专栏

提升用户体验，擅用微信小程序动画

1.css方式使用

.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
  /* align-items: stretch; */
  justify-content: center;
  /* padding-bottom: 450rpx; */
  
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
  /* background: linear-gradient(0deg,#fff 70%,rgba(255,255,255,0)); */
  transform: translate3d(0,100%,0);
  animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards;
  opacity: 0;
}
@keyframes rise{
  0% {opacity: 0;transform: translate3d(0,100%,0);}
  50% {opacity: 1;}
  100% {opacity: 1;transform: translate3d(0,450rpx,0);}
}

.title{
  position: absolute;
  top: 30rpx;
  left: 50%;
  width: 600rpx;
  height: 200rpx;
  margin-left: -300rpx;
  opacity: 0;
  animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards;
}
@keyframes show{
  0% {opacity: 0;}
  100% {opacity: .95;}
}

参考