html仿微信右上角弹框,纯CSS实现微信小程序仿QQ顶部提示弹框动画效果

效果

思路

用css的animation属性做动画

代码

wxml：

请选择商品

点击弹出提示

wxss：

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

padding: 200rpx 0;

box-sizing: border-box;

}

.anit{

width: 100%;

height: 70rpx;

background: red;

position: absolute;

color: white;

font-size: 30rpx;

line-height: 70rpx;

top: -70rpx;

text-align: center;

}

.show{

top: 0rpx;

animation: show 0.2s;

animation-timing-function:ease;

}

@keyframes show

{

from {top:-70rpx;}

to {top:0rpx;}

}

.hide{

top: -70rpx;

animation: hide 0.2s;

animation-timing-function:ease;

}

@keyframes hide

{

from {top:0rpx;}

to {top:-70rpx;}

}

js：

Page({

data: {

show: 0

},

onLoad: function () {

},

anniu:function(e){

let that = this;

this.setData({

show:1

})

setTimeout(function () {

that.setData({

show: 2

})

}, 2000)

}

})

总结

以上所述是小编给大家介绍的纯CSS实现微信小程序仿QQ顶部提示弹框动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！