kxmh
/
kxmh_wx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zh-9-15

Browse Source 
订单券码抖动效果
develop
mice2333 4 years ago
parent dfec1f270e
commit 5afc83274a
3 changed files with 348 additions and 2 deletions
Show Stats Download Patch File Download Diff File

4
pages/user/order_detail/order_detail.wxml
Unescape View File

@ -83,7 +83,9 @@
</view>
</view>
<view class="bottom_selector" wx:elif="{{order_info.order_status==1||order_info.order_status==6||order_info.order_status==12}}">
<view class="statement_inf">换票券码：{{order_info.electronic_code}}（凭此码在取票机兑换票据）</view>
<view class="statement_inf">
<view class='shaky'>换票券码：{{order_info.electronic_code}}（凭此码在取票机兑换票据）</view>
</view>
<view class="_b">
<button bindtap="showPopup" class="selector_dsn">查看电子票码</button>
</view>

3
pages/user/order_detail/order_detail.wxss
Unescape View File

@ -1,3 +1,5 @@
@import '/utils/shaky.wxss';
._container {
background-color: #FF446B;
padding: 0 30rpx 20rpx 30rpx;
@ -191,4 +193,3 @@ text-align: center;
color: #181818 !important;
}

343
utils/shaky.wxss
Unescape View File

@ -0,0 +1,343 @@
/* -webkit-animation-name: shaky-slow; // webkit内核
-ms-animation-name: shaky-slow; // ie内核
animation-name: shaky-slow; // 原生
animation-duration: 4s; // 动画执行时间
animation-delay: 0s; // 动画等待时间
animation-iteration-count: infinite; // 动画执行次数，infinite为一直执行
animation-timing-function: ease-in-out; // 动画执行速度
animation-delay: 0s; // 动画延时时间
animation-play-state: running; // 动画执行状态，一般没必要parse */
.shaky {
display: inline-block;
padding: 1px;
font-size: 14px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: shaky-slow;
-ms-animation-name: shaky-slow;
animation-name: shaky-slow;
-webkit-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes shaky-slow {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
2% {
-webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
}
4% {
-webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
}
6% {
-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
}
8% {
-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
}
10% {
-webkit-transform: translate(1.4px, 0px) rotate(-2deg);
}
12% {
-webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
}
14% {
-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
}
16% {
-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
18% {
-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
}
20% {
-webkit-transform: translate(1px, 1px) rotate(-0.5deg);
}
22% {
-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
}
24% {
-webkit-transform: translate(-1.4px, -1px) rotate(2deg);
}
26% {
-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
}
28% {
-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
}
30% {
-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
}
32% {
-webkit-transform: translate(-1px, 0px) rotate(2deg);
}
34% {
-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
}
36% {
-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
}
38% {
-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
}
40% {
-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
}
42% {
-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
}
44% {
-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
}
46% {
-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
}
48% {
-webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
}
50% {
-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
}
52% {
-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
}
54% {
-webkit-transform: translate(1.6px, -1px) rotate(-2deg);
}
56% {
-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
}
58% {
-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
}
60% {
-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
}
62% {
-webkit-transform: translate(0px, 0px) rotate(-1.5deg);
}
64% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
66% {
-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
}
68% {
-webkit-transform: translate(0px, -1.6px) rotate(-2deg);
}
70% {
-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
}
72% {
-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
}
74% {
-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
}
76% {
-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
}
78% {
-webkit-transform: translate(-1px, 1.4px) rotate(2deg);
}
80% {
-webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
}
82% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
}
84% {
-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
}
86% {
-webkit-transform: translate(1px, 1.4px) rotate(-2deg);
}
88% {
-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
}
90% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
92% {
-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
}
94% {
-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
96% {
-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
}
98% {
-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
}
}
@keyframes shaky-slow {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-1px, 1.5px) rotate(1.5deg);
}
4% {
transform: translate(1.3px, 0px) rotate(-0.5deg);
}
6% {
transform: translate(1.4px, 1.4px) rotate(-2deg);
}
8% {
transform: translate(-1.3px, -1px) rotate(-1.5deg);
}
10% {
transform: translate(1.4px, 0px) rotate(-2deg);
}
12% {
transform: translate(-1.3px, -1px) rotate(-2deg);
}
14% {
transform: translate(1.5px, 1.3px) rotate(1.5deg);
}
16% {
transform: translate(1.5px, -1.5px) rotate(-1.5deg);
}
18% {
transform: translate(1.3px, -1.3px) rotate(-2deg);
}
20% {
transform: translate(1px, 1px) rotate(-0.5deg);
}
22% {
transform: translate(1.3px, 1.5px) rotate(-2deg);
}
24% {
transform: translate(-1.4px, -1px) rotate(2deg);
}
26% {
transform: translate(1.3px, -1.3px) rotate(0.5deg);
}
28% {
transform: translate(1.6px, -1.6px) rotate(-1.5deg);
}
30% {
transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
}
32% {
transform: translate(-1px, 0px) rotate(2deg);
}
34% {
transform: translate(1.3px, 1.3px) rotate(-0.5deg);
}
36% {
transform: translate(1.3px, 1.6px) rotate(1.5deg);
}
38% {
transform: translate(1.3px, -1.6px) rotate(1.5deg);
}
40% {
transform: translate(-1.4px, -1px) rotate(-0.5deg);
}
42% {
transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
}
44% {
transform: translate(-1.6px, 1.4px) rotate(0.5deg);
}
46% {
transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
}
48% {
transform: translate(1px, 1.6px) rotate(1.5deg);
}
50% {
transform: translate(1.6px, 1.6px) rotate(1.5deg);
}
52% {
transform: translate(-1.4px, 1.6px) rotate(0.5deg);
}
54% {
transform: translate(1.6px, -1px) rotate(-2deg);
}
56% {
transform: translate(1.3px, -1.6px) rotate(-2deg);
}
58% {
transform: translate(-1.3px, -1.6px) rotate(0.5deg);
}
60% {
transform: translate(1.3px, 1.6px) rotate(-0.5deg);
}
62% {
transform: translate(0px, 0px) rotate(-1.5deg);
}
64% {
transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
66% {
transform: translate(1.6px, -1.6px) rotate(0.5deg);
}
68% {
transform: translate(0px, -1.6px) rotate(-2deg);
}
70% {
transform: translate(-1.6px, 1px) rotate(1.5deg);
}
72% {
transform: translate(-1.6px, 1.6px) rotate(2deg);
}
74% {
transform: translate(1.3px, -1.6px) rotate(-0.5deg);
}
76% {
transform: translate(1.4px, 1px) rotate(-0.5deg);
}
78% {
transform: translate(-1px, 1.4px) rotate(2deg);
}
80% {
transform: translate(1.4px, 1.6px) rotate(2deg);
}
82% {
transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
}
84% {
transform: translate(-1.4px, 1.4px) rotate(-2deg);
}
86% {
transform: translate(1px, 1.4px) rotate(-2deg);
}
88% {
transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
}
90% {
transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
92% {
transform: translate(-1.4px, 1.6px) rotate(2deg);
}
94% {
transform: translate(-1.6px, -1.6px) rotate(-2deg);
}
96% {
transform: translate(-1.4px, 1.3px) rotate(-2deg);
}
98% {
transform: translate(1.3px, 1px) rotate(-0.5deg);
}
}
Write Preview
Loading…
Cancel
Save