【疯狂世界杯】css 动画实现跳动的足球
以下是一个使用CSS实现跳动足球的简单示例：
HTML:
<div class="soccer-ball"></div>CSS:
.soccer-ball {
width: 100px;
height: 100px;
background: url('soccer-ball.png') no-repeat;
background-size: cover;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: ease-out;
}
50% {
transform: translateY(-30px);
animation-timing-function: ease-in;
}
}确保你有足球图片 soccer-ball.png 或者替换为你的足球图片路径。这段代码会创建一个在上下跳动的足球动画。
评论已关闭