css3實現顫動的動畫

需求

頁面要做一個活動入口,不能太顯眼,但是又要用戶能一眼就看出來。

演示

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...

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章