Last active
December 21, 2015 08:19
-
-
Save keenwon/e8a076dc7572c082633e to your computer and use it in GitHub Desktop.
一些CSS3动画效果
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!--[if lte IE 9]> | |
| <html lang="zh-CN"> | |
| <![endif]--> | |
| <!--[if (gt IE 9)|!(IE)]><!--> | |
| <html lang="zh-CN" class="css3"> | |
| <!--<![endif]--> | |
| <head> | |
| <title>test</title> | |
| <style> | |
| body { | |
| background: #ddd; | |
| } | |
| /* | |
| * 动画1 | |
| */ | |
| .a1-div { | |
| width: 50px; | |
| height: 50px; | |
| text-align: center; | |
| color: #fff; | |
| font-size: 16px; | |
| line-height: 50px; | |
| position: absolute; | |
| top: 300px; | |
| left: 200px; | |
| border-radius: 25px; | |
| transform-origin: 50% -100px; | |
| -ms-transform-origin: 50% -100px; | |
| -webkit-transform-origin: 50% -100px; | |
| } | |
| .a1-div1 { z-index: 1; background-color: red; } | |
| .a1-div2 { z-index: 2; background-color: orange; } | |
| .a1-div3 { z-index: 3; background-color: green; } | |
| .a1-div4 { z-index: 4; background-color: cyan; } | |
| .a1-div5 { z-index: 5; background-color: blue; } | |
| .a1-div6 { z-index: 6; background-color: purple; } | |
| .a1-div1,.a1-div2,.a1-div3,.a1-div4,.a1-div5 { | |
| animation: animation1 .5s; | |
| -webkit-animation: animation1 .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation1 { | |
| to { | |
| transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| } | |
| } | |
| @-webkit-keyframes animation1 { | |
| to { | |
| transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| } | |
| } | |
| .a1-div1 div,.a1-div2 div,.a1-div3 div,.a1-div4 div,.a1-div5 div { | |
| animation: animation1inner .5s; | |
| -webkit-animation: animation1inner .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation1inner { | |
| to { | |
| transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); | |
| } | |
| } | |
| @-webkit-keyframes animation1inner { | |
| to { | |
| transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); | |
| } | |
| } | |
| .a1-div1,.a1-div2,.a1-div3,.a1-div4 { | |
| animation: animation2 .5s .5s; | |
| -webkit-animation: animation2 .5s .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation2 { | |
| from { | |
| transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| } | |
| to { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| } | |
| @-webkit-keyframes animation2 { | |
| from { | |
| transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| } | |
| to { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| } | |
| .a1-div1 div,.a1-div2 div,.a1-div3 div,.a1-div4 div { | |
| animation: animation2inner .5s .5s; | |
| -webkit-animation: animation2inner .5s .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation2inner { | |
| from { | |
| transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); | |
| } | |
| to { | |
| transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| } | |
| } | |
| @-webkit-keyframes animation2inner { | |
| from { | |
| transform: rotate(-45deg); | |
| -ms-transform: rotate(-45deg); | |
| -webkit-transform: rotate(-45deg); | |
| } | |
| to { | |
| transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| } | |
| } | |
| .a1-div1,.a1-div2,.a1-div3 { | |
| animation: animation3 .5s 1s; | |
| -webkit-animation: animation3 .5s 1s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation3 { | |
| from { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| to { | |
| transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| } | |
| } | |
| @-webkit-keyframes animation3 { | |
| from { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| to { | |
| transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| } | |
| } | |
| .a1-div1 div,.a1-div2 div,.a1-div3 div { | |
| animation: animation3inner .5s 1s; | |
| -webkit-animation: animation3inner .5s 1s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation3inner { | |
| from { | |
| transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| } | |
| to { | |
| transform: rotate(-135deg); | |
| -ms-transform: rotate(-135deg); | |
| -webkit-transform: rotate(-135deg); | |
| } | |
| } | |
| @-webkit-keyframes animation3inner { | |
| from { | |
| transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| } | |
| to { | |
| transform: rotate(-135deg); | |
| -ms-transform: rotate(-135deg); | |
| -webkit-transform: rotate(-135deg); | |
| } | |
| } | |
| .a1-div1,.a1-div2 { | |
| animation: animation4 .5s 1.5s; | |
| -webkit-animation: animation4 .5s 1.5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation4 { | |
| from { | |
| transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| } | |
| to { | |
| transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| -webkit-transform: rotate(180deg); | |
| } | |
| } | |
| @-webkit-keyframes animation4 { | |
| from { | |
| transform: rotate(135deg); | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| } | |
| to { | |
| transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| -webkit-transform: rotate(180deg); | |
| } | |
| } | |
| .a1-div1 div,.a1-div2 div { | |
| animation: animation4inner .5s 1.5s; | |
| -webkit-animation: animation4inner .5s 1.5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation4inner { | |
| from { | |
| transform: rotate(-135deg); | |
| -ms-transform: rotate(-135deg); | |
| -webkit-transform: rotate(-135deg); | |
| } | |
| to { | |
| transform: rotate(-180deg); | |
| -ms-transform: rotate(-180deg); | |
| -webkit-transform: rotate(-180deg); | |
| } | |
| } | |
| @-webkit-keyframes animation4inner { | |
| from { | |
| transform: rotate(-135deg); | |
| -ms-transform: rotate(-135deg); | |
| -webkit-transform: rotate(-135deg); | |
| } | |
| to { | |
| transform: rotate(-180deg); | |
| -ms-transform: rotate(-180deg); | |
| -webkit-transform: rotate(-180deg); | |
| } | |
| } | |
| .a1-div1 { | |
| animation: animation5 .5s 2s; | |
| -webkit-animation: animation5 .5s 2s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation5 { | |
| from { | |
| transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| -webkit-transform: rotate(180deg); | |
| } | |
| to { | |
| transform: rotate(225deg); | |
| -ms-transform: rotate(225deg); | |
| -webkit-transform: rotate(225deg); | |
| } | |
| } | |
| @-webkit-keyframes animation5 { | |
| from { | |
| transform: rotate(180deg); | |
| -ms-transform: rotate(180deg); | |
| -webkit-transform: rotate(180deg); | |
| } | |
| to { | |
| transform: rotate(225deg); | |
| -ms-transform: rotate(225deg); | |
| -webkit-transform: rotate(225deg); | |
| } | |
| } | |
| .a1-div1 div { | |
| animation: animation5inner .5s 2s; | |
| -webkit-animation: animation5inner .5s 2s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes animation5inner { | |
| from { | |
| transform: rotate(-180deg); | |
| -ms-transform: rotate(-180deg); | |
| -webkit-transform: rotate(-180deg); | |
| } | |
| to { | |
| transform: rotate(-225deg); | |
| -ms-transform: rotate(-225deg); | |
| -webkit-transform: rotate(-225deg); | |
| } | |
| } | |
| @-webkit-keyframes animation5inner { | |
| from { | |
| transform: rotate(-180deg); | |
| -ms-transform: rotate(-180deg); | |
| -webkit-transform: rotate(-180deg); | |
| } | |
| to { | |
| transform: rotate(-225deg); | |
| -ms-transform: rotate(-225deg); | |
| -webkit-transform: rotate(-225deg); | |
| } | |
| } | |
| /* | |
| * 动画2 | |
| */ | |
| .a2-div { | |
| width: 150px; | |
| height: 150px; | |
| border: 1px solid #fff; | |
| position: absolute; | |
| top: 100px; | |
| left: 450px; | |
| } | |
| .a2-div div { | |
| width: 0; | |
| height: 0; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| background: url('http://www.iconpng.com/png/flaticon_sport-icons/baseball2.png'); | |
| background-size: contain; | |
| -ms-background-size: contain; | |
| -webkit-background-size: contain; | |
| animation: a2animation 3s; | |
| -webkit-animation: a2animation 3s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a2animation { | |
| to { | |
| width: 150px; | |
| height: 150px; | |
| margin-top: -75px; | |
| margin-left: -75px; | |
| transform: rotate(1080deg); | |
| -ms-transform: rotate(1080deg); | |
| -webkit-transform: rotate(1080deg); | |
| } | |
| } | |
| @-webkit-keyframes a2animation { | |
| to { | |
| width: 150px; | |
| height: 150px; | |
| margin-top: -75px; | |
| margin-left: -75px; | |
| transform: rotate(1080deg); | |
| -ms-transform: rotate(1080deg); | |
| -webkit-transform: rotate(1080deg); | |
| } | |
| } | |
| /* | |
| * 动画3 | |
| */ | |
| .a3-div { | |
| width: 150px; | |
| height: 150px; | |
| border: 1px solid #fff; | |
| position: absolute; | |
| top: 100px; | |
| left: 650px; | |
| } | |
| .a3-div div { | |
| width: 70px; | |
| height: 5px; | |
| background: #333; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| transform-origin: 100% 50%; | |
| -ms-transform-origin: 100% 50%; | |
| -webkit-transform-origin: 100% 50%; | |
| animation: a3-animation 2s ease-in-out; | |
| -webkit-animation: a3-animation 2s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a3-animation { | |
| 0% { | |
| transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 40% { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| 60% { | |
| transform: rotate(50deg); | |
| -ms-transform: rotate(50deg); | |
| -webkit-transform: rotate(50deg); | |
| } | |
| 100% { | |
| transform: rotate(170deg); | |
| -ms-transform: rotate(170deg); | |
| -webkit-transform: rotate(170deg); | |
| } | |
| } | |
| @-webkit-keyframes a3-animation { | |
| 0% { | |
| transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| } | |
| 40% { | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| } | |
| 60% { | |
| transform: rotate(50deg); | |
| -ms-transform: rotate(50deg); | |
| -webkit-transform: rotate(50deg); | |
| } | |
| 100% { | |
| transform: rotate(170deg); | |
| -ms-transform: rotate(170deg); | |
| -webkit-transform: rotate(170deg); | |
| } | |
| } | |
| /* | |
| * 动画4 | |
| */ | |
| .a4-div { | |
| width: 153px; | |
| height: 22px; | |
| background: #ccc; | |
| overflow: hidden; | |
| position: absolute; | |
| top: 100px; | |
| left: 850px; | |
| } | |
| .a4-div .div1,.a4-div .div2,.a4-div .div3,.a4-div .div4,.a4-div .div5, | |
| .a4-div .div6,.a4-div .div7,.a4-div .div8,.a4-div .div9 { | |
| width: 15px; | |
| height: 20px; | |
| overflow: hidden; | |
| float: left; | |
| border: 1px solid #fff; | |
| } | |
| .a4-div div i { | |
| width: 15px; | |
| height: 20px; | |
| display: block; | |
| font-style: normal; | |
| line-height: 20px; | |
| text-align: center; | |
| } | |
| .a4-div .div1 i { | |
| animation: a4-animation1 3s ease-in-out; | |
| -webkit-animation: a4-animation1 3s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div2 i { | |
| animation: a4-animation2 3.3s ease-in-out; | |
| -webkit-animation: a4-animation2 3.3s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div3 i { | |
| animation: a4-animation3 3.6s ease-in-out; | |
| -webkit-animation: a4-animation3 3.6s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div4 i { | |
| animation: a4-animation4 3.9s ease-in-out; | |
| -webkit-animation: a4-animation4 3.9s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div5 i { | |
| animation: a4-animation5 4.3s ease-in-out; | |
| -webkit-animation: a4-animation5 4.3s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div6 i { | |
| animation: a4-animation6 4.6s ease-in-out; | |
| -webkit-animation: a4-animation6 4.6s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div7 i { | |
| animation: a4-animation7 4.9s ease-in-out; | |
| -webkit-animation: a4-animation7 4.9s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div8 i { | |
| animation: a4-animation8 5.3s ease-in-out; | |
| -webkit-animation: a4-animation8 5.3s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| .a4-div .div9 i { | |
| animation: a4-animation9 5.6s ease-in-out; | |
| -webkit-animation: a4-animation9 5.6s ease-in-out; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a4-animation1 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-160px); | |
| -ms-transform: translateY(-160px); | |
| -webkit-transform: translateY(-160px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation1 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-160px); | |
| -ms-transform: translateY(-160px); | |
| -webkit-transform: translateY(-160px); | |
| } | |
| } | |
| @keyframes a4-animation2 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-200px); | |
| -ms-transform: translateY(-200px); | |
| -webkit-transform: translateY(-200px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation2 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-200px); | |
| -ms-transform: translateY(-200px); | |
| -webkit-transform: translateY(-200px); | |
| } | |
| } | |
| @keyframes a4-animation3 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-200px); | |
| -ms-transform: translateY(-200px); | |
| -webkit-transform: translateY(-200px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation3 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-200px); | |
| -ms-transform: translateY(-200px); | |
| -webkit-transform: translateY(-200px); | |
| } | |
| } | |
| @keyframes a4-animation4 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-280px); | |
| -ms-transform: translateY(-280px); | |
| -webkit-transform: translateY(-280px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation4 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-280px); | |
| -ms-transform: translateY(-280px); | |
| -webkit-transform: translateY(-280px); | |
| } | |
| } | |
| @keyframes a4-animation5 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-380px); | |
| -ms-transform: translateY(-380px); | |
| -webkit-transform: translateY(-380px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation5 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-380px); | |
| -ms-transform: translateY(-380px); | |
| -webkit-transform: translateY(-380px); | |
| } | |
| } | |
| @keyframes a4-animation6 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-480px); | |
| -ms-transform: translateY(-480px); | |
| -webkit-transform: translateY(-480px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation6 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-480px); | |
| -ms-transform: translateY(-480px); | |
| -webkit-transform: translateY(-480px); | |
| } | |
| } | |
| @keyframes a4-animation7 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-580px); | |
| -ms-transform: translateY(-580px); | |
| -webkit-transform: translateY(-580px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation7 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-580px); | |
| -ms-transform: translateY(-580px); | |
| -webkit-transform: translateY(-580px); | |
| } | |
| } | |
| @keyframes a4-animation8 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-680px); | |
| -ms-transform: translateY(-680px); | |
| -webkit-transform: translateY(-680px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation8 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-680px); | |
| -ms-transform: translateY(-680px); | |
| -webkit-transform: translateY(-680px); | |
| } | |
| } | |
| @keyframes a4-animation9 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-780px); | |
| -ms-transform: translateY(-780px); | |
| -webkit-transform: translateY(-780px); | |
| } | |
| } | |
| @-webkit-keyframes a4-animation9 { | |
| from { | |
| transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| } | |
| to { | |
| transform: translateY(-780px); | |
| -ms-transform: translateY(-780px); | |
| -webkit-transform: translateY(-780px); | |
| } | |
| } | |
| /* | |
| * 动画5 | |
| */ | |
| .a5-div { | |
| width: 400px; | |
| height: 100px; | |
| position: absolute; | |
| top: 400px; | |
| left: 50px; | |
| } | |
| .a5-div .div1,.a5-div .div2,.a5-div .div3,.a5-div .div4 { | |
| width: 150px; | |
| height: 150px; | |
| position: absolute; | |
| top: -25px; | |
| border-radius: 50%; | |
| opacity: 0; | |
| } | |
| .a5-div .div1 { | |
| left: -25px; | |
| background: url('http://www.iconpng.com/png/flaticon_sport-icons/sportive2.png'); | |
| background-size: contain; | |
| -ms-background-size: contain; | |
| -webkit-background-size: contain; | |
| animation: a5-animation1 .5s; | |
| -webkit-animation: a5-animation1 .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a5-animation1 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 25px; | |
| } | |
| } | |
| @-webkit-keyframes a5-animation1 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 25px; | |
| } | |
| } | |
| .a5-div .div2 { | |
| left: 75px; | |
| background: url('http://www.iconpng.com/png/flaticon_sport-icons/soccer3.png'); | |
| background-size: contain; | |
| -ms-background-size: contain; | |
| -webkit-background-size: contain; | |
| animation: a5-animation2 .5s .5s; | |
| -webkit-animation: a5-animation2 .5s .5s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a5-animation2 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 125px; | |
| } | |
| } | |
| @-webkit-keyframes a5-animation2 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 125px; | |
| } | |
| } | |
| .a5-div .div3 { | |
| left: 175px; | |
| background: url('http://www.iconpng.com/png/flaticon_sport-icons/basket.png'); | |
| background-size: contain; | |
| -ms-background-size: contain; | |
| -webkit-background-size: contain; | |
| animation: a5-animation3 .5s 1s; | |
| -webkit-animation: a5-animation3 .5s 1s; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-fill-mode: forwards; | |
| } | |
| @keyframes a5-animation3 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 225px; | |
| } | |
| } | |
| @-webkit-keyframes a5-animation3 { | |
| 30% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| width: 50px; | |
| height: 50px; | |
| top: 25px; | |
| left: 225px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- 动画1 --> | |
| <div class="a1-div a1-div1"><div>1</div></div> | |
| <div class="a1-div a1-div2"><div>2</div></div> | |
| <div class="a1-div a1-div3"><div>3</div></div> | |
| <div class="a1-div a1-div4"><div>4</div></div> | |
| <div class="a1-div a1-div5"><div>5</div></div> | |
| <div class="a1-div a1-div6"><div>6</div></div> | |
| <!-- 动画2 --> | |
| <div class="a2-div"><div></div></div> | |
| <!-- 动画3 --> | |
| <div class="a3-div"><div></div></div> | |
| <!-- 动画4 --> | |
| <div class="a4-div"> | |
| <div class="div1"> | |
| <i>0</i> | |
| <i>1</i> | |
| <i>2</i> | |
| <i>3</i> | |
| <i>4</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div2"> | |
| <i>0</i> | |
| <i>1</i> | |
| <i>2</i> | |
| <i>3</i> | |
| <i>4</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div3"> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>3</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div4"> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>1</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>3</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div5"> | |
| <i>0</i> | |
| <i>1</i> | |
| <i>2</i> | |
| <i>5</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>1</i> | |
| <i>2</i> | |
| <i>3</i> | |
| <i>4</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div6"> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div7"> | |
| <i>0</i> | |
| <i>3</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>1</i> | |
| <i>3</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>0</i> | |
| <i>1</i> | |
| <i>3</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>1</i> | |
| <i>2</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>5</i> | |
| <i>6</i> | |
| <i>7</i> | |
| <i>8</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div8"> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| <div class="div9"> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| <i>0</i> | |
| <i>2</i> | |
| <i>4</i> | |
| <i>6</i> | |
| <i>8</i> | |
| </div> | |
| </div> | |
| <!-- 动画5 --> | |
| <div class="a5-div"> | |
| <div class="div1"></div> | |
| <div class="div2"></div> | |
| <div class="div3"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment