└── gyrocompass ├── images └── compass │ ├── c-a-0.png │ ├── c-a-1.png │ ├── c-a-2.png │ ├── c-a-3.png │ ├── c-a-4.png │ ├── c-a-5.png │ ├── c-a-6.png │ ├── c-a-7.png │ ├── c-a-9.png │ ├── c-a-c.png │ ├── c-a-10.png │ ├── c-a-11.png │ ├── c-a-12.png │ ├── c-a-13.png │ ├── c-a-14.png │ ├── c-a-15.png │ ├── c-a-16.png │ ├── c-a-17.png │ ├── c-a-18.png │ └── c-a-19.png ├── index.html └── css └── style.css /gyrocompass/images/compass/c-a-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-0.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-1.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-2.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-3.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-4.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-5.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-6.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-7.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-9.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-c.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-10.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-11.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-12.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-13.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-14.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-15.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-16.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-17.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-18.png -------------------------------------------------------------------------------- /gyrocompass/images/compass/c-a-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huangyiwenzuishuai/gyrocompass/HEAD/gyrocompass/images/compass/c-a-19.png -------------------------------------------------------------------------------- /gyrocompass/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 纯CSS炫酷的风水罗盘动画特效 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /gyrocompass/css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /* CSS Document */ 3 | *{margin:0;padding:0;list-style:none;} 4 | body{min-width:1190px;background-color:#000002;} 5 | a{text-decoration: none;} 6 | img{border:none;} 7 | .w{width:700px;} 8 | .h{height:700px;} 9 | .compass-main{ 10 | width:100%; 11 | height:800px; 12 | background-color:#000002; 13 | } 14 | .compassdiv{ 15 | width:1190px; 16 | height:800px; 17 | margin:0 auto; 18 | background-image: url(../images/compass/c-a-bj.jpg); 19 | position:relative; 20 | } 21 | .compassdiv .compass-c{ 22 | width:1190px; 23 | height:800px; 24 | background-image: url(../images/compass/c-a-c.png); 25 | position:absolute;top:0px;left:0px; 26 | z-index:100; 27 | } 28 | @-moz-keyframes rotate{ 29 | 100%{ 30 | -moz-transform:rotate(0deg); 31 | } 32 | 100%{ 33 | -moz-transform:rotate(360deg); 34 | } 35 | } 36 | @-webkit-keyframes rotate{ 37 | 100%{ 38 | -webkit-transform:rotate(0deg); 39 | } 40 | 100%{ 41 | -webkit-transform:rotate(360deg); 42 | } 43 | } 44 | @keyframes rotate{ 45 | 100%{ 46 | transform:rotate(0deg); 47 | } 48 | 100%{ 49 | transform:rotate(360deg); 50 | } 51 | } 52 | .compassdiv .compass{ 53 | background-image: url(../images/compass/c-a-0.png); 54 | position:absolute;top:40px;left:160px; 55 | z-index:1; 56 | } 57 | .compassdiv .compass .compass-1{ 58 | position:absolute; 59 | top:0px;left:0px; 60 | z-index:2; 61 | filter:alpha(opacity=100); 62 | -moz-opacity:1; 63 | opacity:1; 64 | background: no-repeat url("../images/compass/c-a-1.png") left top; 65 | -webkit-background-size: 700px 350px; 66 | -moz-background-size: 700px 350px; 67 | background-size: 700px 700px; 68 | -webkit-border-radius: 350px; 69 | border-radius: 350px; 70 | -moz-transition:all .1s; 71 | -webkit-transition:all .1s; 72 | transition:all .1s; 73 | -moz-animation:rotate 1s infinite linear; 74 | -webkit-animation:rotate 1s infinite linear; 75 | animation:rotate 1s infinite linear; 76 | } 77 | .compassdiv .compass .compass-2{ 78 | position:absolute; 79 | top:0px;left:0px; 80 | z-index:3; 81 | filter:alpha(opacity=100); 82 | -moz-opacity:1; 83 | opacity:1; 84 | background: no-repeat url("../images/compass/c-a-2.png") left top; 85 | -webkit-background-size: 700px 350px; 86 | -moz-background-size: 700px 350px; 87 | background-size: 700px 700px; 88 | -webkit-border-radius: 350px; 89 | border-radius: 350px; 90 | -moz-transition:all .5s; 91 | -webkit-transition:all .5s; 92 | transition:all .5s; 93 | -moz-animation:rotate 5s infinite linear; 94 | -webkit-animation:rotate 5s infinite linear; 95 | animation:rotate 5s infinite linear; 96 | -webkit-transform: rotateZ(720deg); 97 | -moz-transform: rotateZ(720deg); 98 | -o-transform: rotateZ(720deg); 99 | -ms-transform: rotateZ(720deg); 100 | transform: rotateZ(720deg); 101 | } 102 | .compassdiv .compass .compass-3{ 103 | background-image: url(../images/compass/c-a-3.png); 104 | position:absolute; 105 | z-index:4; 106 | filter:alpha(opacity=90); 107 | -moz-opacity:0.9; 108 | opacity:0.9; 109 | -webkit-background-size: 700px 350px; 110 | -moz-background-size: 700px 350px; 111 | background-size: 700px 700px; 112 | -webkit-border-radius: 350px; 113 | border-radius: 350px; 114 | -moz-transition:all .25s; 115 | -webkit-transition:all .25s; 116 | transition:all .25s; 117 | -moz-animation:rotate 25s infinite linear; 118 | -webkit-animation:rotate 25s infinite linear; 119 | animation:rotate 25s infinite linear; 120 | } 121 | .compassdiv .compass .compass-4{ 122 | background-image: url(../images/compass/c-a-4.png); 123 | position:absolute; 124 | z-index:5; 125 | } 126 | .compassdiv .compass .compass-5{ 127 | background-image: url(../images/compass/c-a-5.png); 128 | position:absolute; 129 | z-index:5; 130 | filter:alpha(opacity=100); 131 | -moz-opacity:1; 132 | opacity:1; 133 | -webkit-background-size: 700px 350px; 134 | -moz-background-size: 700px 350px; 135 | background-size: 700px 700px; 136 | -webkit-border-radius: 350px; 137 | border-radius: 350px; 138 | -moz-transition:all .55s; 139 | -webkit-transition:all .55s; 140 | transition:all .55s; 141 | -moz-animation:rotate 55s infinite linear; 142 | -webkit-animation:rotate 55s infinite linear; 143 | animation:rotate 55s infinite linear; 144 | } 145 | .compassdiv .compass .compass-6{ 146 | background-image: url(../images/compass/c-a-6.png); 147 | position:absolute; 148 | z-index:6; 149 | filter:alpha(opacity=100); 150 | -moz-opacity:1; 151 | opacity:1; 152 | -webkit-background-size: 700px 350px; 153 | -moz-background-size: 700px 350px; 154 | background-size: 700px 700px; 155 | -webkit-border-radius: 350px; 156 | border-radius: 350px; 157 | -moz-transition:all .55s; 158 | -webkit-transition:all .55s; 159 | transition:all .55s; 160 | -moz-animation:rotate 55s infinite linear; 161 | -webkit-animation:rotate 55s infinite linear; 162 | animation:rotate 55s infinite linear; 163 | } 164 | .compassdiv .compass .compass-7{ 165 | background-image: url(../images/compass/c-a-7.png); 166 | position:absolute; 167 | z-index:7; 168 | filter:alpha(opacity=100); 169 | -moz-opacity:1; 170 | opacity:1; 171 | -webkit-background-size: 700px 350px; 172 | -moz-background-size: 700px 350px; 173 | background-size: 700px 700px; 174 | -webkit-border-radius: 350px; 175 | border-radius: 350px; 176 | -moz-transition:all .35s; 177 | -webkit-transition:all .35s; 178 | transition:all .35s; 179 | -moz-animation:rotate 35s infinite linear; 180 | -webkit-animation:rotate 35s infinite linear; 181 | animation:rotate 35s infinite linear; 182 | } 183 | .compassdiv .compass .compass-8{ 184 | background-image: url(../images/compass/c-a-8.png); 185 | position:absolute; 186 | z-index:8; 187 | filter:alpha(opacity=100); 188 | -moz-opacity:1; 189 | opacity:1; 190 | -webkit-background-size: 700px 350px; 191 | -moz-background-size: 700px 350px; 192 | background-size: 700px 700px; 193 | -webkit-border-radius: 350px; 194 | border-radius: 350px; 195 | -moz-transition:all .25s; 196 | -webkit-transition:all .25s; 197 | transition:all .25s; 198 | -moz-animation:rotate 25s infinite linear; 199 | -webkit-animation:rotate 25s infinite linear; 200 | animation:rotate 25s infinite linear; 201 | -webkit-transform: rotateZ(720deg); 202 | -moz-transform: rotateZ(720deg); 203 | -o-transform: rotateZ(720deg); 204 | -ms-transform: rotateZ(720deg); 205 | transform: rotateZ(720deg); 206 | } 207 | .compassdiv .compass .compass-9{ 208 | background-image: url(../images/compass/c-a-9.png); 209 | position:absolute; 210 | z-index:9; 211 | filter:alpha(opacity=100); 212 | -moz-opacity:1; 213 | opacity:1; 214 | -webkit-background-size: 700px 350px; 215 | -moz-background-size: 700px 350px; 216 | background-size: 700px 700px; 217 | -webkit-border-radius: 350px; 218 | border-radius: 350px; 219 | -moz-transition:all .45s; 220 | -webkit-transition:all .45s; 221 | transition:all .45s; 222 | -moz-animation:rotate 45s infinite linear; 223 | -webkit-animation:rotate 45s infinite linear; 224 | animation:rotate 45s infinite linear; 225 | } 226 | .compassdiv .compass .compass-10{ 227 | background-image: url(../images/compass/c-a-10.png); 228 | position:absolute; 229 | z-index:10; 230 | } 231 | .compassdiv .compass .compass-11{ 232 | background-image: url(../images/compass/c-a-11.png); 233 | position:absolute; 234 | z-index:11; 235 | filter:alpha(opacity=100); 236 | -moz-opacity:1; 237 | opacity:1; 238 | -webkit-background-size: 700px 350px; 239 | -moz-background-size: 700px 350px; 240 | background-size: 700px 700px; 241 | -webkit-border-radius: 350px; 242 | border-radius: 350px; 243 | -moz-transition:all .55s; 244 | -webkit-transition:all .55s; 245 | transition:all .55s; 246 | -moz-animation:rotate 55s infinite linear; 247 | -webkit-animation:rotate 55s infinite linear; 248 | animation:rotate 55s infinite linear; 249 | -webkit-transform: rotateZ(720deg); 250 | -moz-transform: rotateZ(720deg); 251 | -o-transform: rotateZ(720deg); 252 | -ms-transform: rotateZ(720deg); 253 | transform: rotateZ(720deg); 254 | } 255 | .compassdiv .compass .compass-12{ 256 | background-image: url(../images/compass/c-a-12.png); 257 | position:absolute; 258 | z-index:12; 259 | filter:alpha(opacity=100); 260 | -moz-opacity:1; 261 | opacity:1; 262 | -webkit-background-size: 700px 350px; 263 | -moz-background-size: 700px 350px; 264 | background-size: 700px 700px; 265 | -webkit-border-radius: 350px; 266 | border-radius: 350px; 267 | -moz-transition:all .45s; 268 | -webkit-transition:all .45s; 269 | transition:all .45s; 270 | -moz-animation:rotate 45s infinite linear; 271 | -webkit-animation:rotate 45s infinite linear; 272 | animation:rotate 45s infinite linear; 273 | } 274 | .compassdiv .compass .compass-13{ 275 | background-image: url(../images/compass/c-a-13.png); 276 | position:absolute; 277 | z-index:13; 278 | filter:alpha(opacity=100); 279 | -moz-opacity:1; 280 | opacity:1; 281 | -webkit-background-size: 700px 350px; 282 | -moz-background-size: 700px 350px; 283 | background-size: 700px 700px; 284 | -webkit-border-radius: 350px; 285 | border-radius: 350px; 286 | -moz-transition:all .35s; 287 | -webkit-transition:all .35s; 288 | transition:all .35s; 289 | -moz-animation:rotate 35s infinite linear; 290 | -webkit-animation:rotate 35s infinite linear; 291 | animation:rotate 35s infinite linear; 292 | -webkit-transform: rotateZ(720deg); 293 | -moz-transform: rotateZ(720deg); 294 | -o-transform: rotateZ(720deg); 295 | -ms-transform: rotateZ(720deg); 296 | transform: rotateZ(720deg); 297 | } 298 | .compassdiv .compass .compass-14{ 299 | background-image: url(../images/compass/c-a-14.png); 300 | position:absolute; 301 | z-index:14; 302 | filter:alpha(opacity=100); 303 | -moz-opacity:1; 304 | opacity:1; 305 | -webkit-background-size: 700px 350px; 306 | -moz-background-size: 700px 350px; 307 | background-size: 700px 700px; 308 | -webkit-border-radius: 350px; 309 | border-radius: 350px; 310 | -moz-transition:all .25s; 311 | -webkit-transition:all .25s; 312 | transition:all .25s; 313 | -moz-animation:rotate 25s infinite linear; 314 | -webkit-animation:rotate 25s infinite linear; 315 | animation:rotate 25s infinite linear; 316 | } 317 | .compassdiv .compass .compass-15{ 318 | background-image: url(../images/compass/c-a-15.png); 319 | position:absolute; 320 | z-index:15; 321 | filter:alpha(opacity=100); 322 | -moz-opacity:1; 323 | opacity:1; 324 | -webkit-background-size: 700px 350px; 325 | -moz-background-size: 700px 350px; 326 | background-size: 700px 700px; 327 | -webkit-border-radius: 350px; 328 | border-radius: 350px; 329 | -moz-transition:all .3s; 330 | -webkit-transition:all .3s; 331 | transition:all .3s; 332 | -moz-animation:rotate 3s infinite linear; 333 | -webkit-animation:rotate 3s infinite linear; 334 | animation:rotate 3s infinite linear; 335 | -webkit-transform: rotateZ(720deg); 336 | -moz-transform: rotateZ(720deg); 337 | -o-transform: rotateZ(720deg); 338 | -ms-transform: rotateZ(720deg); 339 | transform: rotateZ(720deg); 340 | } 341 | .compassdiv .compass .compass-16{ 342 | background-image: url(../images/compass/c-a-16.png); 343 | position:absolute; 344 | z-index:16; 345 | filter:alpha(opacity=100); 346 | -moz-opacity:1; 347 | opacity:1; 348 | -webkit-background-size: 700px 350px; 349 | -moz-background-size: 700px 350px; 350 | background-size: 700px 700px; 351 | -webkit-border-radius: 350px; 352 | border-radius: 350px; 353 | -moz-transition:all .35s; 354 | -webkit-transition:all .35s; 355 | transition:all .35s; 356 | -moz-animation:rotate 35s infinite linear; 357 | -webkit-animation:rotate 35s infinite linear; 358 | animation:rotate 35s infinite linear; 359 | } 360 | .compassdiv .compass .compass-17{ 361 | background-image: url(../images/compass/c-a-17.png); 362 | position:absolute; 363 | z-index:17; 364 | filter:alpha(opacity=100); 365 | -moz-opacity:1; 366 | opacity:1; 367 | -webkit-background-size: 700px 350px; 368 | -moz-background-size: 700px 350px; 369 | background-size: 700px 700px; 370 | -webkit-border-radius: 350px; 371 | border-radius: 350px; 372 | -moz-transition:all .15s; 373 | -webkit-transition:all .15s; 374 | transition:all .15s; 375 | -moz-animation:rotate 15s infinite linear; 376 | -webkit-animation:rotate 15s infinite linear; 377 | animation:rotate 15s infinite linear; 378 | } 379 | .compassdiv .compass .compass-18{ 380 | background-image: url(../images/compass/c-a-18.png); 381 | position:absolute; 382 | z-index:18; 383 | filter:alpha(opacity=100); 384 | -moz-opacity:1; 385 | opacity:1; 386 | -webkit-background-size: 700px 350px; 387 | -moz-background-size: 700px 350px; 388 | background-size: 700px 700px; 389 | -webkit-border-radius: 350px; 390 | border-radius: 350px; 391 | -moz-transition:all .25s; 392 | -webkit-transition:all .25s; 393 | transition:all .25s; 394 | -moz-animation:rotate 25s infinite linear; 395 | -webkit-animation:rotate 25s infinite linear; 396 | animation:rotate 25s infinite linear; 397 | -webkit-transform: rotateZ(720deg); 398 | -moz-transform: rotateZ(720deg); 399 | -o-transform: rotateZ(720deg); 400 | -ms-transform: rotateZ(720deg); 401 | transform: rotateZ(720deg); 402 | } 403 | .compassdiv .compass .compass-19{ 404 | background-image: url(../images/compass/c-a-19.png); 405 | position:absolute; 406 | z-index:19; 407 | filter:alpha(opacity=100); 408 | -moz-opacity:1; 409 | opacity:1; 410 | -webkit-background-size: 700px 350px; 411 | -moz-background-size: 700px 350px; 412 | background-size: 700px 700px; 413 | -webkit-border-radius: 350px; 414 | border-radius: 350px; 415 | -moz-transition:all .20s; 416 | -webkit-transition:all .20s; 417 | transition:all .20s; 418 | -moz-animation:rotate 20s infinite linear; 419 | -webkit-animation:rotate 20s infinite linear; 420 | animation:rotate 20s infinite linear; 421 | } 422 | --------------------------------------------------------------------------------