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

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

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

文章目录

超级带感进入动画 uniapp 小程序前言一、代码准备启动？动画怎么样呢 可以访问我的小程序 **杰哥哥AI库** 就知道了

总结

前言

话不多说了好吧，都2024了

一、代码准备启动？

示例

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库 就知道了

总结

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

精彩文章

 您阅读本篇文章共花了：