纯CSS怎么实现微信小程序仿QQ顶部提示弹框动画效果-创新互联

这篇文章将为大家详细讲解有关纯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顶部提示弹框动画效果-创新互联
URL链接：http://shouzuofang.com/article/cogpgh.html