css3實現顫動的動畫

蘭茗翔發表於2019-02-16
CSSS3動畫

需求

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

演示

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…

相關文章