这篇文章将为大家详细讲解有关纯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顶部提示弹框动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文题目：纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果-创新互联
当前地址：
http://bjjierui.cn/article/cogpgh.html
