css3实现颤动的动画

darry 发布于2019-08-29 17:01 / 2368人阅读

摘要：需求页面要做一个活动入口，不能太显眼，但是又要用户能一眼就看出来。演示实现部分动画代码代码另附一个搭建的后台管理另附一个搭建的后台管理

需求

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

演示

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

GPU云服务器云服务器 css3动画高性能css3动画实现加载动画 javascript实现动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114046.html

前端必备资源大整理

摘要：资源不断更新中。。。主页前端工具简介虽然不是第一个任务执行工具，它却很快成为了最受欢迎的。官方网站网易框架是网易推出的开源前端框架，提供了丰富代码库和插件，可以极大的帮助开发人员提高开发效率。资源不断更新中。。。动画库1.Animate.css说明：一个简单易用的跨浏览器CSS动画库。GitHub主页： https://github.com/daneden/an... 2.CSSh...

JiaXinYi 2019-08-21 11:46 评论0 收藏0
前端必备资源大整理

摘要：资源不断更新中。。。主页前端工具简介虽然不是第一个任务执行工具，它却很快成为了最受欢迎的。官方网站网易框架是网易推出的开源前端框架，提供了丰富代码库和插件，可以极大的帮助开发人员提高开发效率。资源不断更新中。。。动画库1.Animate.css说明：一个简单易用的跨浏览器CSS动画库。GitHub主页： https://github.com/daneden/an... 2.CSSh...

CoorChice 2019-08-29 12:55 评论0 收藏0
前端必备资源大整理

摘要：资源不断更新中。。。主页前端工具简介虽然不是第一个任务执行工具，它却很快成为了最受欢迎的。官方网站网易框架是网易推出的开源前端框架，提供了丰富代码库和插件，可以极大的帮助开发人员提高开发效率。资源不断更新中。。。动画库1.Animate.css说明：一个简单易用的跨浏览器CSS动画库。GitHub主页： https://github.com/daneden/an... 2.CSSh...

xuhong 2019-08-01 17:07 评论0 收藏0