鱼头说：“产品经理，你看看效果。”产品经理：“这个效果肯定不好。鱼头问：为什么？产品经理：“我们画动画的时候尽量遵循物理世界的原理，一个弹跳的球怎么会那么僵硬呢？”弹跳球的弹性很好。当你把球扔到地上时，它会发生弹性变形，即变形后会立即恢复原状，然后将储存的弹性势能转化为动能，然后才能弹起。向上。”鱼头心里开玩笑：“我一点都不明白。鱼头回答：好，我改！产品经理：“你加班很辛苦，我有女朋友，不能加班，你单身，996可以。”鱼头此时心里没什么感觉，甚至有点想写代码了。一个小时后，鱼头完成了另一个版本，于是他录了一张动图发给产品经理。效果如下：核心代码如下：.ball{background:skyblue;边界半径：50%；宽度：100px；高度：100px；位置：绝对；左：计算（50%-50px）；动画：2s移动线性无限；变换：translateY(0px)scale(1,1);}@keyframesmove{0%{transform:translateY(0px)scale(1,1);}10%{transform:translateY(100px)scale(1,1);}20%{transform:translateY(200px)scale(1,1);}30%{transform:translateY(300px)scale(1,1);}40%{transform:translateY(400px)scale(1,1);}50%{transform:translateY(500px)scale(1,1);}60%{transform:translateY(400px)scale(1.13,0.87);}70%{transform:translateY(300px)scale(0.92,1.08);}80%{transform:translateY(200px)scale(1.05,0.95);}90%{transform:translateY(100px)scale(0.98,1.02);}100%{转换rm:translateY(0px)scale(1,1);}}鱼头内OS：“这个一定会通过的，我是利用鳞片的变形能力来改变球落下时的形状来模拟的，我真的太聪明了，不会考虑物理中弹跳球的弹跳状态环境。”鱼头笑着给产品经理鱼头发了一条微信：“产品经理，我又做了一个版本，你看看？”产品经理：“效果不错，但还需要打磨。”鱼头惊道：“什么？”产品经理：“你的动画效果是有的，但是如果能加入一些视觉上的优化，比如球体的反射，阴影或者地面的反射，效果会更好。”鱼头此时的心还算平静，甚至想笑，不，他此时只想哭。又是愉快的一个小时后，鱼头完成了另一个版本。效果如下：核心代码如下：.content{width:300px;高度：600px；边距：30px自动；位置：相对；-webkit-box-reflect:below0px-webkit-linear-gradient(transparent,transparent50%,rgba(255,255,255,.6));}.ball{background:radial-gradient(circleat40%0,skyblue60%复制代码,#104b63);边界半径：50%；宽度：100px；高度：100px；位置：绝对；左：计算（50%-50px）；动画：2s移动线性无限；变换：translateY(0px)scale(1,1);}@keyframesmove{0%{transform:translateY(0px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}10%{transform:translateY(100px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}20%{transform:translateY(200px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}30%{转换：translateY(300px)比例尺(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}40%{transform:translateY(400px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}50%{transform:translateY(500px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}60%{transform:translateY(400px)scale(1.13,0.87);背景：径向渐变（圆形43%0，天蓝色57%，#104b63）；}70%{transform:translateY(300px)scale(0.92,1.08);背景：径向渐变（圆形37%0，天蓝色63%，#104b63）；}80%{transform:translateY(200px)scale(1.05,0.95);背景：径向渐变（圆形42%0，天蓝色58%，#104b63）；}90%{transform:translateY(100px)scale(0.98,1.02);背景：径向渐变（圆形41%0，天蓝色59%，#104b63）；}100%{transform:translateY(0px)scale(1,1);背景：径向渐变（圆形40%0，天蓝色60%，#104b63）；}}fishheadagaininnerOS:"在原来的弹跳变形中基本上我是用radial-gradient给球底加了阴影，然后用-webkit-box-reflect给整个加了个反镜面效果“容器。这面镜子的灵魂效果是60%的透明度，这样看起来更像是光滑瓷砖地板的倒影。我真聪明，这次我一定能过。”（以上属性在鱼头的《第八章-CSS图形》一文中有展示，有兴趣的可以去看看。）鱼头又给产品经理鱼头发了一条微信：“产品经理，我做了另一个版本，你能看看吗？”产品经理：“这次效果很好。”产品经理：“但是，你还是忽略了两个很重要的东西，那就是重力加速度的表现和弹力球与空气、地面的摩擦力的表现。当弹力球下落时，由于加速度重力的影响，速度会越来越大，向上跳跃时，速度会越来越小，直到为0。弹力球的空气阻力和与地面接触时的力损失导致地面降低弹力球本身的反作用力，所以球下一次跳跃的距离会比下一次更小，落地时的变形也会更小，至于这个数值，不用深究。毕竟是虚拟状态，不可能百分百模拟真实环境。”产品经理：“还好这次要你做一个加载动画，而且加载动画本身就是一个循环动画，不然我就让你加上重力加速度和摩擦力的损失状态。”鱼头小心翼翼地问：“那我可以回家了吗？我好饿。”产品经理：“等一下，我突然又有了一个想法……”鱼头就这样度过了一个浪漫的夜晚。后记其实可以绘制的CSS动画有很多。只要我们仔细组合不同的CSS属性，我们就可以创造出许多有趣的效果。【HelloCSS】系列【HelloCSS】是以CSS基本概念为主题的系列文章，旨在帮助大家更深入地理解CSS，提升CSS在开发者心目中的地位。由于本人鱼头水平有限，文笔水平有限，如果您发现文章中有不合理或不正确的地方，欢迎指出。我将不胜感激；如果您通过文章有什么想法或疑问，希望您能积极留言，我们共同探讨；如果你通过这一系列的文章有所收获，这会让鱼头大喜过望！如果你也喜欢CSS，喜欢讨论技术，或者对本文或本系列有什么意见或建议，非常欢迎你加鱼头微信好友一起讨论。当然，鱼头也希望和大家聊聊生活和爱好。谈论一切。鱼头微信公众号是：krisChans95，也可以扫描二维码加好友，备注“顺丰”即可