1、废话不多说,先看效果
2、实现原理
运用常见的动画属性 animation、keyframes 等CSS3属性实现。
3、具体实现代码
HTML【wxml】
<view class="box" catchtap="show">弹出一个弹框</view>
<view class="codeBox" hidden="{{isShow}}" catchtap="hide">
<view id="hide">
<image src="https://s21.ax1x.com/2024/04/29/pkFAzkD.jpg" />
</view>
</view>
CSS【wxss】
page{
background: #000;
background: radial-gradient(#222, #000);
padding-bottom: 100rpx;
}
.box {
width: 199px;
text-align: center;
border: 1px solid #DCDCDC;
background: no-repeat center center;
background-color: rgba(204, 217, 220, .1);
background-size: 45px;
transition: all .3s;
cursor: pointer;
overflow: hidden;
height: 28px;
line-height: 28px;
opacity: .5;
border-radius: 14px;
color: #fff;
}
.box:hover {
border: 1px solid #008000;
background-color: rgba(177, 211, 220, 0.5);
}
@keyframes show {
0% {
transform: rotateX(90deg);
}
8% {
opacity: 1;
transform: rotateX(-60deg);
}
18% {
opacity: 1;
transform: rotateX(40deg);
}
34% {
opacity: 1;
transform: rotateX(-28deg);
}
44% {
opacity: 1;
transform: rotateX(18deg);
}
58% {
opacity: 1;
transform: rotateX(-12deg);
}
72% {
opacity: 1;
transform: rotateX(9deg);
}
88% {
opacity: 1;
transform: rotateX(-5deg);
}
96% {
opacity: 1;
transform: rotateX(2deg);
}
100% {
opacity: 1;
}
}
.codeBox {
z-index: 1;
perspective: 400px;
position: absolute;
margin: auto;
width: 200px;
height: 200px;
}
.codeBox view {
width: 200px;
height: 200px;
background: #fff no-repeat center center;
background-size: 190px;
border-radius: 6px;
box-shadow: 0 2px 7px rgb(0 0 0 / 30%);
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform-origin: center center;
overflow: hidden;
opacity: 0;
animation: show 3s ease-in-out 0s 1 normal forwards;
-webkit-animation: show 3s ease-in-out 0s 1 normal forwards;
}
image {
width: 200px;
height: 200px;
}
.hide {
animation: hide .5s ease-in-out 0s 1 normal forwards;
-webkit-animation: hide .5s ease-in-out 0s 1 normal forwards;
}
@keyframes hide {
20%,
50% {
transform: scale(1.08, 1.08);
opacity: 1;
}
100% {
opacity: 0;
transform: rotateZ(40deg) scale(0.6);
}
}
JS
Page({
data: {
isShow: true,
a: {},
},
show() {
this.setData({
isShow: false
})
},
hide() {
this.setData({
isShow: true
})
}
})
注:【这里代码片段实际应用于微信小程序,若在其他框架使用,道理是一样的,稍微改改即可使用】
4、实现简单,代码片段复制粘贴,即可预览效果体验效果。最后,贴一下自己的小程序,喜欢可以扫码查看更多...