开发

pages/invite/index.less

@@ -56,7 +56,9 @@
             width: 250rpx;
             height: 262rpx;
         }
+        .effects{
 
+        }
         .always {
             position: absolute;
             width: 300rpx;
@@ -81,7 +83,9 @@
 
     .media {
         position: relative;
-        margin-top: 240rpx;
+        top: 0;
+        bottom: 0;
+        margin: auto;
         width: 550rpx;
         height: 550rpx;
 
@@ -147,4 +151,37 @@
             height: 60rpx;
         }
     }
-}
+}
+
+.shake {
+	animation: shakebox 3s linear infinite;
+}
+@keyframes shakebox{
+	0% {
+	    transform: translateZ(0);
+	}
+	5% {
+	    transform: translate3d(5rpx,5rpx,0);
+	}
+	15% {
+	    transform: translate3d(-5rpx,-5rpx,0);
+	}
+	25% {
+	    transform: translate3d(5rpx,5rpx,0);
+	}
+	45% {
+	    transform: translate3d(-5rpx,-5rpx,0);
+	}
+	55% {
+	    transform: translate3d(5rpx,-5rpx,0);
+	}
+	65% {
+	    transform: translate3d(-5rpx,-5rpx,0);
+	}
+	80% {
+	    transform: translate3d(5rpx,5rpx,0);
+	}
+	100% {
+	    transform: translate3d(-5rpx,-5rpx,0);
+	}
+}

pages/invite/index.wxml

@@ -10,7 +10,7 @@
             <view class="num">邀{{item.num}}人</view>
         </view>
         <image wx:for="{{treasureList}}" wx:key='id' src="{{item.id>count?item.close:item.open}}"
-            style="top:{{item.top}}rpx;left:{{item.left}}rpx" class="treasure" bindtap="openTips"
+            style="top:{{item.top}}rpx;left:{{item.left}}rpx" class="treasure {{item.id<=count?'shake':''}}" bindtap="openTips"
             data-info="{{item}}" />
         <image src="{{60>count?'/static/always.png':'/static/always-2.png'}}" class="always" />
     </view>

pages/invite/index.wxss

@@ -72,7 +72,9 @@
 }
 .mediaBox .media {
   position: relative;
-  margin-top: 240rpx;
+  top: 0;
+  bottom: 0;
+  margin: auto;
   width: 550rpx;
   height: 550rpx;
 }
@@ -131,3 +133,35 @@
   width: 60rpx;
   height: 60rpx;
 }
+.shake {
+  animation: shakebox 3s linear infinite;
+}
+@keyframes shakebox {
+  0% {
+    transform: translateZ(0);
+  }
+  5% {
+    transform: translate3d(5rpx, 5rpx, 0);
+  }
+  15% {
+    transform: translate3d(-5rpx, -5rpx, 0);
+  }
+  25% {
+    transform: translate3d(5rpx, 5rpx, 0);
+  }
+  45% {
+    transform: translate3d(-5rpx, -5rpx, 0);
+  }
+  55% {
+    transform: translate3d(5rpx, -5rpx, 0);
+  }
+  65% {
+    transform: translate3d(-5rpx, -5rpx, 0);
+  }
+  80% {
+    transform: translate3d(5rpx, 5rpx, 0);
+  }
+  100% {
+    transform: translate3d(-5rpx, -5rpx, 0);
+  }
+}