位置: IT常识 - 正文

【疯狂世界杯】css 动画实现跳动的足球(疯狂世界百科)

编辑：rootadmin

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

推荐整理分享【疯狂世界杯】css 动画实现跳动的足球(疯狂世界百科)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:疯狂世界史,疯狂足球世界,疯狂世界杯游戏机,疯狂世界赛车,世界杯疯狂球迷,疯狂世界1963,疯狂世界1963,疯狂世界杯游戏机,内容如对您有帮助，希望把文章链接给更多的朋友！

目录📋 个人简介前言最终效果思路分析小球的动画阴影的动画代码及素材获取代码图片素材结语前言

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>图片素材

结语

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