介绍
利用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);
}
}
未经允许不得转载:
作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽博客。
原文地址: 《CSS-实现animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜效果》 发布于2022-3-1
评论