├── imageFiles ├── 架构 ├── README.md ├── MVC和MVVM │ └── README.md └── 微前端 │ └── README.md ├── MySQL └── README.md ├── images ├── readme.md ├── 01.png ├── 02.png ├── 03.png ├── 333.jpg ├── v8内存回收.jpg ├── https_01.png ├── node时间循环.jpg ├── 640_meitu_1.jpg ├── 判断object是数组类型.jpg └── 重定向301和302的区别.png ├── react └── README.md ├── redis └── README.md ├── 新技术 ├── README.md ├── Serverless │ └── README.md └── webAssebly │ └── README.md ├── HTML ├── README.md └── canvas │ └── README.md ├── javascript └── README.md ├── java └── README.md ├── VUE ├── vuex │ └── README.md └── README.md ├── qrcode_for_gh_64b8beeaaf09_344.jpg ├── .gitattributes ├── webpack └── README.md ├── 其他资料库 ├── OAuth │ └── README.md ├── README.md ├── PWA │ └── README.md ├── webSocket │ └── README.md ├── 前端骨架屏 │ └── README.md ├── 前端组件 │ └── README.md └── HTTP │ └── README.md ├── Linux └── README.md ├── 职场成长 └── README.md ├── javaScript ├── README.md ├── 异常处理 │ └── README.md ├── Babel │ └── README.md ├── 模块化 │ └── README.md └── Promise │ └── README.md ├── 跨平台 └── README.md ├── Node ├── npm │ └── README.md └── README.md ├── Nginx └── README.md ├── CSS ├── README.md └── css常用动画.css └── README.md /imageFiles: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /架构/README.md: -------------------------------------------------------------------------------- 1 | 架构资料库 2 | -------------------------------------------------------------------------------- /MySQL/README.md: -------------------------------------------------------------------------------- 1 | MySQL资料库 2 | -------------------------------------------------------------------------------- /images/readme.md: -------------------------------------------------------------------------------- 1 | 2 | 图片 3 | -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 | react资料库 2 | -------------------------------------------------------------------------------- /redis/README.md: -------------------------------------------------------------------------------- 1 | redis资料库 2 | -------------------------------------------------------------------------------- /新技术/README.md: -------------------------------------------------------------------------------- 1 | 新技术资料库 2 | -------------------------------------------------------------------------------- /HTML/README.md: -------------------------------------------------------------------------------- 1 | 存放HTML相关资料文章 2 | -------------------------------------------------------------------------------- /javascript/README.md: -------------------------------------------------------------------------------- 1 | 2 | 待删除 3 | -------------------------------------------------------------------------------- /images/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/01.png -------------------------------------------------------------------------------- /images/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/02.png -------------------------------------------------------------------------------- /images/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/03.png -------------------------------------------------------------------------------- /images/333.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/333.jpg -------------------------------------------------------------------------------- /images/v8内存回收.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/v8内存回收.jpg -------------------------------------------------------------------------------- /java/README.md: -------------------------------------------------------------------------------- 1 | [001.带你涨姿势，认识一下Kafka！](https://segmentfault.com/a/1190000020718980) 2 | -------------------------------------------------------------------------------- /images/https_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/https_01.png -------------------------------------------------------------------------------- /images/node时间循环.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/node时间循环.jpg -------------------------------------------------------------------------------- /images/640_meitu_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/640_meitu_1.jpg -------------------------------------------------------------------------------- /images/判断object是数组类型.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/判断object是数组类型.jpg -------------------------------------------------------------------------------- /images/重定向301和302的区别.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/images/重定向301和302的区别.png -------------------------------------------------------------------------------- /VUE/vuex/README.md: -------------------------------------------------------------------------------- 1 | [1.前端状态管理模式 (Redux/Vuex)和HTML本地存储的区别在哪里？](https://www.zhihu.com/question/57138762) 2 | 3 | -------------------------------------------------------------------------------- /qrcode_for_gh_64b8beeaaf09_344.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qappleh/Interview/HEAD/qrcode_for_gh_64b8beeaaf09_344.jpg -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.md linguist-language=JavaScript 2 | *.js linguist-language=JavaScript 3 | *.css linguist-language=JavaScript 4 | *.html linguist-language=JavaScript 5 | -------------------------------------------------------------------------------- /webpack/README.md: -------------------------------------------------------------------------------- 1 | [001.【webpack整理】一、安装、配置、按需加载](https://www.cnblogs.com/skylor/p/7008756.html) 2 | 3 | [002.webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)](https://www.cnblogs.com/libin-1/p/6537936.html) 4 | -------------------------------------------------------------------------------- /其他资料库/OAuth/README.md: -------------------------------------------------------------------------------- 1 | [1.OAuth2.0 原理流程及其单点登录和权限控制](https://blog.csdn.net/kefengwang/article/details/81213025) 2 | 3 | [2.OAuth2.0原理和验证流程分析](https://www.jianshu.com/p/d74ce6ca0c33) 4 | 5 | [3.OAuth2.0原理与实现](https://www.cnblogs.com/free-wings/p/9609218.html) 6 | -------------------------------------------------------------------------------- /Linux/README.md: -------------------------------------------------------------------------------- 1 | [001.Docker架构原理及简单使用](https://www.cnblogs.com/zhangxingeng/p/11236968.html) 2 | 3 | [002.必学必会 ● 1小时入门 Docker，让部署应用更快更简单](https://www.cnblogs.com/peng104/p/10296717.html) 4 | 5 | [003.当面试官问你CDN的实现原理该怎么答，看这一篇文章彻底搞懂](https://baijiahao.baidu.com/s?id=1633945802472340217) 6 | -------------------------------------------------------------------------------- /其他资料库/README.md: -------------------------------------------------------------------------------- 1 | [001.强烈推荐 GitHub 上值得前端学习的开源实战项目](https://blog.csdn.net/ch834301/article/details/92095591) 2 | 3 | [002.解密国内BAT等大厂前端技术体系-美团点评之上篇（长文建议收藏）](https://juejin.im/post/5de6474bf265da33af512598) 4 | 5 | [003.日问周刊 | 全栈面试汇总 | 第四期](https://juejin.im/post/5de84cf86fb9a016121b28f4) 6 | -------------------------------------------------------------------------------- /职场成长/README.md: -------------------------------------------------------------------------------- 1 | [001.我的十年程序生涯：建模启航](http://c7.gg/fRJyj) 2 | 3 | [002.看完知乎轮子哥的编程之路，我只想说，收下我的膝盖](http://c7.gg/fRJyc) 4 | 5 | [003 ."第 1 份工作，我只干了 2 周就被辞退了" | 十年系列](http://c7.gg/fRJxW) 6 | 7 | [004 .奇舞周刊第 326 期 —— 我的前端成长之路](http://c7.gg/fRJxH) 8 | 9 | [005 .宋小菜前端管理交流群-雨雀资料库](https://www.yuque.com/iscott/tl) 10 | -------------------------------------------------------------------------------- /javaScript/README.md: -------------------------------------------------------------------------------- 1 | [001.前端异常监控解决方案研究](https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/) 2 | 3 | [002.细微处谈前端重构](https://juejin.im/post/5d4edd516fb9a06b2d77c3d7) 4 | 5 | [003.Websocket原理及使用场景](https://www.jianshu.com/p/ac74620333e7) 6 | 7 | [004.PWA笔记二：离线缓存原理](https://www.jianshu.com/p/ff25f25fdb48) 8 | -------------------------------------------------------------------------------- /VUE/README.md: -------------------------------------------------------------------------------- 1 | [001.VUE开发--Service Worker(五十二)](https://www.jianshu.com/p/8f3ad5021b0a) 2 | 3 | [002.简单理解Vue中的nextTick](https://www.jianshu.com/p/a7550c0e164f) 4 | 5 | [003.带你五步学会Vue SSR](https://segmentfault.com/a/1190000016637877) 6 | 7 | [004.终于轮到Vue来带给React灵感了？](https://blog.csdn.net/GetIdea/article/details/103419244) 8 | -------------------------------------------------------------------------------- /其他资料库/PWA/README.md: -------------------------------------------------------------------------------- 1 | [1.PWA文档]( https://lavas.baidu.com/pwa) 2 | 3 | [2.PWA简介]( https://www.jianshu.com/p/299c9c720e56) 4 | 5 | [3.PWA笔记二：离线缓存原理](https://www.jianshu.com/p/ff25f25fdb48) 6 | 7 | [4.30分钟从零开始教会你什么是PWA]( https://www.jianshu.com/p/299c9c720e56) 8 | 9 | [5.2019前端必会黑科技之PWA]( https://www.jianshu.com/p/098af61bbe04) 10 | -------------------------------------------------------------------------------- /HTML/canvas/README.md: -------------------------------------------------------------------------------- 1 | [1.js+canvas绘制五角星的方法]( https://www.jb51.net/article/78818.htm) 2 | 3 | [2. canvas绘图详解-06-绘制一个五角星-常用绘图原理]( https://www.cnblogs.com/wufangfang/p/6373972.html) 4 | 5 | [3.学习HTML5 Canvas这一篇文章就够了]( https://blog.csdn.net/u012468376/article/details/73350998) 6 | 7 | [4. html5 canvas 自定义画图裁剪图片]( https://www.cnblogs.com/porter/p/10900597.html) 8 | -------------------------------------------------------------------------------- /其他资料库/webSocket/README.md: -------------------------------------------------------------------------------- 1 | [1.看完让你彻底理解 WebSocket 原理，附完整的实战代码（包含前端和后端） ]( https://www.cnblogs.com/nnngu/p/9347635.html) 2 | 3 | [2.一文探究web实时通信方案并深入websocket原理与应用]( https://www.jianshu.com/p/1dd536c414ef ) 4 | 5 | [3.Websocket原理及使用场景]( https://www.jianshu.com/p/ac74620333e7 ) 6 | 7 | [4.WebSocket 是什么原理？为什么可以实现持久连接？]( https://cloud.tencent.com/developer/article/1065947) 8 | -------------------------------------------------------------------------------- /跨平台/README.md: -------------------------------------------------------------------------------- 1 | [001.该不该使用Flutter开发全新APP](https://www.jianshu.com/p/e7b5c2f442d4) 2 | 3 | [002.最火移动端跨平台方案盘点：React Native、weex、Flutter](https://www.cnblogs.com/imstudy/p/9466781.html) 4 | 5 | [003.React Native如何做跨平台设计](https://blog.csdn.net/yeana1/article/details/52094471) 6 | 7 | [004.react-native技术栈总结](https://www.jianshu.com/p/95308355c57b) 8 | 9 | 10 | -------------------------------------------------------------------------------- /其他资料库/前端骨架屏/README.md: -------------------------------------------------------------------------------- 1 | [1.一种对开发更友好的前端骨架屏自动生成方案]( https://segmentfault.com/a/1190000020309764) 2 | 3 | [2.网页骨架屏自动生成方案（dps）]( http://www.imooc.com/article/289688) 4 | 5 | [3.前端骨架屏方案小结]( https://segmentfault.com/a/1190000016689372) 6 | 7 | [4.如何实现优美的骨架屏]( https://zhuanlan.zhihu.com/p/96455668) 8 | 9 | [5.一种自动化生成骨架屏的方案-饿了么]( https://github.com/Jocs/jocs.github.io/issues/22) 10 | -------------------------------------------------------------------------------- /javaScript/异常处理/README.md: -------------------------------------------------------------------------------- 1 | [1.异常监控：教你如何优雅的处理前端异常]( http://985.so/gnHR) 2 | 3 | [2.前端异常监控解决方案研究]( https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/) 4 | 5 | [3.前端 JavaScript 错误分析实践]( http://985.so/gnHN) 6 | 7 | [4.理论 | nodejs中错误捕获的一些最佳实践](https://www.sohu.com/a/148207942_495695) 8 | 9 | [5.nodejs中的异常错误处理](https://cloud.tencent.com/developer/article/1461991) 10 | 11 | -------------------------------------------------------------------------------- /架构/MVC和MVVM/README.md: -------------------------------------------------------------------------------- 1 | [1.MVC、MVP及MVVM之间的关系]( https://www.cnblogs.com/shenyf/p/9532342.html) 2 | 3 | [2.MVC、MVP及MVVM图示]( http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html) 4 | 5 | [3.谈谈MVC模式]( http://www.ruanyifeng.com/blog/2007/11/mvc.html) 6 | 7 | [4.MVVM]( https://www.liaoxuefeng.com/wiki/1022910821149312/1108898947791072) 8 | 9 | [5.MVC、MVP 和 MVVM 对比笔记]( https://segmentfault.com/a/1190000018675102?utm_source=tag-newest) 10 | -------------------------------------------------------------------------------- /新技术/Serverless/README.md: -------------------------------------------------------------------------------- 1 | [1.探索 Serverless 中的前端开发模式](https://juejin.im/post/5cdc3dc2e51d453b6c1d9d3a) 2 | 3 | [2.看懂 Serverless，这一篇就够了](https://blog.csdn.net/cc18868876837/article/details/90672971) 4 | 5 | [3.深入浅出Serverless：3 Serverless的实现](https://www.jianshu.com/p/0a6c4963c8ba) 6 | 7 | [4.写给前端工程师的 Serverless 入门](https://segmentfault.com/a/1190000020631510) 8 | 9 | [5.理解serverless无服务架构原理(一)](https://www.cnblogs.com/tugenhua0707/p/10991363.html) 10 | -------------------------------------------------------------------------------- /其他资料库/前端组件/README.md: -------------------------------------------------------------------------------- 1 | [1.前端组件设计原则](https://www.jianshu.com/p/a37ccf9d1eb3) 2 | 3 | [2. 如何去设计一个组件封装_前端组件化设计思路](http://www.fly63.com/article/detial/996) 4 | 5 | [3.手把手教你用npm 制作npm库并发布到npm市场](https://www.jianshu.com/p/b8e0ffe423b5) 6 | 7 | [4.如何开发一个npm包并发布到npm中央仓库](https://www.cnblogs.com/xuange306/p/11435361.html) 8 | 9 | [5.前端组件设计原则](https://github.com/lightningminers/article/issues/36) 10 | 11 | [6.前端组件设计原则](https://blog.csdn.net/mK0vouYv4BwgX190fSd/article/details/96928713) 12 | -------------------------------------------------------------------------------- /Node/npm/README.md: -------------------------------------------------------------------------------- 1 | [1.手把手教你用npm 制作npm库并发布到npm市场](https://www.jianshu.com/p/b8e0ffe423b5) 2 | 3 | [2.npm模块安装机制简介？]( http://www.ruanyifeng.com/blog/2016/01/npm-install.html) 4 | 5 | [3.npm install 之后发生了什么？](https://blog.csdn.net/Alive_tree/article/details/101014999) 6 | 7 | [4.npm install 都干了啥？]( https://juejin.im/post/5cf7171e51882562de33c748) 8 | 9 | [5.前端工程化 - 剖析npm的包管理机制]( https://juejin.im/post/5cf7171e51882562de33c748) 10 | 11 | [6..npm install实现原理]( https://www.zhihu.com/question/66629910) 12 | -------------------------------------------------------------------------------- /新技术/webAssebly/README.md: -------------------------------------------------------------------------------- 1 | [1.WebAssembly官网](https://webassembly.org/) 2 | 3 | [2.WebAssembly中文官网](https://wasm.comptechs.cn/) 4 | 5 | [3.MDN文档](https://developer.mozilla.org/en-US/docs/WebAssembly) 6 | 7 | [4.几张图让你看懂WebAssembly](https://www.jianshu.com/p/bff8aa23fe4d) 8 | 9 | [5.WebAssembly 应用案例直击，谷歌地球都在用](https://cloud.tencent.com/developer/news/92890) 10 | 11 | [6.让C代码在浏览器中运行——WebAssembly入门介绍](https://blog.csdn.net/sinat_32582203/article/details/73355211) 12 | 13 | [7.Awesome WASM](https://github.com/mbasso/awesome-wasm) 14 | -------------------------------------------------------------------------------- /Node/README.md: -------------------------------------------------------------------------------- 1 | [001.为你揭开 node.js 调试面纱](https://mp.weixin.qq.com/s/_x9lpY6TW4Z03RjBkRlZ1g) 2 | 3 | [002.耗时两个月，网上最全的原创nodejs深入系列文章(长达十来万字的文章，欢迎收藏)](https://www.jianshu.com/p/d7b3fd0fff74) 4 | 5 | [003.Node.js 模块机制及常见面试问题解答](https://www.jianshu.com/p/de5ed9da0e2c) 6 | 7 | [004.玩玩服务端渲染之 Next.js](https://juejin.im/post/5cf870af6fb9a07ee46352eb) 8 | 9 | [005.Node部署和运维工作量降低80%，腾讯NOW直播是怎么做到的](http://c7.gg/fRJAH) 10 | 11 | [006.消息队列助你成为高薪的 Node.js 工程师](https://juejin.im/post/5dd8cd7ae51d4523501f7331) 12 | 13 | [007.npm install http-server global 安装http-server服务器](https://blog.csdn.net/wulove52/article/details/85761288) 14 | -------------------------------------------------------------------------------- /javaScript/Babel/README.md: -------------------------------------------------------------------------------- 1 | [1.深入理解Babel原理及其使用]( https://www.jianshu.com/p/e9b94b2d52e2) 2 | 3 | [2.Babel原理]( https://www.jianshu.com/p/e4eb352b4a16) 4 | 5 | [3.Babel是如何读懂JS代码的]( https://zhuanlan.zhihu.com/p/27289600) 6 | 7 | [4.Babel 插件原理的理解与深入]( https://segmentfault.com/a/1190000016359110) 8 | 9 | [5.Babel插件手册]( https://github.com/jamiebuilds/babel-handbook) 10 | 11 | [6.the-super-tiny-compiler]( https://github.com/jamiebuilds/the-super-tiny-compiler) 12 | 13 | [7.Babel 的工作原理以及怎么写一个 Babel 插件]( https://cloud.tencent.com/developer/article/1520124) 14 | 15 | [8.面试官: 你了解过Babel吗？写过Babel插件吗? 答: 没有。卒]( https://juejin.im/post/5a9315e46fb9a0633a711f25) 16 | -------------------------------------------------------------------------------- /javaScript/模块化/README.md: -------------------------------------------------------------------------------- 1 | [1.Javascript模块化编程（一）：模块的写法](http://www.ruanyifeng.com/blog/2012/10/javascript_module.html) 2 | 3 | [2.最全的前端模块化方案](https://www.jianshu.com/p/f684583e2775) 4 | 5 | [3.前端模块化详解(完整版)](https://segmentfault.com/a/1190000017466120) 6 | 7 | [4.Node中没搞明白require和import，你会被坑的很惨](https://imweb.io/topic/582293894067ce9726778be9) 8 | 9 | [5.exports、module.exports 和 export、export default 到底是咋回事](https://juejin.im/post/597ec55a51882556a234fcef) 10 | 11 | [6.import、require、export、module.exports 混合使用详解](https://juejin.im/post/5a2e5f0851882575d42f5609) 12 | 13 | [7.import、require、export、module.exports区别](https://www.cnblogs.com/deepthought/p/11373568.html) 14 | -------------------------------------------------------------------------------- /Nginx/README.md: -------------------------------------------------------------------------------- 1 | [1.Nginx常用的几种负载均衡配置]( https://jingyan.baidu.com/article/11c17a2cc709d2f446e39d03.html) 2 | 3 | [2.六种实现负载均衡技术的方式]( https://zhuanlan.zhihu.com/p/81932198) 4 | 5 | [3.Nginx面试中最常见的18道题 抱佛脚必备]( https://blog.csdn.net/weixin_34344403/article/details/88986308) 6 | 7 | [4. Nginx不归路：架构基础篇]( https://baijiahao.baidu.com/s?id=1634584381830399570) 8 | 9 | [5.Nginx 原理和架构]( https://blog.csdn.net/hustspy1990/article/details/102989305) 10 | 11 | [6.理解Nginx工作原理]( https://www.jianshu.com/p/6215e5d24553) 12 | 13 | [7.前端开发者必备的Nginx知识]( https://juejin.im/post/5c85a64d6fb9a04a0e2e038c) 14 | 15 | [8.前端必会的 Nginx入门视频教程(共11集)]( https://juejin.im/post/5bd7a6046fb9a05d2c43f8c7) 16 | -------------------------------------------------------------------------------- /CSS/README.md: -------------------------------------------------------------------------------- 1 | [001.浅谈CSS模块化](https://www.cnblogs.com/zhuanzhuanfe/p/7449931.html) 2 | 3 | [002.关于sass（scss）、less、postcss、stylus等的用法与区别](https://juejin.im/post/5c9b17cbf265da60c95b7c3a) 4 | 5 | [003.require js（四） 按需加载css](https://blog.csdn.net/jx950915/article/details/85251766) 6 | 7 | [004.4种方案解决CSS浏览器兼容性问题](http://www.wzsky.net/Website/CSS/140565.html) 8 | 9 | [005.css函数竟然有86个](https://blog.csdn.net/MFWSCQ/article/details/89530967) 10 | 11 | [006.HTML和CSS知识图谱](https://blog.csdn.net/qq_21325977/article/details/82726260) 12 | 13 | [007.css基本知识框架图](https://cloud.tencent.com/developer/article/1504378) 14 | 15 | [008.less、sass和postcss总结](https://segmentfault.com/a/1190000021138000) 16 | 17 | [009.]() 18 | 19 | [010.]() 20 | -------------------------------------------------------------------------------- /架构/微前端/README.md: -------------------------------------------------------------------------------- 1 | 2 | [1.实施前端微服务化的六七种方式](https://segmentfault.com/a/1190000015566927) 3 | 4 | [2.微前端那些事](https://microfrontends.cn/) 5 | 6 | [3.微前端实践](https://www.jianshu.com/p/41ab812df9e7) 7 | 8 | [4.微前端如何落地](https://baijiahao.baidu.com/s?id=1638313846156942854) 9 | 10 | [5.可能是你见过最完善的微前端解决方案](https://yq.aliyun.com/articles/715922) 11 | 12 | [6.用微前端的方式搭建类单页应用-美团](https://www.cnblogs.com/meituantech/p/9604591.html) 13 | 14 | [7.带你手写微前端框架](https://juejin.im/post/5db4253451882556a035ae5d) 15 | 16 | [8.微前端入门](https://juejin.im/post/5d8adb8ff265da5ba12cd173) 17 | 18 | [9.每日优鲜供应链前端团队微前端改造](https://juejin.im/post/5d7f702ce51d4561f777e258) 19 | 20 | [10.年度文章集合 | 最全微前端集合【建议收藏】](https://juejin.im/post/5e01f2bff265da33e2290c75) 21 | ) 22 | -------------------------------------------------------------------------------- /javaScript/Promise/README.md: -------------------------------------------------------------------------------- 1 | [1.MDN文档](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 2 | 3 | [2.廖雪峰官方网站](https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544) 4 | 5 | [3.BAT前端经典面试问题：史上最最最详细的手写Promise教程]( https://juejin.im/post/5b2f02cd5188252b937548ab) 6 | 7 | [4.Promise的源码实现（完美符合Promise/A+规范）]( https://segmentfault.com/a/1190000018428848) 8 | 9 | [5.ES6 Promise 解析及详解三个状态]( https://ainyi.com/16) 10 | 11 | [6ES6 Promise用法小结]( https://blog.csdn.net/qq_34645412/article/details/81170576) 12 | 13 | [7.promise]( https://www.jianshu.com/p/1b63a13c2701) 14 | 15 | [8.Promise 必知必会（十道题）]( https://juejin.im/post/5a04066351882517c416715d) 16 | 17 | [9.Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)]( https://juejin.im/post/5aa7868b6fb9a028dd4de672) 18 | 19 | [10.面试精选之Promise]( https://juejin.im/post/5b31a4b7f265da595725f322) 20 | -------------------------------------------------------------------------------- /其他资料库/HTTP/README.md: -------------------------------------------------------------------------------- 1 | [1.面试官：一个 TCP 连接可以发多少个 HTTP 请求?]( https://blog.csdn.net/qappleh/article/details/103592743) 2 | 3 | [2.TCP/IP 和 HTTP 的区别和联系是什么？]( https://www.zhihu.com/question/38648948?sort=created) 4 | 5 | [3.HTTP协议详细介绍]( https://www.cnblogs.com/haiyan123/p/7777924.html) 6 | 7 | [4.HTTP协议详解]( https://www.jianshu.com/p/7c8b4576e4bb) 8 | 9 | [5.TCP的连接和关闭]( https://www.jianshu.com/p/1ffb32fa7d18) 10 | 11 | [6.一篇搞懂TCP、HTTP、Socket、Socket连接池]( https://segmentfault.com/a/1190000014044351) 12 | 13 | [7.面试官，不要再问我三次握手和四次挥手]( https://www.cnblogs.com/heyonggang/p/11634228.html) 14 | 15 | [8.一文看懂https如何保证数据传输的安全性的]( https://www.cnblogs.com/kubidemanong/p/9390021.html) 16 | 17 | [9. SSL/TLS协议运行机制的概述]( http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html) 18 | 19 | [10.HTTP和HTTPS协议，看一篇就够了]( https://blog.csdn.net/xiaoming100001/article/details/81109617) 20 | 21 | [11.Http和Https的区别（面试常考题）]( https://blog.csdn.net/qq_38289815/article/details/80969419) 22 | 23 | [12.Http协议面试题小结]( https://blog.csdn.net/weixin_38051694/article/details/77777010) 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interview 2 | 大前端每日一题，从基础到进阶，从原理到实战，用面试题来倒逼强迫自己每天去学习去查漏补缺 3 | ，系统构建前端完整的知识体系！ 4 | 注：每天早上9点左右更新题目及前一天的答案，首页文件夹里的文章来源于网络，仅供参考学习使用，若有侵权，烦请联系我删除！（有时github访问不太稳定，更新可能会有延迟） 5 | 6 | > 业精于勤，荒于嬉；行成于思，毁于随！学习从来都不是一蹴而就的事情，需要每天的点滴积累与沉淀，从而由量变引发质变！ 7 | ## 今日一题： 8 | 9 | > Day407: 有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6 4 5 6 11 23 42 56 78 90）-滴滴 10 | 11 | 讨论与参考答案：[第407题](https://github.com/qappleh/Web-Daily-Question/issues/410) 12 | 13 | ## 每日一题投稿： 14 | 15 | > 可以把题目发送到邮箱2317472862@qq.com! 16 | 17 | ## 大厂面试： 18 | 公众号已发的BAT等大厂的面经、面试题、简历准备、面试技巧等相关话题！ 19 | [大厂面经面试题汇总](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzA4MDg4NDczMQ==&action=getalbum&album_id=1790586969761103872#wechat_redirect) 20 | 21 | 22 | ## 一周汇总 23 | >[第313题(2020-09-26)：编写一个算法解析以下符号，转换为json树的结构 （美团）](https://github.com/qappleh/Web-Daily-Question/issues/316) 24 | 25 | 讨论与参考答案：[第313题](https://github.com/qappleh/Web-Daily-Question/issues/316) 26 | 27 | >[第312题(2020-09-25)：给你一个由 '1'（陆地）和 '0'（水）组成的的二维网格，请你计算网格中岛屿的数量](https://github.com/qappleh/Web-Daily-Question/issues/315) 28 | 29 | 讨论与参考答案：[第312题](https://github.com/qappleh/Web-Daily-Question/issues/315) 30 | 31 | >[第311题(2020-09-24)：假设把某股票的价格按照时间先后顺序存储在数组中，请问买卖该股票一次可能获得的最大利润是多少？](https://github.com/qappleh/Web-Daily-Question/issues/314) 32 | 33 | 讨论与参考答案：[第311题](https://github.com/qappleh/Web-Daily-Question/issues/314) 34 | 35 | >[第310题(2020-09-23)：说说 vue 如何收集依赖的？](https://github.com/qappleh/Web-Daily-Question/issues/313) 36 | 37 | 讨论与参考答案：[第310题](https://github.com/qappleh/Web-Daily-Question/issues/313) 38 | 39 | >[第309题(2020-09-22)：实现格式化输出，比如输入 999999999，输出 999,999,999? ](https://github.com/qappleh/Web-Daily-Question/issues/312) 40 | 41 | 讨论与参考答案：[第309题](https://github.com/qappleh/Web-Daily-Question/issues/312) 42 | 43 | >[第308题(2020-09-21)：原生实现 ES5 的 Object.create()方法](https://github.com/qappleh/Web-Daily-Question/issues/311) 44 | 45 | 讨论与参考答案：[第308题](https://github.com/qappleh/Web-Daily-Question/issues/311) 46 | 47 | ## 分类 48 | 49 | ### HTML 50 | 51 | >[第112题(2019-12-24)：请使用canvas画一个五角星。](https://github.com/qappleh/Web-Daily-Question/issues/114) 52 | 53 | 讨论与参考答案：[第112题](https://github.com/qappleh/Web-Daily-Question/issues/114) 54 | 55 | 56 | >[第190题(2020-04-10)：dangerousSetInnerHTMl知道不？和innerHTML的区别？（美团）](https://github.com/qappleh/Web-Daily-Question/issues/192) 57 | 58 | 讨论与参考答案：[第190题](https://github.com/qappleh/Web-Daily-Question/issues/192) 59 | 60 | 61 | >[第202题(2020-04-27)：dom树和cssom树原理是什么？（阿里）](https://github.com/qappleh/Web-Daily-Question/issues/204) 62 | 63 | 讨论与参考答案：[第202题](https://github.com/qappleh/Web-Daily-Question/issues/204) 64 | 65 | 66 | ### CSS 67 | 68 | >[第24题(2019-08-22)：介绍下重绘和回流（Repaint & Reflow），以及如何进行优化](https://github.com/qappleh/Web-Daily-Question/issues/26) 69 | 70 | 讨论与参考答案：[第24题](https://github.com/qappleh/Web-Daily-Question/issues/26) 71 | 72 | 73 | >[第203题(2020-04-28)：响应式背后的浏览器原理你知道吗？（阿里）](https://github.com/qappleh/Web-Daily-Question/issues/205) 74 | 75 | 讨论与参考答案：[第205题](https://github.com/qappleh/Web-Daily-Question/issues/205) 76 | 77 | 78 | >[第220题(2020-05-25)：flex: 0 1 auto 表示什么意思?(拼多多）](https://github.com/qappleh/Web-Daily-Question/issues/222) 79 | 80 | 讨论与参考答案：[第220题](https://github.com/qappleh/Web-Daily-Question/issues/222) 81 | 82 | 83 | ### javaScript 84 | 85 | >[第1题(2019-07-22) 以下代码会输出什么?](https://github.com/qappleh/Web-Daily-Question/issues/3) 86 | 87 | 讨论与参考答案：[第1题](https://github.com/qappleh/Web-Daily-Question/issues/3) 88 | 89 | 90 | >[第2题(2019-07-23)：a在什么情况下，控制台会输出hello world（答案不唯一）](https://github.com/qappleh/Web-Daily-Question/issues/4) 91 | 92 | 讨论与参考答案：[第2题](https://github.com/qappleh/Web-Daily-Question/issues/4) 93 | 94 | 95 | >[第3题(2019-07-24)：请使用原型链相关知识实现b继承n=1;c继承n=2;m=3](https://github.com/qappleh/Web-Daily-Question/issues/5) 96 | 97 | 讨论与参考答案：[第3题](https://github.com/qappleh/Web-Daily-Question/issues/5) 98 | 99 | 100 | >[第4题(2019-07-25) 以下代码输出什么？](https://github.com/qappleh/Web-Daily-Question/issues/6) 101 | 102 | 讨论与参考答案：[第4题](https://github.com/qappleh/Web-Daily-Question/issues/6) 103 | 104 | 105 | >[第5题(2019-07-26) 已知以下数组： 编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序并且不重复的数组 ](https://github.com/qappleh/Web-Daily-Question/issues/7) 106 | 107 | 讨论与参考答案：[第5题](https://github.com/qappleh/Web-Daily-Question/issues/7) 108 | 109 | 110 | >[第6题(2019-07-29)：实现一个函数add,满足下列输出结果](https://github.com/qappleh/Web-Daily-Question/issues/8) 111 | 112 | 讨论与参考答案：[第6题](https://github.com/qappleh/Web-Daily-Question/issues/8) 113 | 114 | 115 | >[第7题(2019-07-30)：以下代码会输出什么？](https://github.com/qappleh/Web-Daily-Question/issues/9) 116 | 117 | 讨论与参考答案：[第7题](https://github.com/qappleh/Web-Daily-Question/issues/9) 118 | 119 | 120 | >[第10题(2019-08-02)：输出以下代码运行结果](https://github.com/qappleh/Web-Daily-Question/issues/12) 121 | 122 | 讨论与参考答案：[第10题](https://github.com/qappleh/Web-Daily-Question/issues/12) 123 | 124 | 125 | >[第12题（2019-08-6）：编程题，根据以下要求，写一个数组去重函数](https://github.com/qappleh/Web-Daily-Question/issues/14) 126 | 127 | 讨论与参考答案：[第12题](https://github.com/qappleh/Web-Daily-Question/issues/14) 128 | 129 | 130 | >[第13题（2019-08-7）：为什么for循环嵌套顺序会影响性能?](https://github.com/qappleh/Web-Daily-Question/issues/15) 131 | 132 | 讨论与参考答案：[第13题](https://github.com/qappleh/Web-Daily-Question/issues/15) 133 | 134 | 135 | >[第14题（2019-08-8）：统计 1 ~ n 整数中出现 1 的次数](https://github.com/qappleh/Web-Daily-Question/issues/16) 136 | 137 | 讨论与参考答案：[第14题](https://github.com/qappleh/Web-Daily-Question/issues/16) 138 | 139 | 140 | >[第15题(2019-08-09)：修改以下 print 函数，使之输出 0 到 99，或者 99 到 0 ](https://github.com/qappleh/Web-Daily-Question/issues/17) 141 | 142 | 讨论与参考答案：[第15题](https://github.com/qappleh/Web-Daily-Question/issues/17) 143 | 144 | 145 | >[第18题(2019-08-14)：实现一个 sleep 函数，比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现](https://github.com/qappleh/Web-Daily-Question/issues/19) 146 | 147 | 讨论与参考答案：[第18题](https://github.com/qappleh/Web-Daily-Question/issues/19) 148 | 149 | 150 | >[第20题(2019-08-16)：下面代码中 a 在什么情况下会打印 1？](https://github.com/qappleh/Web-Daily-Question/issues/22) 151 | 152 | 讨论与参考答案：[第20题](https://github.com/qappleh/Web-Daily-Question/issues/22) 153 | 154 | 155 | >[第21题(2019-08-19)：vue 是如何对数组方法进行变异的？例如 push、pop、splice 等方法](https://github.com/qappleh/Web-Daily-Question/issues/23) 156 | 157 | 讨论与参考答案：[第21题](https://github.com/qappleh/Web-Daily-Question/issues/23) 158 | 159 | 160 | >[第22题(2019-08-20)：：ES5/ES6 的继承除了写法以外还有什么区别？](https://github.com/qappleh/Web-Daily-Question/issues/24) 161 | 162 | 讨论与参考答案：[第22题](https://github.com/qappleh/Web-Daily-Question/issues/24) 163 | 164 | 165 | >[第23题(2019-08-21)：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景 ](https://github.com/qappleh/Web-Daily-Question/issues/25) 166 | 167 | 讨论与参考答案：[第23题](https://github.com/qappleh/Web-Daily-Question/issues/25) 168 | 169 | >[第25题(2019-08-23)：有以下 3 个判断数组的方法，Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()，请分别介绍它们之间的区别和优劣](https://github.com/qappleh/Web-Daily-Question/issues/27) 170 | 171 | 讨论与参考答案：[第25题](https://github.com/qappleh/Web-Daily-Question/issues/27) 172 | 173 | 174 | >[第26题(2019-08-26)：输出以下代码执行结果](https://github.com/qappleh/Web-Daily-Question/issues/28) 175 | 176 | 讨论与参考答案：[第26题](https://github.com/qappleh/Web-Daily-Question/issues/28) 177 | 178 | 179 | >[第29题(2019-08-29)：什么是防抖和节流？有什么区别？如何实现？](https://github.com/qappleh/Web-Daily-Question/issues/31) 180 | 181 | 讨论与参考答案：[第29题](https://github.com/qappleh/Web-Daily-Question/issues/31) 182 | 183 | 184 | >[第30题(2019-08-30)：如何将 [{id: 1}, {id: 2, pId: 1}, ...] 的重复数组（有重复数据）转成树形结构的数组 [{id: 1, child: [{id: 2, pId: 1}]}, ...] （需要去重）](https://github.com/qappleh/Web-Daily-Question/issues/32) 185 | 186 | 讨论与参考答案：[第30题](https://github.com/qappleh/Web-Daily-Question/issues/32) 187 | 188 | 189 | >[第31题(2019-09-02)：介绍下 Set、Map、WeakSet 和 WeakMap 的区别？](https://github.com/qappleh/Web-Daily-Question/issues/33) 190 | 191 | 讨论与参考答案：[第31题](https://github.com/qappleh/Web-Daily-Question/issues/33) 192 | 193 | 194 | >[第32题(2019-09-03)：考察作用域的一道代码题](https://github.com/qappleh/Web-Daily-Question/issues/34) 195 | 196 | 讨论与参考答案：[第32题](https://github.com/qappleh/Web-Daily-Question/issues/34) 197 | 198 | 199 | >[第34题(2019-09-05)：请把俩个数组 [A1, A2, B1, B2, C1, C2, D1, D2] 和 [A, B, C, D]，合并为 [A1, A2, A, B1, B2, B, C1, C2, C, D1, D2, D]](https://github.com/qappleh/Web-Daily-Question/issues/36) 200 | 201 | 讨论与参考答案：[第34题](https://github.com/qappleh/Web-Daily-Question/issues/36) 202 | 203 | 204 | >[第35题(2019-09-06)：使用迭代的方式实现 flatten 函数](https://github.com/qappleh/Web-Daily-Question/issues/37) 205 | 206 | 讨论与参考答案：[第35题](https://github.com/qappleh/Web-Daily-Question/issues/37) 207 | 208 | 209 | >[第36题(2019-09-09)：改造下面的代码，使之输出0 - 9，写出你能想到的所有解法](https://github.com/qappleh/Web-Daily-Question/issues/38) 210 | 211 | 讨论与参考答案：[第36题](https://github.com/qappleh/Web-Daily-Question/issues/38) 212 | 213 | 214 | >[第52题(2019-10-08)：谈谈你对事件委托(代理)的理解及它们的使用场景](https://github.com/qappleh/Web-Daily-Question/issues/54) 215 | 216 | 讨论与参考答案：[第52题](https://github.com/qappleh/Web-Daily-Question/issues/54) 217 | 218 | >[第53题(2019-10-09)：谈谈你对闭包的理解、优缺点及使用场景](https://github.com/qappleh/Web-Daily-Question/issues/55) 219 | 220 | 讨论与参考答案：[第53题](https://github.com/qappleh/Web-Daily-Question/issues/55) 221 | 222 | 223 | >[第54题(2019-10-10)：实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制 ](https://github.com/qappleh/Web-Daily-Question/issues/56) 224 | 225 | 讨论与参考答案：[第54题](https://github.com/qappleh/Web-Daily-Question/issues/56) 226 | 227 | 228 | >[第55题(2019-10-11)：在Javascript中什么是伪数组？如何将伪数组转化为标准数组？](https://github.com/qappleh/Web-Daily-Question/issues/57) 229 | 230 | 讨论与参考答案：[第55题](https://github.com/qappleh/Web-Daily-Question/issues/57) 231 | 232 | 233 | >[第56题(2019-10-12)：对作用域上下文和this的理解，看下列代码：](https://github.com/qappleh/Web-Daily-Question/issues/58) 234 | 235 | 讨论与参考答案：[第56题](https://github.com/qappleh/Web-Daily-Question/issues/58) 236 | 237 | 238 | >[第57题(2019-10-14)：编写一个 JavaScript 函数，输入指定类型的选择器 ( 仅需支持 id ， class ，tagName 三种简单 CSS 选择器，无需兼容组合选择器 ) 可以返回匹配的 DOM 节点，需考虑浏览器兼容性和性能。](https://github.com/qappleh/Web-Daily-Question/issues/59) 239 | 240 | 讨论与参考答案：[第57题](https://github.com/qappleh/Web-Daily-Question/issues/59) 241 | 242 | 243 | >[第58题(2019-10-15)：定义一个log方法，让它 244 | -------------------------------------------------------------------------------- /CSS/css常用动画.css: -------------------------------------------------------------------------------- 1 | /* animation */ 2 | .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} 3 | .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;} 4 | .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;} 5 | /* 淡入 */ 6 | .a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;} 7 | /* 淡入-从上 */ 8 | .a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;} 9 | /* 淡入-从右 */ 10 | .a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;} 11 | /* 淡入-从下 */ 12 | .a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;} 13 | /* 淡入-从左 */ 14 | .a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;} 15 | /* 淡出 */ 16 | .a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;} 17 | /* 淡出-向上 */ 18 | .a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;} 19 | /* 淡出-向右 */ 20 | .a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;} 21 | /* 淡出-向下 */ 22 | .a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;} 23 | /* 淡出-向左 */ 24 | .a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;} 25 | /* 弹跳 */ 26 | .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;} 27 | /* 弹入 */ 28 | .a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;} 29 | /* 弹入-从上 */ 30 | .a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;} 31 | /* 弹入-从右 */ 32 | .a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;} 33 | /* 弹入-从下 */ 34 | .a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;} 35 | /* 弹入-从左 */ 36 | .a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;} 37 | /* 弹出 */ 38 | .a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;} 39 | /* 弹出-向上 */ 40 | .a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;} 41 | /* 弹出-向右 */ 42 | .a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;} 43 | /* 弹出-向下 */ 44 | .a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;} 45 | /* 弹出-向左 */ 46 | .a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;} 47 | /* 转入 */ 48 | .a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;} 49 | /* 转入-从左上 */ 50 | .a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;} 51 | /* 转入-从左下 */ 52 | .a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;} 53 | /* 转入-从右上 */ 54 | .a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;} 55 | /* 转入-从右下*/ 56 | .a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;} 57 | /* 转出 */ 58 | .a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;} 59 | /* 转出-向左上 */ 60 | .a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;} 61 | /* 转出-向左下 */ 62 | .a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;} 63 | /* 转出-向右上 */ 64 | .a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;} 65 | /* 转出-向右下 */ 66 | .a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;} 67 | /* 翻转 */ 68 | .a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;} 69 | /* 翻入-X轴 */ 70 | .a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;} 71 | /* 翻入-Y轴 */ 72 | .a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;} 73 | /* 翻出-X轴 */ 74 | .a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;} 75 | /* 翻出-Y轴 */ 76 | .a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;} 77 | /* 闪烁 */ 78 | .a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;} 79 | /* 震颤 */ 80 | .a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;} 81 | /* 摇摆 */ 82 | .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;} 83 | /* 摇晃 */ 84 | .a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;} 85 | /* 震铃 */ 86 | .a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;} 87 | /* define */ 88 | /* 淡入 */ 89 | @-webkit-keyframes fadein{ 90 | 0%{opacity:0;} 91 | 100%{opacity:1;} 92 | } 93 | @-moz-keyframes fadein{ 94 | 0%{opacity:0;} 95 | 100%{opacity:1;} 96 | } 97 | @-ms-keyframes fadein{ 98 | 0%{opacity:0;} 99 | 100%{opacity:1;} 100 | } 101 | @keyframes fadein{ 102 | 0%{opacity:0;} 103 | 100%{opacity:1;} 104 | } 105 | /* 淡入-从上 */ 106 | @-webkit-keyframes fadeinT{ 107 | 0%{opacity:0;-webkit-transform:translateY(-100px);} 108 | 100%{opacity:1;-webkit-transform:translateY(0);} 109 | } 110 | @-moz-keyframes fadeinT{ 111 | 0%{opacity:0;-moz-transform:translateY(-100px);} 112 | 100%{opacity:1;-moz-transform:translateY(0);} 113 | } 114 | @-ms-keyframes fadeinT{ 115 | 0%{opacity:0;-ms-transform:translateY(-100px);} 116 | 100%{opacity:1;-ms-transform:translateY(0);} 117 | } 118 | @keyframes fadeinT{ 119 | 0%{opacity:0;transform:translateY(-100px);} 120 | 100%{opacity:1;transform:translateY(0);} 121 | } 122 | /* 淡入-从右 */ 123 | @-webkit-keyframes fadeinR{ 124 | 0%{opacity:0;-webkit-transform:translateX(100px);} 125 | 100%{opacity:1;-webkit-transform:translateX(0);} 126 | } 127 | @-moz-keyframes fadeinR{ 128 | 0%{opacity:0;-moz-transform:translateX(100px);} 129 | 100%{opacity:1;-moz-transform:translateX(0);} 130 | } 131 | @-ms-keyframes fadeinR{ 132 | 0%{opacity:0;-ms-transform:translateX(100px);} 133 | 100%{opacity:1;-ms-transform:translateX(0);} 134 | } 135 | @keyframes fadeinR{ 136 | 0%{opacity:0;transform:translateX(100px);} 137 | 100%{opacity:1;transform:translateX(0);} 138 | } 139 | /* 淡入-从下 */ 140 | @-webkit-keyframes fadeinB{ 141 | 0%{opacity:0;-webkit-transform:translateY(100px);} 142 | 100%{opacity:1;-webkit-transform:translateY(0);} 143 | } 144 | @-moz-keyframes fadeinB{ 145 | 0%{opacity:0;-moz-transform:translateY(100px);} 146 | 100%{opacity:1;-moz-transform:translateY(0);} 147 | } 148 | @-ms-keyframes fadeinB{ 149 | 0%{opacity:0;-ms-transform:translateY(100px);} 150 | 100%{opacity:1;-ms-transform:translateY(0);} 151 | } 152 | @keyframes fadeinB{ 153 | 0%{opacity:0;transform:translateY(100px);} 154 | 100%{opacity:1;transform:translateY(0);} 155 | } 156 | /* 淡入-从左 */ 157 | @-webkit-keyframes fadeinL{ 158 | 0%{opacity:0;-webkit-transform:translateX(-100px);} 159 | 100%{opacity:1;-webkit-transform:translateX(0);} 160 | } 161 | @-moz-keyframes fadeinL{ 162 | 0%{opacity:0;-moz-transform:translateX(-100px);} 163 | 100%{opacity:1;-moz-transform:translateX(0);} 164 | } 165 | @-ms-keyframes fadeinL{ 166 | 0%{opacity:0;-ms-transform:translateX(-100px);} 167 | 100%{opacity:1;-ms-transform:translateX(0);} 168 | } 169 | @keyframes fadeinL{ 170 | 0%{opacity:0;transform:translateX(-100px);} 171 | 100%{opacity:1;transform:translateX(0);} 172 | } 173 | /* 淡出 */ 174 | @-webkit-keyframes fadeout{ 175 | 0%{opacity:1;} 176 | 100%{opacity:0;} 177 | } 178 | @-moz-keyframes fadeout{ 179 | 0%{opacity:1;} 180 | 100%{opacity:0;} 181 | } 182 | @-ms-keyframes fadeout{ 183 | 0%{opacity:1;} 184 | 100%{opacity:0;} 185 | } 186 | @keyframes fadeout{ 187 | 0%{opacity:1;} 188 | 100%{opacity:0;} 189 | } 190 | /* 淡出-向上 */ 191 | @-webkit-keyframes fadeoutT{ 192 | 0%{opacity:1;-webkit-transform:translateY(0);} 193 | 100%{opacity:0;-webkit-transform:translateY(-100px);} 194 | } 195 | @-moz-keyframes fadeoutT{ 196 | 0%{opacity:1;-moz-transform:translateY(0);} 197 | 100%{opacity:0;-moz-transform:translateY(-100px);} 198 | } 199 | @-ms-keyframes fadeoutT{ 200 | 0%{opacity:1;-ms-transform:translateY(0);} 201 | 100%{opacity:0;-ms-transform:translateY(-100px);} 202 | } 203 | @keyframes fadeoutT{ 204 | 0%{opacity:1;transform:translateY(0);} 205 | 100%{opacity:0;transform:translateY(-100px);} 206 | } 207 | /* 淡出-向右 */ 208 | @-webkit-keyframes fadeoutR{ 209 | 0%{opacity:1;-webkit-transform:translateX(0);} 210 | 100%{opacity:0;-webkit-transform:translateX(100px);} 211 | } 212 | @-moz-keyframes fadeoutR{ 213 | 0%{opacity:1;-moz-transform:translateX(0);} 214 | 100%{opacity:0;-moz-transform:translateX(100px);} 215 | } 216 | @-ms-keyframes fadeoutR{ 217 | 0%{opacity:1;-ms-transform:translateX(0);} 218 | 100%{opacity:0;-ms-transform:translateX(100px);} 219 | } 220 | @keyframes fadeoutR{ 221 | 0%{opacity:1;transform:translateX(0);} 222 | 100%{opacity:0;transform:translateX(100px);} 223 | } 224 | /* 淡出-向下 */ 225 | @-webkit-keyframes fadeoutB{ 226 | 0%{opacity:1;-webkit-transform:translateY(0);} 227 | 100%{opacity:0;-webkit-transform:translateY(100px);} 228 | } 229 | @-moz-keyframes fadeoutB{ 230 | 0%{opacity:1;-moz-transform:translateY(0);} 231 | 100%{opacity:0;-moz-transform:translateY(100px);} 232 | } 233 | @-ms-keyframes fadeoutB{ 234 | 0%{opacity:1;-ms-transform:translateY(0);} 235 | 100%{opacity:0;-ms-transform:translateY(100px);} 236 | } 237 | @keyframes fadeoutB{ 238 | 0%{opacity:1;transform:translateY(0);} 239 | 100%{opacity:0;transform:translateY(100px);} 240 | } 241 | /* 淡出-向左 */ 242 | @-webkit-keyframes fadeoutL{ 243 | 0%{opacity:1;-webkit-transform:translateX(0);} 244 | 100%{opacity:0;-webkit-transform:translateX(-100px);} 245 | } 246 | @-moz-keyframes fadeoutL{ 247 | 0%{opacity:1;-moz-transform:translateX(0);} 248 | 100%{opacity:0;-moz-transform:translateX(-100px);} 249 | } 250 | @-ms-keyframes fadeoutL{ 251 | 0%{opacity:1;-ms-transform:translateX(0);} 252 | 100%{opacity:0;-ms-transform:translateX(-100px);} 253 | } 254 | @keyframes fadeoutL{ 255 | 0%{opacity:1;transform:translateX(0);} 256 | 100%{opacity:0;transform:translateX(-100px);} 257 | } 258 | /* 弹跳 */ 259 | @-webkit-keyframes bounce{ 260 | 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 261 | 40%{-webkit-transform:translateY(-30px);} 262 | 60%{-webkit-transform:translateY(-15px);} 263 | } 264 | @-moz-keyframes bounce{ 265 | 0%,20%,50%,80%,100%{-moz-transform:translateY(0);} 266 | 40%{-moz-transform:translateY(-30px);} 267 | 60%{-moz-transform:translateY(-15px);} 268 | } 269 | @-ms-keyframes bounce{ 270 | 0%,20%,50%,80%,100%{-ms-transform:translateY(0);} 271 | 40%{-ms-transform:translateY(-30px);} 272 | 60%{-ms-transform:translateY(-15px);} 273 | } 274 | @keyframes bounce{ 275 | 0%,20%,50%,80%,100%{transform:translateY(0);} 276 | 40%{transform:translateY(-30px);} 277 | 60%{transform:translateY(-15px);} 278 | } 279 | /* 弹入 */ 280 | @-webkit-keyframes bouncein{ 281 | 0%{opacity:0;-webkit-transform:scale(0.3);} 282 | 50%{opacity:1;-webkit-transform:scale(1.05);} 283 | 70%{-webkit-transform:scale(0.9);} 284 | 100%{-webkit-transform:scale(1);} 285 | } 286 | @-moz-keyframes bouncein{ 287 | 0%{opacity:0;-moz-transform:scale(0.3);} 288 | 50%{opacity:1;-moz-transform:scale(1.05);} 289 | 70%{-moz-transform:scale(0.9);} 290 | 100%{-moz-transform:scale(1);} 291 | } 292 | @-ms-keyframes bouncein{ 293 | 0%{opacity:0;-ms-transform:scale(0.3);} 294 | 50%{opacity:1;-ms-transform:scale(1.05);} 295 | 70%{-ms-transform:scale(0.9);} 296 | 100%{-ms-transform:scale(1);} 297 | } 298 | @keyframes bouncein{ 299 | 0%{opacity:0;transform:scale(0.3);} 300 | 50%{opacity:1;transform:scale(1.05);} 301 | 70%{transform:scale(0.9);} 302 | 100%{transform:scale(1);} 303 | } 304 | /* 弹入-从上 */ 305 | @-webkit-keyframes bounceinT{ 306 | 0%{opacity:0;-webkit-transform:translateY(-100px);} 307 | 60%{opacity:1;-webkit-transform:translateY(30px);} 308 | 80%{-webkit-transform:translateY(-10px);} 309 | 100%{-webkit-transform:translateY(0);} 310 | } 311 | @-moz-keyframes bounceinT{ 312 | 0%{opacity:0;-moz-transform:translateY(-100px);} 313 | 60%{opacity:1;-moz-transform:translateY(30px);} 314 | 80%{-moz-transform:translateY(-10px);} 315 | 100%{-moz-transform:translateY(0);} 316 | } 317 | @-ms-keyframes bounceinT{ 318 | 0%{opacity:0;-ms-transform:translateY(-100px);} 319 | 60%{opacity:1;-ms-transform:translateY(30px);} 320 | 80%{-ms-transform:translateY(-10px);} 321 | 100%{-ms-transform:translateY(0);} 322 | } 323 | @keyframes bounceinT{ 324 | 0%{opacity:0;transform:translateY(-100px);} 325 | 60%{opacity:1;transform:translateY(30px);} 326 | 80%{transform:translateY(-10px);} 327 | 100%{transform:translateY(0);} 328 | } 329 | /* 弹入-从右 */ 330 | @-webkit-keyframes bounceinR{ 331 | 0%{opacity:0;-webkit-transform:translateX(100px);} 332 | 60%{opacity:1;-webkit-transform:translateX(-30px);} 333 | 80%{-webkit-transform:translateX(10px);} 334 | 100%{-webkit-transform:translateX(0);} 335 | } 336 | @-moz-keyframes bounceinR{ 337 | 0%{opacity:0;-moz-transform:translateX(100px);} 338 | 60%{opacity:1;-moz-transform:translateX(-30px);} 339 | 80%{-moz-transform:translateX(10px);} 340 | 100%{-moz-transform:translateX(0);} 341 | } 342 | @-ms-keyframes bounceinR{ 343 | 0%{opacity:0;-ms-transform:translateX(100px);} 344 | 60%{opacity:1;-ms-transform:translateX(-30px);} 345 | 80%{-ms-transform:translateX(10px);} 346 | 100%{-ms-transform:translateX(0);} 347 | } 348 | @keyframes bounceinR{ 349 | 0%{opacity:0;transform:translateX(100px);} 350 | 60%{opacity:1;transform:translateX(-30px);} 351 | 80%{transform:translateX(10px);} 352 | 100%{transform:translateX(0);} 353 | } 354 | /* 弹入-从下 */ 355 | @-webkit-keyframes bounceinB{ 356 | 0%{opacity:0;-webkit-transform:translateY(100px);} 357 | 60%{opacity:1;-webkit-transform:translateY(-30px);} 358 | 80%{-webkit-transform:translateY(10px);} 359 | 100%{-webkit-transform:translateY(0);} 360 | } 361 | @-moz-keyframes bounceinB{ 362 | 0%{opacity:0;-moz-transform:translateY(100px);} 363 | 60%{opacity:1;-moz-transform:translateY(-30px);} 364 | 80%{-moz-transform:translateY(10px);} 365 | 100%{-moz-transform:translateY(0);} 366 | } 367 | @-ms-keyframes bounceinB{ 368 | 0%{opacity:0;-ms-transform:translateY(100px);} 369 | 60%{opacity:1;-ms-transform:translateY(-30px);} 370 | 80%{-ms-transform:translateY(10px);} 371 | 100%{-ms-transform:translateY(0);} 372 | } 373 | @keyframes bounceinB{ 374 | 0%{opacity:0;transform:translateY(100px);} 375 | 60%{opacity:1;transform:translateY(-30px);} 376 | 80%{transform:translateY(10px);} 377 | 100%{transform:translateY(0);} 378 | } 379 | /* 弹入-从左 */ 380 | @-webkit-keyframes bounceinL{ 381 | 0%{opacity:0;-webkit-transform:translateX(-100px);} 382 | 60%{opacity:1;-webkit-transform:translateX(30px);} 383 | 80%{-webkit-transform:translateX(-10px);} 384 | 100%{-webkit-transform:translateX(0);} 385 | } 386 | @-moz-keyframes bounceinL{ 387 | 0%{opacity:0;-moz-transform:translateX(-100px);} 388 | 60%{opacity:1;-moz-transform:translateX(30px);} 389 | 80%{-moz-transform:translateX(-10px);} 390 | 100%{-moz-transform:translateX(0);} 391 | } 392 | @-ms-keyframes bounceinL{ 393 | 0%{opacity:0;-ms-transform:translateX(-100px);} 394 | 60%{opacity:1;-ms-transform:translateX(30px);} 395 | 80%{-ms-transform:translateX(-10px);} 396 | 100%{-ms-transform:translateX(0);} 397 | } 398 | @keyframes bounceinL{ 399 | 0%{opacity:0;transform:translateX(-100px);} 400 | 60%{opacity:1;transform:translateX(30px);} 401 | 80%{transform:translateX(-10px);} 402 | 100%{transform:translateX(0);} 403 | } 404 | /* 弹出 */ 405 | @-webkit-keyframes bounceout{ 406 | 0%{-webkit-transform:scale(1);} 407 | 25%{-webkit-transform:scale(0.95);} 408 | 50%{opacity:1;-webkit-transform:scale(1.1);} 409 | 100%{opacity:0;-webkit-transform:scale(0.3);} 410 | } 411 | @-moz-keyframes bounceout{ 412 | 0%{-moz-transform:scale(1);} 413 | 25%{-moz-transform:scale(0.95);} 414 | 50%{opacity:1;-moz-transform:scale(1.1);} 415 | 100%{opacity:0;-moz-transform:scale(0.3);} 416 | } 417 | @-ms-keyframes bounceout{ 418 | 0%{-ms-transform:scale(1);} 419 | 25%{-ms-transform:scale(0.95);} 420 | 50%{opacity:1;-ms-transform:scale(1.1);} 421 | 100%{opacity:0;-ms-transform:scale(0.3);} 422 | } 423 | @keyframes bounceout{ 424 | 0%{transform:scale(1);} 425 | 25%{transform:scale(0.95);} 426 | 50%{opacity:1;transform:scale(1.1);} 427 | 100%{opacity:0;transform:scale(0.3);} 428 | } 429 | /* 弹出-向上*/ 430 | @-webkit-keyframes bounceoutT{ 431 | 0%{-webkit-transform:translateY(0);} 432 | 20%{opacity:1;-webkit-transform:translateY(20px);} 433 | 100%{opacity:0;-webkit-transform:translateY(-100px);} 434 | } 435 | @-moz-keyframes bounceoutT{ 436 | 0%{-moz-transform:translateY(0);} 437 | 20%{opacity:1;-moz-transform:translateY(20px);} 438 | 100%{opacity:0;-moz-transform:translateY(-100px);} 439 | } 440 | @-ms-keyframes bounceoutT{ 441 | 0%{-ms-transform:translateY(0);} 442 | 20%{opacity:1;-ms-transform:translateY(20px);} 443 | 100%{opacity:0;-ms-transform:translateY(-100px);} 444 | } 445 | @keyframes bounceoutT{ 446 | 0%{transform:translateY(0);} 447 | 20%{opacity:1;transform:translateY(20px);} 448 | 100%{opacity:0;transform:translateY(-100px);} 449 | } 450 | /* 弹出-向右*/ 451 | @-webkit-keyframes bounceoutR{ 452 | 0%{-webkit-transform:translateX(0);} 453 | 20%{opacity:1;-webkit-transform:translateX(-20px);} 454 | 100%{opacity:0;-webkit-transform:translateX(100px);} 455 | } 456 | @-moz-keyframes bounceoutR{ 457 | 0%{-moz-transform:translateX(0);} 458 | 20%{opacity:1;-moz-transform:translateX(-20px);} 459 | 100%{opacity:0;-moz-transform:translateX(100px);} 460 | } 461 | @-ms-keyframes bounceoutR{ 462 | 0%{-ms-transform:translateX(0);} 463 | 20%{opacity:1;-ms-transform:translateX(-20px);} 464 | 100%{opacity:0;-ms-transform:translateX(100px);} 465 | } 466 | @keyframes bounceoutR{ 467 | 0%{transform:translateX(0);} 468 | 20%{opacity:1;transform:translateX(-20px);} 469 | 100%{opacity:0;transform:translateX(100px);} 470 | } 471 | /* 弹出-向下 */ 472 | @-webkit-keyframes bounceoutB{ 473 | 0%{-webkit-transform:translateY(0);} 474 | 20%{opacity:1;-webkit-transform:translateY(-20px);} 475 | 100%{opacity:0;-webkit-transform:translateY(100px);} 476 | } 477 | @-moz-keyframes bounceoutB{ 478 | 0%{-moz-transform:translateY(0);} 479 | 20%{opacity:1;-moz-transform:translateY(-20px);} 480 | 100%{opacity:0;-moz-transform:translateY(100px);} 481 | } 482 | @-ms-keyframes bounceoutB{ 483 | 0%{-ms-transform:translateY(0);} 484 | 20%{opacity:1;-ms-transform:translateY(-20px);} 485 | 100%{opacity:0;-ms-transform:translateY(100px);} 486 | } 487 | @keyframes bounceoutB{ 488 | 0%{transform:translateY(0);} 489 | 20%{opacity:1;transform:translateY(-20px);} 490 | 100%{opacity:0;transform:translateY(100px);} 491 | } 492 | /* 弹出-向左 */ 493 | @-webkit-keyframes bounceoutL{ 494 | 0%{-webkit-transform:translateX(0);} 495 | 20%{opacity:1;-webkit-transform:translateX(20px);} 496 | 100%{opacity:0;-webkit-transform:translateX(-100px);} 497 | } 498 | @-moz-keyframes bounceoutL{ 499 | 0%{-moz-transform:translateX(0);} 500 | 20%{opacity:1;-moz-transform:translateX(20px);} 501 | 100%{opacity:0;-moz-transform:translateX(-100px);} 502 | } 503 | @-ms-keyframes bounceoutL{ 504 | 0%{-ms-transform:translateX(0);} 505 | 20%{opacity:1;-ms-transform:translateX(20px);} 506 | 100%{opacity:0;-ms-transform:translateX(-100px);} 507 | } 508 | @keyframes bounceoutL{ 509 | 0%{transform:translateX(0);} 510 | 20%{opacity:1;transform:translateX(20px);} 511 | 100%{opacity:0;transform:translateX(-200px);} 512 | } 513 | /* 转入 */ 514 | @-webkit-keyframes rotatein{ 515 | 0%{opacity:0;-webkit-transform:rotate(-200deg);} 516 | 100%{opacity:1;-webkit-transform:rotate(0);} 517 | } 518 | @-moz-keyframes rotatein{ 519 | 0%{opacity:0;-moz-transform:rotate(-200deg);} 520 | 100%{opacity:1;-moz-transform:rotate(0);} 521 | } 522 | @-ms-keyframes rotatein{ 523 | 0%{opacity:0;-ms-transform:rotate(-200deg);} 524 | 100%{opacity:1;-ms-transform:rotate(0);} 525 | } 526 | @keyframes rotatein{ 527 | 0%{opacity:0;transform:rotate(-200deg);} 528 | 100%{opacity:1;transform:rotate(0);} 529 | } 530 | /* 转入-从左上 */ 531 | @-webkit-keyframes rotateinLT{ 532 | 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} 533 | 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 534 | } 535 | @-moz-keyframes rotateinLT{ 536 | 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} 537 | 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 538 | } 539 | @-ms-keyframes rotateinLT{ 540 | 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} 541 | 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 542 | } 543 | @keyframes rotateinLT{ 544 | 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 545 | 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 546 | } 547 | /* 转入-从左下 */ 548 | @-webkit-keyframes rotateineftB{ 549 | 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} 550 | 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 551 | } 552 | @-moz-keyframes rotateineftB{ 553 | 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} 554 | 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 555 | } 556 | @-ms-keyframes rotateineftB{ 557 | 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} 558 | 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 559 | } 560 | @keyframes rotateineftB{ 561 | 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 562 | 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 563 | } 564 | /* 转入-从右上 */ 565 | @-webkit-keyframes rotateinRT{ 566 | 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} 567 | 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 568 | } 569 | @-moz-keyframes rotateinRT{ 570 | 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} 571 | 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 572 | } 573 | @-ms-keyframes rotateinRT{ 574 | 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} 575 | 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 576 | } 577 | @keyframes rotateinRT{ 578 | 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 579 | 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 580 | } 581 | /* 转入-从右下*/ 582 | @-webkit-keyframes rotateinRB{ 583 | 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} 584 | 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 585 | } 586 | @-moz-keyframes rotateinRB{ 587 | 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} 588 | 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 589 | } 590 | @-ms-keyframes rotateinRB{ 591 | 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} 592 | 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 593 | } 594 | @keyframes rotateinRB{ 595 | 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 596 | 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 597 | } 598 | /* 转出 */ 599 | @-webkit-keyframes rotateout{ 600 | 0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;} 601 | 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;} 602 | } 603 | @-moz-keyframes rotateout{ 604 | 0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;} 605 | 100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;} 606 | } 607 | @-ms-keyframes rotateout{ 608 | 0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;} 609 | 100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;} 610 | } 611 | @keyframes rotateout{ 612 | 0%{transform-origin:center center;transform:rotate(0);opacity:1;} 613 | 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;} 614 | } 615 | /* 转出-向左上 */ 616 | @-webkit-keyframes rotateoutLT{ 617 | 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 618 | 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} 619 | } 620 | @-moz-keyframes rotateoutLT{ 621 | 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 622 | 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} 623 | } 624 | @-ms-keyframes rotateoutLT{ 625 | 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 626 | 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} 627 | } 628 | @keyframes rotateoutLT{ 629 | 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 630 | 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 631 | } 632 | /* 转出-向左下 */ 633 | @-webkit-keyframes rotateoutLB{ 634 | 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 635 | 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} 636 | } 637 | @-moz-keyframes rotateoutLB{ 638 | 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 639 | 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} 640 | } 641 | @-ms-keyframes rotateoutLB{ 642 | 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 643 | 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} 644 | } 645 | @keyframes rotateoutLB{ 646 | 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 647 | 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 648 | } 649 | /* 转出-向右上 */ 650 | @-webkit-keyframes rotateoutRT{ 651 | 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 652 | 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} 653 | } 654 | @-moz-keyframes rotateoutRT{ 655 | 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 656 | 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} 657 | } 658 | @-ms-keyframes rotateoutRT{ 659 | 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 660 | 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} 661 | } 662 | @keyframes rotateoutRT{ 663 | 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 664 | 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 665 | } 666 | /* 转出-向右下 */ 667 | @-webkit-keyframes rotateoutBR{ 668 | 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 669 | 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} 670 | } 671 | @-moz-keyframes rotateoutBR{ 672 | 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 673 | 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} 674 | } 675 | @-ms-keyframes rotateoutBR{ 676 | 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 677 | 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} 678 | } 679 | @keyframes rotateoutBR{ 680 | 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 681 | 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 682 | } 683 | /* 翻转 */ 684 | @-webkit-keyframes flip{ 685 | 0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;} 686 | 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;} 687 | 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;} 688 | 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;} 689 | 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;} 690 | } 691 | @-moz-keyframes flip{ 692 | 0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;} 693 | 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;} 694 | 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;} 695 | 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;} 696 | 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;} 697 | } 698 | @-ms-keyframes flip{ 699 | 0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;} 700 | 40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;} 701 | 50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;} 702 | 80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;} 703 | 100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;} 704 | } 705 | @keyframes flip{ 706 | 0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;} 707 | 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;} 708 | 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;} 709 | 80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;} 710 | 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;} 711 | } 712 | /* 翻入-X轴 */ 713 | @-webkit-keyframes flipinX{ 714 | 0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} 715 | 40%{-webkit-transform:perspective(400px) rotateX(-10deg);} 716 | 70%{-webkit-transform:perspective(400px) rotateX(10deg);} 717 | 100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} 718 | } 719 | @-moz-keyframes flipinX{ 720 | 0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} 721 | 40%{-moz-transform:perspective(400px) rotateX(-10deg);} 722 | 70%{-moz-transform:perspective(400px) rotateX(10deg);} 723 | 100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;} 724 | } 725 | @-ms-keyframes flipinX{ 726 | 0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} 727 | 40%{-ms-transform:perspective(400px) rotateX(-10deg);} 728 | 70%{-ms-transform:perspective(400px) rotateX(10deg);} 729 | 100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;} 730 | } 731 | @keyframes flipinX{ 732 | 0%{transform:perspective(400px) rotateX(90deg);opacity:0;} 733 | 40%{transform:perspective(400px) rotateX(-10deg);} 734 | 70%{transform:perspective(400px) rotateX(10deg);} 735 | 100%{transform:perspective(400px) rotateX(0);opacity:1;} 736 | } 737 | /* 翻入-Y轴 */ 738 | @-webkit-keyframes flipinY{ 739 | 0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} 740 | 40%{-webkit-transform:perspective(400px) rotateY(-10deg);} 741 | 70%{-webkit-transform:perspective(400px) rotateY(10deg);} 742 | 100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} 743 | } 744 | @-moz-keyframes flipinY{ 745 | 0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} 746 | 40%{-moz-transform:perspective(400px) rotateY(-10deg);} 747 | 70%{-moz-transform:perspective(400px) rotateY(10deg);} 748 | 100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;} 749 | } 750 | @-ms-keyframes flipinY{ 751 | 0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} 752 | 40%{-ms-transform:perspective(400px) rotateY(-10deg);} 753 | 70%{-ms-transform:perspective(400px) rotateY(10deg);} 754 | 100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;} 755 | } 756 | @keyframes flipinY{ 757 | 0%{transform:perspective(400px) rotateY(90deg);opacity:0;} 758 | 40%{transform:perspective(400px) rotateY(-10deg);} 759 | 70%{transform:perspective(400px) rotateY(10deg);} 760 | 100%{transform:perspective(400px) rotateY(0);opacity:1;} 761 | } 762 | /* 翻出-X轴 */ 763 | @-webkit-keyframes flipoutX{ 764 | 0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} 765 | 100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} 766 | } 767 | @-moz-keyframes flipoutX{ 768 | 0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;} 769 | 100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} 770 | } 771 | @-ms-keyframes flipoutX{ 772 | 0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;} 773 | 100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} 774 | } 775 | @keyframes flipoutX{ 776 | 0%{transform:perspective(400px) rotateX(0);opacity:1;} 777 | 100%{transform:perspective(400px) rotateX(90deg);opacity:0;} 778 | } 779 | /* 翻出-Y轴 */ 780 | @-webkit-keyframes flipoutY{ 781 | 0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} 782 | 100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} 783 | } 784 | @-moz-keyframes flipoutY{ 785 | 0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;} 786 | 100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} 787 | } 788 | @-ms-keyframes flipoutY{ 789 | 0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;} 790 | 100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} 791 | } 792 | @keyframes flipoutY{ 793 | 0%{transform:perspective(400px) rotateY(0);opacity:1;} 794 | 100%{transform:perspective(400px) rotateY(90deg);opacity:0;} 795 | } 796 | /* 闪烁 */ 797 | @-webkit-keyframes flash{ 798 | 0%,50%,100%{opacity:1;} 799 | 25%,75%{opacity:0;} 800 | } 801 | @-moz-keyframes flash{ 802 | 0%,50%,100%{opacity:1;} 803 | 25%,75%{opacity:0;} 804 | } 805 | @-ms-keyframes flash{ 806 | 0%,50%,100%{opacity:1;} 807 | 25%,75%{opacity:0;} 808 | } 809 | @keyframes flash{ 810 | 0%,50%,100%{opacity:1;} 811 | 25%,75%{opacity:0;} 812 | } 813 | /* 震颤 */ 814 | @-webkit-keyframes shake{ 815 | 0%,100%{-webkit-transform:translateX(0);} 816 | 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);} 817 | 20%,40%,60%,80%{-webkit-transform:translateX(10px);} 818 | } 819 | @-moz-keyframes shake{ 820 | 0%,100%{-moz-transform:translateX(0);} 821 | 10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);} 822 | 20%,40%,60%,80%{-moz-transform:translateX(10px);} 823 | } 824 | @-ms-keyframes shake{ 825 | 0%,100%{-ms-transform:translateX(0);} 826 | 10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);} 827 | 20%,40%,60%,80%{-ms-transform:translateX(10px);} 828 | } 829 | @keyframes shake{ 830 | 0%,100%{transform:translateX(0);} 831 | 10%,30%,50%,70%,90%{transform:translateX(-10px);} 832 | 20%,40%,60%,80%{transform:translateX(10px);} 833 | } 834 | /* 摇摆 */ 835 | @-webkit-keyframes swing{ 836 | 20%{-webkit-transform:rotate(15deg);} 837 | 40%{-webkit-transform:rotate(-10deg);} 838 | 60%{-webkit-transform:rotate(5deg);} 839 | 80%{-webkit-transform:rotate(-5deg);} 840 | 100%{-webkit-transform:rotate(0);} 841 | } 842 | @-moz-keyframes swing{ 843 | 20%{-moz-transform:rotate(15deg);} 844 | 40%{-moz-transform:rotate(-10deg);} 845 | 60%{-moz-transform:rotate(5deg);} 846 | 80%{-moz-transform:rotate(-5deg);} 847 | 100%{-moz-transform:rotate(0);} 848 | } 849 | @-ms-keyframes swing{ 850 | 20%{-ms-transform:rotate(15deg);} 851 | 40%{-ms-transform:rotate(-10deg);} 852 | 60%{-ms-transform:rotate(5deg);} 853 | 80%{-ms-transform:rotate(-5deg);} 854 | 100%{-ms-transform:rotate(0);} 855 | } 856 | @keyframes swing{ 857 | 20%{transform:rotate(15deg);} 858 | 40%{transform:rotate(-10deg);} 859 | 60%{transform:rotate(5deg);} 860 | 80%{transform:rotate(-5deg);} 861 | 100%{transform:rotate(0);} 862 | } 863 | /* 摇晃 */ 864 | @-webkit-keyframes wobble{ 865 | 0%{-webkit-transform:translateX(0);} 866 | 15%{-webkit-transform:translateX(-100px) rotate(-5deg);} 867 | 30%{-webkit-transform:translateX(80px) rotate(3deg);} 868 | 45%{-webkit-transform:translateX(-65px) rotate(-3deg);} 869 | 60%{-webkit-transform:translateX(40px) rotate(2deg);} 870 | 75%{-webkit-transform:translateX(-20px) rotate(-1deg);} 871 | 100%{-webkit-transform:translateX(0);} 872 | } 873 | @-moz-keyframes wobble{ 874 | 0%{-moz-transform:translateX(0);} 875 | 15%{-moz-transform:translateX(-100px) rotate(-5deg);} 876 | 30%{-moz-transform:translateX(80px) rotate(3deg);} 877 | 45%{-moz-transform:translateX(-65px) rotate(-3deg);} 878 | 60%{-moz-transform:translateX(40px) rotate(2deg);} 879 | 75%{-moz-transform:translateX(-20px) rotate(-1deg);} 880 | 100%{-moz-transform:translateX(0);} 881 | } 882 | @-ms-keyframes wobble{ 883 | 0%{-ms-transform:translateX(0);} 884 | 15%{-ms-transform:translateX(-100px) rotate(-5deg);} 885 | 30%{-ms-transform:translateX(80px) rotate(3deg);} 886 | 45%{-ms-transform:translateX(-65px) rotate(-3deg);} 887 | 60%{-ms-transform:translateX(40px) rotate(2deg);} 888 | 75%{-ms-transform:translateX(-20px) rotate(-1deg);} 889 | 100%{-ms-transform:translateX(0);} 890 | } 891 | @keyframes wobble{ 892 | 0%{transform:translateX(0);} 893 | 15%{transform:translateX(-100px) rotate(-5deg);} 894 | 30%{transform:translateX(80px) rotate(3deg);} 895 | 45%{transform:translateX(-65px) rotate(-3deg);} 896 | 60%{transform:translateX(40px) rotate(2deg);} 897 | 75%{transform:translateX(-20px) rotate(-1deg);} 898 | 100%{transform:translateX(0);} 899 | } 900 | /* 震铃 */ 901 | @-webkit-keyframes ring{ 902 | 0%{-webkit-transform:scale(1);} 903 | 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);} 904 | 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} 905 | 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} 906 | 100%{-webkit-transform:scale(1) rotate(0);} 907 | } 908 | @-moz-keyframes ring{ 909 | 0%{-moz-transform:scale(1);} 910 | 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 911 | 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} 912 | 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} 913 | 100%{-moz-transform:scale(1) rotate(0);} 914 | } 915 | @-ms-keyframes ring{ 916 | 0%{-ms-transform:scale(1);} 917 | 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);} 918 | 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} 919 | 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} 920 | 100%{-ms-transform:scale(1) rotate(0);} 921 | } 922 | @keyframes ring{ 923 | 0%{transform:scale(1);} 924 | 10%,20%{transform:scale(0.9) rotate(-3deg);} 925 | 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);} 926 | 40%,60%,80%{transform:scale(1.1) rotate(-3deg);} 927 | 100%{transform:scale(1) rotate(0);} 928 | } --------------------------------------------------------------------------------