直接上代码把,直接复制粘贴可用
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