大家好,今天我为大家带来了一篇关于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企鹅动画代码大全,大家可以根据自己的需要来修改代码达到不同的效果。希望对大家有所帮助!