Skip to content

Instantly share code, notes, and snippets.

@keenwon
Last active December 21, 2015 08:19
Show Gist options
  • Save keenwon/e8a076dc7572c082633e to your computer and use it in GitHub Desktop.
Save keenwon/e8a076dc7572c082633e to your computer and use it in GitHub Desktop.
一些CSS3动画效果
<!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