码迷,mamicode.com
首页 > Web开发 > 详细

css3实现颤动的动画

时间:2018-12-17 14:33:18      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:http   后台   segment   web   一个   test   不能   follow   页面   

需求

页面要做一个活动入口,不能太显眼,但是又要用户能一眼就看出来。

演示

https://jsfiddle.net/vtsxc18q/

实现 (部分动画代码)


@keyframes chanDong {
            5% {
                -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
            }
            6%,
            8%,
            10%,
            12% {
                -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
                transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
            }

            7%,
            9%,
            11% {
                -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
                transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
            }

            13% {
                -webkit-transform: scale3d(1, 1, 1);
                transform: scale3d(1, 1, 1);
            }

        }

Github 代码

https://github.com/lmxdawn/te...

另附一个 vue 搭建的后台管理

另附一个 vue 搭建的后台管理 https://segmentfault.com/a/11...

来源:https://segmentfault.com/a/1190000016735426

css3实现颤动的动画

标签:http   后台   segment   web   一个   test   不能   follow   页面   

原文地址:https://www.cnblogs.com/datiangou/p/10130604.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!