CSS Q弹的果冻动画

秋落落落落叶

已于 2024-11-08 15:21:13 修改

阅读量432

点赞数 3

CC 4.0 BY-SA版权

文章标签： css 前端 html

于 2024-11-08 10:19:16 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59866374/article/details/143615412

.abcd{
            animation: jello-horizontal 1.1s infinite both;
            @keyframes jello-horizontal {
              0% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
              }
              30% {
                -webkit-transform: scale3d(1.25, 0.75, 1);
                        transform: scale3d(1.25, 0.75, 1);
              }
              40% {
                -webkit-transform: scale3d(0.75, 1.25, 1);
                        transform: scale3d(0.75, 1.25, 1);
              }
              50% {
                -webkit-transform: scale3d(1.15, 0.85, 1);
                        transform: scale3d(1.15, 0.85, 1);
              }
              65% {
                -webkit-transform: scale3d(0.95, 1.05, 1);
                        transform: scale3d(0.95, 1.05, 1);
              }
              75% {
                -webkit-transform: scale3d(1.05, 0.95, 1);
                        transform: scale3d(1.05, 0.95, 1);
              }
              100% {
                -webkit-transform: scale3d(1, 1, 1);
                        transform: scale3d(1, 1, 1);
              }
            }
        }

给无论是div还是img加上以上的class类名，复制代码到style标签里，你会惊奇的发现，你的div和图片开始Q弹起来