1 #zs#扭蛋机#fzs#
2 .egg{3 width: 100%;4 position: absolute;5 z-index: 3;6 top: 260rpx;7 }8 .egg .egg_ji{9 width: 70%;10 margin-left: 15%;11 z-index: 3;12 }13 .egg .play{14 width: 80rpx;15 position: absolute;16 z-index: 4;17 top: 405rpx;18 left: 275rpx;19 }20 .egg .ball{21 width: 75rpx;22 position: absolute;23 z-index: 2;24 }25 .egg .ball_1{26 top: 290rpx;27 left: 300rpx;28 }29 .egg .ball_2{30 top: 295rpx;31 left: 360rpx;32 }33 .egg .ball_3{34 top: 260rpx;35 left: 240rpx;36 }37 .egg .ball_4{38 top: 260rpx;39 left: 420rpx;40 }41 .egg .ball_5{42 top: 230rpx;43 left: 280rpx;44 }45 .egg .ball_6{46 top: 230rpx;47 left: 340rpx;48 }49 .egg .ball_7{50 top: 220rpx;51 left: 390rpx;52 }53 .egg .ball_end{54 top: 410rpx;55 left: 390rpx;56 }57
58 .weiyi_1 {59 animation: around1 1.5s linear infinite;60 }61 .weiyi_2 {62 animation: around2 1.5s linear infinite;63 }64 .weiyi_3 {65 animation: around3 1.5s linear infinite;66 }67 .weiyi_4 {68 animation: around4 1.5s linear infinite;69 }70 .weiyi_5 {71 animation: around5 1.5s linear infinite;72 }73 .weiyi_6 {74 animation: around6 1.5s linear infinite;75 }76 .weiyi_7 {77 animation: around7 1.5s linear infinite;78 }79 .go{80 animation: around 0.3s linear 1;81 }82
83
84 #zs#位移#fzs#
85 @keyframes around{86 100%{87 -webkit-transform: rotate(-180deg)88 }89 }90
91 @keyframes around1 {92 0%{93 -webkit-transform: translate(0rpx, 0rpx)94 }95 20%{96 -webkit-transform: translate(-100rpx, -200rpx)97 }98 40%{99 -webkit-transform: translate(40rpx, -280rpx)100 }101 60%{102 -webkit-transform: translate(150rpx, -200rpx)103 }104 80%{105 -webkit-transform: translate(150rpx, -50rpx)106 }107 100%{108 -webkit-transform: translate(0, 0)109 }110 }111
112 @keyframes around2 {113 0%{114 -webkit-transform: translate(0rpx, 0rpx)115 }116 20%{117 -webkit-transform: translate(100rpx, -200rpx)118 }119 40%{120 -webkit-transform: translate(-20rpx, -280rpx)121 }122 60%{123 -webkit-transform: translate(-150rpx, -200rpx)124 }125 80%{126 -webkit-transform: translate(-150rpx, -50rpx)127 }128 100%{129 -webkit-transform: translate(0, 0)130 }131 }132
133 @keyframes around3 {134 0%{135 -webkit-transform: translate(0rpx, 0rpx)136 }137 20%{138 -webkit-transform: translate(180rpx, 10rpx)139 }140 40%{141 -webkit-transform: translate(240rpx, -110rpx)142 }143 60%{144 -webkit-transform: translate(100rpx, -240rpx)145 }146 80%{147 -webkit-transform: translate(-50rpx, -130rpx)148 }149 100%{150 -webkit-transform: translate(0, 0)151 }152 }153
154 @keyframes around4 {155 0%{156 -webkit-transform: translate(0rpx, 0rpx)157 }158 20%{159 -webkit-transform: translate(-180rpx, 10rpx)160 }161 40%{162 -webkit-transform: translate(-240rpx, -110rpx)163 }164 60%{165 -webkit-transform: translate(-100rpx, -240rpx)166 }167 80%{168 -webkit-transform: translate(50rpx, -130rpx)169 }170 100%{171 -webkit-transform: translate(0, 0)172 }173 }174
175 @keyframes around5 {176 0%{177 -webkit-transform: translate(0rpx, 0rpx)178 }179 20%{180 -webkit-transform: translate(40rpx, 70rpx)181 }182 40%{183 -webkit-transform: translate(50rpx, -210rpx)184 }185 60%{186 -webkit-transform: translate(-80rpx, -100rpx)187 }188 80%{189 -webkit-transform: translate(190rpx, -50rpx)190 }191 100%{192 -webkit-transform: translate(0, 0)193 }194 }195
196 @keyframes around6 {197 0%{198 -webkit-transform: translate(0rpx, 0rpx)199 }200 20%{201 -webkit-transform: translate(-150rpx, -50rpx)202 }203 40%{204 -webkit-transform: translate(130rpx, -140rpx)205 }206 60%{207 -webkit-transform: translate(-110rpx, -180rpx)208 }209 80%{210 -webkit-transform: translate(-130rpx, -20rpx)211 }212 100%{213 -webkit-transform: translate(0, 0)214 }215 }216
217 @keyframes around7 {218 0%{219 -webkit-transform: translate(0rpx, 0rpx)220 }221 20%{222 -webkit-transform: translate(80rpx, -50rpx)223 }224 40%{225 -webkit-transform: translate(-180rpx, -100rpx)226 }227 60%{228 -webkit-transform: translate(50rpx, -150rpx)229 }230 80%{231 -webkit-transform: translate(-180rpx, -20rpx)232 }233 100%{234 -webkit-transform: translate(0, 0)235 }236 }
