效果預(yù)覽
?使用uniapp搭建的微信小程序，制作小程序啟動開屏動畫，主要使用css動畫屬性。主頁代碼過多這里就展示重要代碼片段。
開屏動畫代碼
<view v-if="showTransition" :style="{ background: color }" class="card"
:class="{ active: transitionCompleted }">
一起聽歌Pro
</view>
動畫執(zhí)行完成顯示的代碼
<view v-else class="pages" :style="{ background: color }">
</view>js代碼文章來源：http://www.zghlxwxcb.cn/news/detail-772242.html
data() {
return {
transitionCompleted: false,
showTransition :true,//
color:linear-gradient(to top, #fff, #F9F871),
}
},
mounted() {
setTimeout(() => {
this.transitionCompleted = true;
setTimeout(() => {
this.showTransition = false;
}, 0); // 調(diào)整顯示過渡頁面的時間
}, 2000); // 調(diào)整動畫執(zhí)行的時間
},css代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-772242.html
.card {
position: relative;
width: 100%;
height: 100vh;
background: mediumturquoise;
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;
}
/* 25% {
width: 20%;
height: 20%;
border-radius: 15px;
} */
100% {
width: 100%;
height: 100%;
border-radius: 15px;
}
}
.card:after {
content: "歡迎進入";
}到了這里，關(guān)于uniapp微信小程序設(shè)置開屏啟動動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
