css实现图标跳动动画
warning:
这篇文章距离上次修改已过192天，其中的内容可能已经有所变动。
要实现一个图标跳动的动画，可以使用CSS的关键帧动画和变换功能。以下是一个简单的示例，演示如何为一个图标实现简单的上下跳动：
HTML:
<div class="icon-jump">🚀</div>CSS:
.icon-jump {
display: inline-block;
font-size: 50px; /* 根据需要调整图标大小 */
animation: jump 1s infinite; /* 无限循环跳动动画 */
}
@keyframes jump {
0%, 100% { transform: translateY(0); } /* 动画开始和结束时的位置 */
50% { transform: translateY(-10px); } /* 动画中间的跳动高度 */
}这段代码会使得包含🚀（火箭表情符号）的<div>元素在Y轴上不停跳动。可以通过调整@keyframes jump中的百分比和transform: translateY()的值来改变跳动的高度和次数。
评论已关闭