超级带感进入动画 uniapp 小程序

超级带感进入动画 uniapp 小程序

提示：大家可以进入微信群聊聊技术哦：

---

---

前言

话不多说了好吧，都2024了

---

一、代码准备启动？

示例

 <template>
	<view v-if="showTransition" :style="{ background: color }" class="carda"
				:class="{ active: transitionCompleted }">
				一起感受时代的更新
				
	</view>
	<!-- 动画执行完成显示的代码 -->
	<view v-else class="pages" :style="{ background: color }">	
        </view>
	
</template>

export default {
		data() {
			return {
				transitionCompleted: false,
				showTransition :true,
                                color:'linear-gradient(to top, #fff, #F9F871)',
                        }
                }
}

下面是css 

.carda {
			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;
		}
	 
		.carda::before,
		.carda::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;
		}
	 
		.carda::before {
			top: 0;
			right: 0;
			border-radius: 0 15px 0 100%;
		}
	 
		.carda::after {
			bottom: 0;
			left: 0;
			border-radius: 0 100% 0 15px;
		}
	 
		.carda::before,
		.carda::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;
			}
		}
	 
		.carda:after {
			content: "杰哥哥AI库";
		} 

动画怎么样呢 可以访问我的小程序 杰哥哥AI库 就知道了

总结

这动画可是高级感嘎嘎的 去看看就知道了