个人简介
- 作者简介:大家好,我是阿牛,全栈领域优质创作者
- 个人主页:馆主阿牛
- 支持我:点赞+收藏⭐️+留言
- 系列专栏:前端实用小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); } }
由初态到终态,透明度逐渐增大,缩放逐渐恢复!
代码及素材获取
代码
<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 小白到高手的蜕变
其他专栏请前往博主主页查看!