欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
纯CSS实现微信小程序模拟QQ顶尖炸弹的动画效果
来源:南京网站制作 时间:2019-07-10 07:35:54

影响

思维
 
动画与CSS的动画属性
 
 
wxml:
 
<view class="container">
  <view class='anit {{show = 1? "Show": (show = 2? "Hide":")}'> Please select commodity </view>.
  < view bindtap ='anniu'> click the pop-up prompt </view >
</view>
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程序,由南京小程序开发安优网络介绍给你实现微信applet模仿QQ顶级提示卡通效果。我希望它对你有所帮助。如果您有任何疑问,请给我留言,小编会及时回复您。非常感谢您对我们的支持。

本文地址:http://www.njanyou.cn/web/2597.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 将客户反馈转化为可操作的设计
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程有限公司
南京德普筒仓建安工程有限公司
中国非金属材料南京矿山工程有限公司
中国非金属材料南京矿山工程有限公司
你可能感兴趣
搜索引擎营销与SEO有何不同?
下一个项目之前要回答的网页设计问题
您需要设计的不仅仅是您的网站主页
SEO常见问题解答:为关键字排名需要多长时间?
如何提高电子商务中的移动转换率
你有博客发布的内容积压吗?
5大HTML标签,以改善您的SEO
网站维度对响应式设计至关重要吗?
最后更新
纯CSS实现微信小程序模拟QQ顶尖炸弹的动画效果 将客户反馈转化为可操作的设计 微信推出增强现实小程序 如何接收和回应客户反馈 如何使内容分发成为您的营销计划的一部分 影响者营销策略:您的企业需要一个吗? 如何在营销策略中使用电子邮件分段 小型机构的网站项目管理技巧
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例