小程序 炫酷的海报进入首页

直接上代码把，直接复制粘贴可用

WXML

<!-- 海报 -->
<view  class='{{hvuiagui}}' style='height:100%; overflow:hidden; opacity:1; transition:all .8s;'>
  <image src='https://img-blog.csdnimg.cn/20181213175905216.png' class="{{animationb3}}" style='z-index:99; position:absolute; z-index:99; width:480rpx; left:50%;margin-left:-240rpx; top:50%; height:480rpx; margin-top:-340rpx; transform:rotate(0deg);'/>

  <image bindtap='coreGologin' class="{{animationb1}}" src='https://img-blog.csdnimg.cn/20181213175730606.png' style='z-index:99;position:absolute;width:250rpx;height:250rpx;top:50%;margin-top:-230rpx;left:50%;margin-left:-125rpx; transform:rotate(0deg);'/>

  <image src='https://img-blog.csdnimg.cn/20181213175830403.jpg' style='position:absolute; width:100%;height:100%;'/>


  <text class='text1'>——广州有限公司——</text>
  <text class='text2'>ABCDEFGHIJKLMNOPQRST</text>
  <text class='text3'>[中国·广东·广州]</text>
  <text class='text4' bindtap='coreGologin'>进入</text>
  <text class='text5'>2018-04-25</text>
  <text class='text6'>广州有限公司</text>

</view>

WXSS

page{
  height: 100%;
}
.Fanimationclass{
  animation: Frotateclass 2s linear alternate;
}
.animationclass{
  animation: rotateclass 2s linear alternate;
}
text{
  color: #12FBFC;
  z-index: 999;
  position: absolute;
}

.text1{
  font-size:47rpx;
  left:50%;
  margin-left:-320rpx;
  top:2%;
}
.text2{
  left:50%;
  margin-left:-225rpx;
  top:7%;
}
.text3{
  top:12%;
  left:50%;
  margin-left:-133rpx;
}
.text4{
  top:50%;
  left:50%;
  margin-left:-32rpx;
  margin-top:-130rpx;
}
.text5{
  top:50%;
  left:50%;
  margin-left:-104rpx;
  margin-top:180rpx;
}
.text6{
  top:50%;
  margin-top:260rpx;
  left:50%;
  margin-left:-180rpx;
}
.biansad{
  position:absolute;
  width:100%;
  top:50%;
  margin-top:-100rpx;
  outline:0px solid #fff;
  z-index: 9999;
  transition: all .8s;
}
.ouline{
 opacity: 0 !important;
}



@keyframes rotateclass{
  10%{ transform: rotate(0deg) }
  20%{ transform: rotate(40deg) }
  30%{ transform: rotate(80deg) }
  40%{ transform: rotate(120deg) }
  50%{transform: scale(1.0);}
  60%{transform: scale(1.2);}
  70%{transform: scale(1.4);}
  80%{transform: scale(1.6);}
  90%{transform: scale(1.8);}
  100%{ transform: scale(2);}
}
@keyframes Frotateclass{
  10%{ transform: rotate(0deg) }
  20%{ transform: rotate(-40deg) }
  30%{ transform: rotate(-80deg) }
  40%{ transform: rotate(-120deg) }
  50%{ transform: rotate(-160deg) }
  60%{ transform: rotate(-200deg) }
  70%{ transform: rotate(-240deg) }
  80%{ transform: rotate(-280deg) }
  90%{ transform: rotate(-320deg) }
  100%{transform: rotate(-365deg) }
}

JS

// pages/poster/poster.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    animationb3: "",
    animationb1: "",
    hvuiagui: ""
  },
  coreGologin() {
    var that = this;
    this.setData({
      animationb3: "animationclass",
      animationb1: "Fanimationclass"
    })
    setTimeout(function () {
      that.setData({
        hvuiagui: "ouline"
      })
    }, 2100);
    setTimeout(function () {
      wx.redirectTo({		//跳转路径
        url: '../lindex/lindex',
      })
    }, 3000)
  }
})

JSON

{
  "navigationBarBackgroundColor": "#141E31",
  "disableScroll": true
}

图片img
https://img-blog.csdnimg.cn/20181213175730606.png
https://img-blog.csdnimg.cn/20181213175830403.jpg
https://img-blog.csdnimg.cn/20181213175905216.png