022卡塔尔世界杯正在如火如荼的进行之中，作为“诸神的黄昏”，本届世界杯备受瞩目，足坛巅峰老将c罗，梅西，内马尔也将随本次世界杯退役，一代人的青春到此结束！本篇博客我将用css动画写一个简单的跳动的足球，适合初学者练习css动画，赶紧学起来吧！
最终效果
思路分析
这个效果的布局我是采用flex布局，素材都是背景图片的方式，这些都没啥可讲的，自己去看代码即可！
重点分析一下这个动画，可以将这个效果分解为两个动画：
小球的动画
可以看到小球有个向上跳动的动画，同时在向上跳动的时候资深换有个旋转！
阴影的动画
阴影有个透明度和缩放的变化。
需要注意的是，小球的动画和阴影的动画所消耗的时间是一样的，这样才能保持动画的同步。
还需要注意的是，第二个小球和第三个小球有个动画延迟的效果！
下面就分别来看看这两个简单动画的实现代码吧！
小球的动画
|
1 2 3 4 5 6 7 8 9 |
/*小球跳动的动画*/ @keyframes move{ from{ transform: translateY(0) rotate(0); } to{ transform: translateY(-350px) rotate(-360deg); } } |
由代码可以看到向上移动了350px，移动的同时逆时针旋转360度！
需要注意的是：移动 translate 一定要放在旋转 rotate 的前面！
阴影的动画
|
1 2 3 4 5 6 7 8 9 10 11 |
/*阴影变化的动画*/ @keyframes shadowMove{ 0%{ opacity: 0.5; transform: scale(0.75); } 100%{ opacity: 0.2; transform: scale(1); } } |
由初态到终态，透明度逐渐增大，缩放逐渐恢复！
代码及素材获取
代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!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> |
图片素材
