介绍
利用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);
}
}
您阅读这篇文章共花了: 0小时00分00秒
THE END
暂无评论内容