一个 Duang~ 的CSS3动画

最新推荐文章于 2024-11-08 10:19:16 发布

WahFung_

最新推荐文章于 2024-11-08 10:19:16 发布

阅读量620

点赞数 1

CC 4.0 BY-SA版权

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_43161149/article/details/90614418

深夜无聊去lol官网逛一下，第一个吸引我注意力的并不是有什么活动，而是一个css动画。。。Duang~

于是找了下源码，复制下来玩一下，还挺有意思的，佩服大佬！

这个动画应用在导航栏的小图标上也是挺有意思的。。。玩一年

@keyframes jump{
0%{-webkit-transform:translate(0);transform:translate(0)}
10%{-webkit-transform:translateY(5px) scaleX(1.2) scaleY(.8);transform:translateY(5px) scaleX(1.2) scaleY(.8)}
30%{-webkit-transform:translateY(-13px) scaleX(1) scaleY(1) rotateZ(5deg);transform:translateY(-13px) scaleX(1) scaleY(1) rotateZ(5deg)}
50%{-webkit-transform:translateY(0) scale(1) rotateZ(0);transform:translateY(0) scale(1) rotateZ(0)}
55%{-webkit-transform:translateY(0) scaleX(1.1) scaleY(.9) rotateZ(0);transform:translateY(0) scaleX(1.1) scaleY(.9) rotateZ(0)}
70%{-webkit-transform:translateY(-4px) scaleX(1) scaleY(1) rotateZ(-2deg);transform:translateY(-4