小程序选项动画

   

//index.wxml
<!--index.wxml-->
<view class="page">
  <view class='cont'>
    <view class="list" wx:for="{{list}}" wx:key="key">
      <view class="block-view" id="time" bindtap="getOpenGame" data-url='{{item.url}}' wx:if="{{item.id==1}}" style='background:#EC6366;'>
        <text>{{item.name}}</text>
      </view>
      <view class="block-view" id="time" bindtap="getOpenGame" data-url='{{item.url}}' wx:if="{{item.id==2}}" style='background:#91D3B3;'>
        <text>{{item.name}}</text>
      </view>
      <view class="block-view" wx:if="{{item.id==3}}" style='background:#77BFD7;'>
        <image class="head-icon" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      </view>
    </view>
  </view>
</view>

//index.js
var app = getApp()
Page({
  data: {
    userInfo: {},
    heighestScore: 0,
    longestTime: 0,
    list: [{
      id: 1,
      name: "无尽模式",
      url: ""
    }, {
      id: 2,
      name: "极速模式",
      url: "/pages/play/play"
    }, {
      id: 3,
      num: "0"
    }]
  },
  getOpenGame: function(event) {
    console.log(event.currentTarget.dataset.url);
    var url = event.currentTarget.dataset.url;
    if (url!="") {
      wx.redirectTo({
        url: url
      })
    }

  },
  onLoad: function() {
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo) {
      console.error("userInfo", userInfo);
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
  }
})

//index.wxss
/**index.wxss**/

/* 页面背景图 */

page {
  width: 100%;
  height: 100%;
  background: url("https://6465-dev-be16e9-1255326756.tcb.qcloud.la/redux-bg/alter-bg/timg.jpg")no-repeat;
  background-size: 100% 100%;
}

/* 视图居中 */

.cont {
  position: relative;
  width: 100%;
  text-align: center;
  height: 500rpx;
  top: 267rpx;
}

/* 列表样式 */

.list {
  height: 180rpx;
  position: relative;
  text-align: center;
  width: 100%;
  margin-bottom: 40rpx;
}

/* 模块动画 */

.block-view {
  background: #000;
  opacity: 0.6;
  width: 70%;
  display: inline-block;
  height: 180rpx;
  text-align: center;
  line-height: 180rpx;
  animation: block-view 1s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.block-view text {
  color: #fff;
}

@keyframes block-view {
  0% {
    opacity: 0.8;
    transform: translate3d(-30rpx, 0, 0);
  }

  60% {
    /* opacity: 0.6; */
    transform: translate3d(25rpx, 0, 0);
  }

  75% {
    /* opacity: 0.8; */
    transform: translate3d(-10rpx, 0, 0);
  }

  90% {
    transform: translate3d(5rpx, 0, 0);
  }

  100% {
    transform: none;
  }
}

.head-icon {
  width: 128rpx;
  height: 128rpx;
  margin: 28rpx;
  border-radius: 50%;
}

//index.json
{
  "navigationBarTitleText": "小玩意儿",
  "usingComponents": {}
}