欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 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
上一篇: 将客户反馈转化为可操作的设计
下一篇: 如何为您的企业打造有意义的品牌标识
最新案例
永银
永银
珠海跨境电商
珠海跨境电商
五颗星商城
五颗星商城
上海万客生鲜超市
上海万客生鲜超市
一九在线商城
一九在线商城
你可能感兴趣
4个设计技巧,以提高你的点击率和谷歌结果中的排名
使用 CapCut 的透明背景制作工具提升您的社交媒体游戏
解锁成功:业务提升的变革性实践
营销机构的基本网站策略
确保网站可访问性的 7 个重要步骤
最后更新
确保网站可访问性的 7 个重要步骤 营销机构的基本网站策略 解锁成功:业务提升的变革性实践 使用 CapCut 的透明背景制作工具提升您的社交媒体游戏 4个设计技巧,以提高你的点击率和谷歌结果中的排名 了解网页设计中的原则和道德 - 综合指南 如何为您的网站选择完美的配色方案:专家提示和技巧 选择正确的网页设计:定制与定制——是什么让它们与众不同?
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例