淘先锋技术网

首页 1 2 3 4 5 6 7

大家好,今天我为大家带来了一篇关于CSS企鹅动画代码大全的文章。如果你也想让你的网页更生动有趣,那么赶紧来试试吧!下面就是CSS企鹅动画代码大全。

/* 企鹅飞行动画 */
@keyframes fly {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-50px) rotate(10deg);
}
100% {
transform: translateY(-100px) rotate(0);
}
}
.penguin {
animation: fly 2s infinite alternate;
}
/* 企鹅摇头动画 */
@keyframes shake {
0% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}
.penguin-head {
animation: shake 2s infinite alternate;
}
/* 企鹅走路动画 */
@keyframes walk {
0% {
transform: translateY(-2px) translateX(0) rotate(0);
}
25% {
transform: translateY(-2px) translateX(10px) rotate(10deg);
}
50% {
transform: translateY(0) translateX(20px) rotate(0);
}
75% {
transform: translateY(2px) translateX(10px) rotate(-10deg);
}
100% {
transform: translateY(2px) translateX(0) rotate(0);
}
}
.penguin-foot {
animation: walk 1s infinite alternate;
}

以上就是CSS企鹅动画代码大全,大家可以根据自己的需要来修改代码达到不同的效果。希望对大家有所帮助!