雪花飘html动画,用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜...

雪花飘落：

//雪花飘落

.snowDown {

animation: snowDown 3s linear infinite normal;

-webkit-animation: snowDown 3s linear infinite normal;

position: relative;

}

@keyframes snowDown {

from {

opacity: 1;

top: 0;

}

to {

opacity: 0;

top: 30em;

}

}

星星闪烁：

.starFlick {

animation: starFlick 0.8s ease-out infinite;

-webkit-animation: starFlick 0.8s ease-out infinite;

}

@keyframes starFlick {

from {

opacity: 1;

}

to {

opacity: 0;

}

}

按钮缩放：

.ds_Btn {

animation: ds_Btn 1.5s ease-in-out infinite;

-webkit-animation: ds_Btn 1.5s ease-in-out infinite;

}

@keyframes ds_Btn {

0% {

transform: scale(1, 1);

}

25% {

transform: scale(1.08, 1.08);

}

50% {

transform: scale(1, 1);

}

100% {

transform: scale(1, 1);

}

}

.ql_Btn {

animation: ql_Btn 1.5s ease-in-out infinite;

-webkit-animation: ql_Btn 1.5s ease-in-out infinite;

}

@keyframes ql_Btn {

0% {

transform: scale(1, 1);

}

25% {

transform: scale(1, 1);

}

50% {

transform: scale(1, 1);

}

100% {

transform: scale(1.08, 1.08);

}

}

图片倾斜波动：

.peopleImg {

animation: peopleImg 1.5s linear infinite;

}

@keyframes peopleImg {

0% {

transform: skewY(0deg);

-webkit-transform: skewY(0deg);

}

25% {

transform: skewY(1deg);

-webkit-transform: skewY(1deg);

}

50% {

transform: skewY(0deg);

-webkit-transform: skewY(0deg);

}

100% {

transform: skewY(-1deg);

-webkit-transform: skewY(-1deg);

}

}