世界杯疯狂球迷（【疯狂世界杯】css 动画实现跳动的足球）

时间2025-06-17 09:59:52分类IT科技浏览4542

导读：📋 个人简介 💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜 📝 个人主页：馆主阿牛🔥 🎉 支持我：点赞👍+收藏⭐️+留言📝 📣 系列专栏：前端实用小demo🍁 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥...

📋 个人简介

💖 作者简介：大家好，我是阿牛，全栈领域优质创作者😜 📝 个人主页：馆主阿牛🔥 🎉 支持我：点赞👍+收藏⭐️+留言📝 📣 系列专栏：前端实用小demo🍁 💬格言：迄今所有人生都大写着失败，但不妨碍我继续向前！🔥

前言

2022卡塔尔世界杯正在如火如荼的进行之中，作为“诸神的黄昏 ” ，本届世界杯备受瞩目，足坛巅峰老将c罗，梅西，内马尔也将随本次世界杯退役，一代人的青春到此结束！本篇博客我将用css动画写一个简单的跳动的足球，适合初学者练习css动画，赶紧学起来吧！

最终效果

思路分析

这个效果的布局我是采用flex布局，素材都是背景图片的方式，这些都没啥可讲的，自己去看代码即可！

重点分析一下这个动画，可以将这个效果分解为两个动画：

小球的动画

可以看到小球有个向上跳动的动画，同时在向上跳动的时候资深换有个旋转！

阴影的动画

阴影有个透明度和缩放的变化。

需要注意的是，小球的动画和阴影的动画所消耗的时间是一样的，这样才能保持动画的同步。

还需要注意的是，第二个小球和第三个小球有个动画延迟的效果！

下面就分别来看看这两个简单动画的实现代码吧！

小球的动画

/*小球跳动的动画*/ @keyframes move{ from{ transform: translateY(0) rotate(0); } to{ transform: translateY(-350px) rotate(-360deg); } }

由代码可以看到向上移动了350px ，移动的同时逆时针旋转360度！

需要注意的是：移动 translate 一定要放在旋转 rotate 的前面！

阴影的动画

/*阴影变化的动画*/ @keyframes shadowMove{ 0%{ opacity: 0.5; transform: scale(0.75); } 100%{ opacity: 0.2; transform: scale(1); } }

由初态到终态，透明度逐渐增大，缩放逐渐恢复！

代码及素材获取

代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>跳动的足球</title> <style> body{ width: 100vw; height: 100vh; display: flex; justify-content:center; align-items:flex-end; background: url(img/780.jpg) 0 -100px; } .box{ width: 350px; height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ball{ width: 100px; height:100px; background: url("img/782.jpg"); background-size: 100px 100px; border-radius: 100%; animation: move 1s infinite alternate; /*infinite无限循环，alternate动画反向执行回到起点*/ } /*小球跳动的动画*/ @keyframes move{ from{ transform: translateY(0) rotate(0); } to{ transform: translateY(-350px) rotate(-360deg); } } .shadow{ width:150px; height: 40px; background-color: #000; border-radius: 100%; opacity: 0.5; margin-top: -10px; animation: shadowMove 1s infinite alternate; /*infinite无限循环，alternate动画反向执行回到起点*/ } /*阴影变化的动画*/ @keyframes shadowMove{ 0%{ opacity: 0.5; transform: scale(0.75); } 100%{ opacity: 0.2; transform: scale(1); } } /* 第二个球动画延迟0.2秒 */ .second .ball,.second .shadow{ animation-delay: 0.2s; } /* 第三个球动画延迟0.5秒 */ .thrid .ball,.thrid .shadow{ animation-delay: 0.5s; } </style> </head> <body> <div class="box"> <div class="ball"></div> <div class="shadow"></div> </div> <div class="box second"> <div class="ball"></div> <div class="shadow"></div> </div> <div class="box thrid"> <div class="ball"></div> <div class="shadow"></div> </div> </body> </html>

图片素材

结语

如果你觉得博主写的还不错的话，可以关注一下当前专栏，博主会更完这个系列的哦！也欢迎订阅博主的其他好的专栏。

🏰系列专栏

👉flask框架快速入门

👉java 小白到高手的蜕变

其他专栏请前往博主主页查看！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。