用web制作简历

来源：互联网发布：dhc瘦腿丸瘦腿原理知乎编辑：程序博客网时间：2024/05/21 21:43

用前端语言来制作自己的简历，有点高大上哦(⊙o⊙)

首先是index.html

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /><title>关于 我</title><link rel="stylesheet" href="css/style.css" type="text/css" media="all" /></head><body class="loading-process"><div class="loading"><div class="loading-circle"></div><div class="loading-avatar"><img src="images/avatar@2x.jpg" alt="" width="100" height="100"></div><div class="loading-info">正在努力加载中...</div></div><div class="section-header"><div class="section"><nav class="nav" role="navigation"><ul><li class="nav-about fade fade1"><a href="#about">关于</a></li><li class="nav-works fade fade4"><a href="#works">作品</a></li><li class="fade back-home"><a href="#top">首页</a></li><li class="nav-skill fade fade2"><a href="#skill">能力</a></li><li class="nav-contact fade fade3"><a href="#contact">联系</a></li></ul></nav></div><div class="nav-bg"></div></div><div class="home-bg"><img src="images/home-bg.jpg" alt="" width="1000" height="667"></div><div class="section-wrap section-fristpage" data-slide="1"  ><div class="section"><div class="section-content"><p class="fade fade1">Hi，我是 赵小美Smile</p><p class="fade fade2">欢迎光临我的社区！</p><p class="fade fade3">想了解更多，往下滚动哦 ^_^</p></div><a class="button2 scroll-tip fade fade4" data-slide="3" title="">向下滚动</a></div></div><div id="about" data-slide="2" data-stellar-background-ratio="0.3" class="section-wrap section-about"><div class="section"><div class="about-content clearfix section-content"><div class="introli">  <span class="left_icon"><img class="bio-text bio-icon-1" src="images/bio-icon-1.png"></span>  <span class="right_content "><h2>前端编码小情节</h2></span></div><div class="introli">  <span class="left_icon"><img class="bio-text bio-icon-2" src="images/bio-icon-2.png" data-stellar-ratio="0.7" ></span>  <span class="right_content"><h2>自由，随时上班</h2></span></div><div class="introli">  <span class="left_icon"><img class="bio-text bio-icon-3" src="images/bio-icon-3.png" data-stellar-ratio="0.7" ></span>  <span class="right_content"><h2>前端开发小学生</h2></span></div></div></div><a class="button2 dark-button2 scroll-tip" style="background-position:0 -60px;" data-slide="3" title=""></a></div><div id="works" class="section-wrap section-works" data-slide="3" ><div class="section"><div class="works-content section-content"><h1>前端作品</h1><div class="works-list clearfix"><div class="works-item first fade fade1"><a href="#" target="_blank"><img src="images/works/yizaojia.jpg" alt="" width="300" height="180"><div class="work-info"><h2>喜欢我做的东西就关注我吧！</h2><p><strong>开发时间</strong>：2017年9月<br><strong>工作详情</strong>：框架设计及前端制作。</p></div></a></div><div class="works-item fade fade2"><a href="#/" target="_blank"><img src="images/works/91zaojia.jpg" alt="" width="300" height="180"><div class="work-info"><h2>喜欢我做的东西就关注我吧！</h2><p><strong>开发时间</strong>：2017年2月<br><strong>工作详情</strong>：页面设计及前端制作。</p></div></a></div><div class="works-item fade fade3"><a href="#/" target="_blank"><img src="images/works/wenku.jpg" alt="" width="300" height="180"><div class="work-info"><h2>喜欢我做的东西就关注我吧！</h2><p><strong>开发时间</strong>：2016年12月<br><strong>工作详情</strong>：页面设计及前端绑定和制作。</p></div></a></div><div class="works-item first fade fade4"><a href="#" target="_blank"><img src="images/works/shinedeliver.jpg" alt="" width="300" height="180"><div class="work-info"><h2>喜欢我做的东西就关注我吧！</h2><p><strong>开发时间</strong>：2016年11月<br><strong>工作详情</strong>：独立开发和制作。</p></div></a></div><div class="works-item fade fade2"><a><img src="images/works/wxshop.jpg" alt="" width="300" height="180"><div class="work-info"><h2>喜欢我做的东西就关注我吧！</h2><p><strong>开发时间</strong>：2014年05月<br><strong>工作详情</strong>：前端页面开发及绑定。</p></div></a></div></div><a class="more-link" href="page/product">查看更多</a></div><a class="button2 scroll-tip fade fade4" data-slide="4" title="">向下滚动</a></div></div><div id="skill" class="section-wrap section-skill" data-slide="4"><div class="section"><div class="skill-content section-content"><h1>相关技能</h1><ul><li class="fade fade1">熟练掌握语义化的 HTML 和具有兼容性的 CSS 模式，熟练手写符合 W3C 标准的结构和代码。</li><li class="fade fade3"></li><li class="fade fade2">对 HTML5 和 CSS3 有一定了解。</li><li class="fade fade4">熟练掌握 Sublime、Fireworks、SVN 团队协作工具。</li><li class="fade fade4">熟练掌握 jQuery，实现日常需要的交互效果。</li><li class="fade fade3">熟悉Vue，React，MySQl，有一定java 后端相关知识。</li><li class="fade fade2">了解 Ajax 工作原理和实现方法。</li><li class="fade fade2">英语四六级</li><li class="fade fade1">软件设计师中级</li><li class="fade fade4"></li><li class="fade fade2">喜欢接触新事物，有一定的自学能力。</li></ul></div></div><a class="button2 scroll-tip fade fade4"  data-slide="5" title="">向下滚动</a></div><div id="contact" class="section-wrap section-contact" data-slide="5"><div class="section"><div class="contact-content clearfix section-content"><h1>联系本人</h1><div class="left"><div class="contact-ways fade fade1"><h2>社交网络</h2><ul><li>邮箱：1111111111@qq.com</li><li>Q Q ：1083501852</li><li>电话：17611111111</li><li>微博：yy滴blog</li><li></li></ul></div><div class="contact-info fade fade2"><p>虽然有社交网络，但是平时上的比较少，很多时候是只看不发！不过你可以关注我哦！</p></div></div><div class="right fade fade3"></div></div></div><a class="button2 button2-2-top scroll-tip" id="gototops" data-slide="1" href="#top" style="background-position: -60px 0;width:80px;height:80px;" title=""></a></div><div class="overlay"></div><div class="state-indicator"></div><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script src="js/global.js"></script><script src="js/waypoints.min.js"></script><script src="js/js.js"></script><script src="js/jquery.stellar.min.js"></script><div style="text-align:center;"><p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p></div></body></html>

CSS文件

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:focus{outline:0}h1,h2,h3,h4,h5,h6{font-weight:normal}.clearfix:before,.section:before,.nav ul:before{content:"";display:table}.clearfix:after,.section:after,.nav ul:after{content:"";display:table;clear:both}input{-webkit-appearance:none;border-radius:0}a{color:#2094c4;text-decoration:none;outline:none}a:hover{color:#3498db}p{padding:0 0 20px}strong{font-weight:bold}body{color:#000;font:normal 14px/1.4 "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;width:100%;overflow:hidden}.left{float:left}.right{float:right}.section-wrap{position:relative;z-index:2}.section{width:960px;margin:0 auto}.section h1{margin-bottom:40px;font-size:36px}.overlay{background:#ecf0f1;position:absolute;display:none;top:0;left:0;right:0;bottom:0;z-index:2;opacity:1;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.loading-process .overlay{display:block}.finish-loading .overlay{opacity:0}.finish-loading .loading-info,.finish-loading .loading-circle{opacity:0}.finish-loading .loading-avatar{border:4px solid #fff}.fade{opacity:0;position:relative;top:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.fade.fade-in{opacity:1;top:0}.section-header{position:fixed;top:0;left:0;right:0;z-index:20}.finish-loading .nav{opacity:.6}.nav{width:960px;position:absolute;z-index:5}.nav li{float:left;text-align:center;position:relative;width:20%}.nav li a{color:#fff;font-size:30px;display:block;padding:60px 0;width:100%;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in}.nav .fade1 a:hover,.nav .fade1.hover a{color:#95a5a6}.nav .fade2 a:hover,.nav .fade2.hover a{color:#2980b9}.nav .fade3 a:hover,.nav .fade3.hover a{color:#c0392b}.nav .fade4 a:hover,.nav .fade4.hover a{color:#27ae60}.nav .back-home{height:1px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.nav .back-home a{position:absolute;width:100px;height:100px;left:50%;margin-left:-50px;border-radius:50%;border:4px solid #fff;overflow:hidden;text-indent:-9999px;background:url(../images/avatar.jpg);-webkit-background-size:100px 100px;background-size:100px 100px;padding:0 !important;top:30px}.nav .back-home a:hover{border-bottom:4px solid #fff}.nav-bg{background:#000;position:relative;z-index:1;height:80px;margin:0 auto;width:0;-webkit-transition:width 0.6s ease-in;-moz-transition:width 0.6s ease-in;-ms-transition:width 0.6s ease-in;-o-transition:width 0.6s ease-in;transition:width 0.6s ease-in}.shrink .nav li a{padding:20px 0;font-size:24px}.shrink .nav .back-home a{top:0}.shrink .nav-bg{width:100%}.home-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1}.home-bg img{max-width:none}.loading{margin:auto;position:fixed;top:0;left:0;right:0;bottom:0;width:120px;height:120px;z-index:10}.loading-circle{background-color:transparent;opacity:.9;border-top:10px solid #27ae60;border-right:10px solid #d35400;border-bottom:10px solid #2980b9;border-left:10px solid #c0392b;border-radius:50%;width:100px;height:100px;margin:0 auto;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;-moz-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-o-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}.loading-avatar{width:100px;height:100px;overflow:hidden;position:absolute;top:10px;left:10px;border-radius:50%;-webkit-transition:border-width 0.4s ease-in;-moz-transition:border-width 0.4s ease-in;-ms-transition:border-width 0.4s ease-in;-o-transition:border-width 0.4s ease-in;transition:border-width 0.4s ease-in}.loading-avatar img{width:100px;height:100px;border-radius:50px}.loading-info{position:absolute;top:130%;width:160%;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.section-fristpage{text-align:center;color:#fff;font-size:30px}.section-fristpage p{padding-bottom:0}.section-fristpage .fade2{margin-top:60px}.section-fristpage .fade3{margin-top:60px}.scroll-tip{display:block;width:60px;height:60px;border-radius:50%;position:absolute;bottom:-30px;top:auto !important;left:50%;margin-left:-30px;text-indent:-9999px;background:#fff url(../images/bg-down-arrow.png) no-repeat 50% 30%}.section-about{background:#eee url(../images/bg-tile.png) 0 0}.section-about .about-content h1{margin-bottom:30px;font-size:36px}.section-about .about-content .introli{width:100%;margin-left:400px;line-height:150%}.section-about .about-content .introli .bio-text{opacity:0}.section-about .about-content .introli .left_icon{display:inline-block;width:100px;height:100px}.section-about .about-content .introli .left_icon .bio-icon-1{-webkit-animation:bio-icon-in2 .6s ease-out .7s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out .7s 1 forwards}.section-about .about-content .introli .left_icon .bio-icon-2{-webkit-animation:bio-icon-in2 .6s ease-out 1s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out 1s 1 forwards}.section-about .about-content .introli .left_icon .bio-icon-3{-webkit-animation:bio-icon-in2 .6s ease-out 1.3s 1 forwards;-moz-animation:bio-icon-in2 .6s ease-out 1.3s 1 forwards}.section-about .about-content .introli .right_content .bio-text-1{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out 0.6s 1 forwards;-moz-animation:bio-text-in .3s ease-out 0.6s 1 forwards}.section-about .about-content .introli .right_content .bio-text-2{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out .9s 1 forwards;-moz-animation:bio-text-in .3s ease-out .9s 1 forwards}.section-about .about-content .introli .right_content .bio-text-3{margin-left:-210px;-webkit-animation:bio-text-in .3s ease-out 1.2s 1 forwards;-moz-animation:bio-text-in .3s ease-out 1.2s 1 forwards}.section-about .fade{-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}@-webkit-keyframes 'bio-text-in'{0%{-webkit-transform:translate(649px, 0);opacity:0}100%{-webkit-transform:translate(0, 0);opacity:1}}@-webkit-keyframes 'bio-icon-in2'{0%{margin-left:-300px;opacity:0;-webkit-transform:rotate(-60deg)}100%{margin-left:-269px;opacity:1;-webkit-transform:rotate(0deg)}}@-moz-keyframes bio-text-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes bio-icon-in2{0%{opacity:0}100%{opacity:1}}.section-works{background:#27ae60}.button2:hover{opacity:1;-webkit-transform:scale(1);cursor:pointer}.button2{display:block;width:60px;height:60px;position:absolute;bottom:40px;left:50%;margin-left:-30px;opacity:0.75;background:url(../images/arrow.png);-webkit-transition:all .2s ease-in 0s;z-index:9999;-webkit-transform:scale(0.8)}.dark-button2{background-position:0 -60px}.button2-2-top{background-position:-60px 0;bottom:none;width:80px;height:80px}.works-content h1{text-align:center;color:#fff}.works-content .works-list .fade{top:20px;left:10px;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}.works-content .works-list .fade.fade-in{left:0;top:0}.works-content .works-item{position:relative;width:300px;margin-left:30px;margin-bottom:30px;float:left;overflow:hidden}.works-content .works-item img{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.works-content .works-item.first{margin-left:0}.works-content .works-item:hover img{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}.works-content .works-item:hover .work-info{top:0}.works-content .works-item .work-info{position:absolute;top:137px;padding:10px;left:0;right:0;height:100%;color:#fff;background:rgba(0,0,0,0.8);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.works-content .works-item .work-info h2{margin-bottom:20px}.more-link{color:#fff;display:block;padding:10px 20px;width:60px;text-align:center;margin:0 auto;background:#3d3d3d;background:rgba(0,0,0,0.6)}.more-link:hover{color:#fff;background:#3d3d3d;background:rgba(0,0,0,0.4)}.section-skill{background:#2980b9}.skill-content h1{color:#fff}.skill-content ul{color:#fff}.skill-content li{font-size:18px;line-height:2}.skill-content .fade{top:0;left:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.skill-content .fade.fade-in{left:0}.section-contact{background:#c0392b;color:#dadada}.section-contact a{color:#fff}.section-contact a:hover{color:#dadada}.section-contact .contact-content .left{width:40%}.section-contact .contact-content .right{width:50%}.section-contact .contact-content h1{color:#fff;margin-bottom:30px}.section-contact .contact-content .contact-info{margin-top:20px}.section-contact .contact-content h2{color:#fff;margin-bottom:20px}.section-contact .contact-content .right ul{list-style-type:square;padding-left:30px;margin-bottom:20px;line-height:1.6}.section-contact .contact-ways li{line-height:1.8}.footer{position:absolute;left:0;right:0;bottom:0;height:40px;background:#000;color:#fff}.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}.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}.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}.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein}.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT}.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR}.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB}.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL}.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout}.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT}.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR}.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB}.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL}.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce}.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein}.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT}.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR}.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB}.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL}.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout}.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT}.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR}.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB}.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL}.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein}.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT}.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB}.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT}.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB}.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout}.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT}.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB}.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT}.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB}.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip}.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX}.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY}.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX}.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY}.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash}.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake}.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing}.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble}.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-ms-keyframes fadein{0%{opacity:0}100%{opacity:1}}@keyframes fadein{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeinT{0%{opacity:0;-webkit-transform:translateY(-100px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeinT{0%{opacity:0;-moz-transform:translateY(-100px)}100%{opacity:1;-moz-transform:translateY(0)}}@-ms-keyframes fadeinT{0%{opacity:0;-ms-transform:translateY(-100px)}100%{opacity:1;-ms-transform:translateY(0)}}@keyframes fadeinT{0%{opacity:0;transform:translateY(-100px)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes fadeinR{0%{opacity:0;-webkit-transform:translateX(100px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeinR{0%{opacity:0;-moz-transform:translateX(100px)}100%{opacity:1;-moz-transform:translateX(0)}}@-ms-keyframes fadeinR{0%{opacity:0;-ms-transform:translateX(100px)}100%{opacity:1;-ms-transform:translateX(0)}}@keyframes fadeinR{0%{opacity:0;transform:translateX(100px)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes fadeinB{0%{opacity:0;-webkit-transform:translateY(100px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeinB{0%{opacity:0;-moz-transform:translateY(100px)}100%{opacity:1;-moz-transform:translateY(0)}}@-ms-keyframes fadeinB{0%{opacity:0;-ms-transform:translateY(100px)}100%{opacity:1;-ms-transform:translateY(0)}}@keyframes fadeinB{0%{opacity:0;transform:translateY(100px)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes fadeinL{0%{opacity:0;-webkit-transform:translateX(-100px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeinL{0%{opacity:0;-moz-transform:translateX(-100px)}100%{opacity:1;-moz-transform:translateX(0)}}@-ms-keyframes fadeinL{0%{opacity:0;-ms-transform:translateX(-100px)}100%{opacity:1;-ms-transform:translateX(0)}}@keyframes fadeinL{0%{opacity:0;transform:translateX(-100px)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes fadeout{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fadeout{0%{opacity:1}100%{opacity:0}}@-ms-keyframes fadeout{0%{opacity:1}100%{opacity:0}}@keyframes fadeout{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeoutT{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-100px)}}@-moz-keyframes fadeoutT{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-100px)}}@-ms-keyframes fadeoutT{0%{opacity:1;-ms-transform:translateY(0)}100%{opacity:0;-ms-transform:translateY(-100px)}}@keyframes fadeoutT{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-100px)}}@-webkit-keyframes fadeoutR{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(100px)}}@-moz-keyframes fadeoutR{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(100px)}}@-ms-keyframes fadeoutR{0%{opacity:1;-ms-transform:translateX(0)}100%{opacity:0;-ms-transform:translateX(100px)}}@keyframes fadeoutR{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(100px)}}@-webkit-keyframes fadeoutB{0%{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(100px)}}@-moz-keyframes fadeoutB{0%{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(100px)}}@-ms-keyframes fadeoutB{0%{opacity:1;-ms-transform:translateY(0)}100%{opacity:0;-ms-transform:translateY(100px)}}@keyframes fadeoutB{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(100px)}}@-webkit-keyframes fadeoutL{0%{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-100px)}}@-moz-keyframes fadeoutL{0%{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-100px)}}@-ms-keyframes fadeoutL{0%{opacity:1;-ms-transform:translateX(0)}100%{opacity:0;-ms-transform:translateX(-100px)}}@keyframes fadeoutL{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-100px)}}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}}@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}@-ms-keyframes bounce{0%,20%,50%,80%,100%{-ms-transform:translateY(0)}40%{-ms-transform:translateY(-30px)}60%{-ms-transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@-webkit-keyframes bouncein{0%{opacity:0;-webkit-transform:scale(0.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(0.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bouncein{0%{opacity:0;-moz-transform:scale(0.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(0.9)}100%{-moz-transform:scale(1)}}@-ms-keyframes bouncein{0%{opacity:0;-ms-transform:scale(0.3)}50%{opacity:1;-ms-transform:scale(1.05)}70%{-ms-transform:scale(0.9)}100%{-ms-transform:scale(1)}}@keyframes bouncein{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}@-webkit-keyframes bounceinT{0%{opacity:0;-webkit-transform:translateY(-100px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceinT{0%{opacity:0;-moz-transform:translateY(-100px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}@-ms-keyframes bounceinT{0%{opacity:0;-ms-transform:translateY(-100px)}60%{opacity:1;-ms-transform:translateY(30px)}80%{-ms-transform:translateY(-10px)}100%{-ms-transform:translateY(0)}}@keyframes bounceinT{0%{opacity:0;transform:translateY(-100px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}@-webkit-keyframes bounceinR{0%{opacity:0;-webkit-transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-30px)}80%{-webkit-transform:translateX(10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceinR{0%{opacity:0;-moz-transform:translateX(100px)}60%{opacity:1;-moz-transform:translateX(-30px)}80%{-moz-transform:translateX(10px)}100%{-moz-transform:translateX(0)}}@-ms-keyframes bounceinR{0%{opacity:0;-ms-transform:translateX(100px)}60%{opacity:1;-ms-transform:translateX(-30px)}80%{-ms-transform:translateX(10px)}100%{-ms-transform:translateX(0)}}@keyframes bounceinR{0%{opacity:0;transform:translateX(100px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}@-webkit-keyframes bounceinB{0%{opacity:0;-webkit-transform:translateY(100px)}60%{opacity:1;-webkit-transform:translateY(-30px)}80%{-webkit-transform:translateY(10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceinB{0%{opacity:0;-moz-transform:translateY(100px)}60%{opacity:1;-moz-transform:translateY(-30px)}80%{-moz-transform:translateY(10px)}100%{-moz-transform:translateY(0)}}@-ms-keyframes bounceinB{0%{opacity:0;-ms-transform:translateY(100px)}60%{opacity:1;-ms-transform:translateY(-30px)}80%{-ms-transform:translateY(10px)}100%{-ms-transform:translateY(0)}}@keyframes bounceinB{0%{opacity:0;transform:translateY(100px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}100%{transform:translateY(0)}}@-webkit-keyframes bounceinL{0%{opacity:0;-webkit-transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceinL{0%{opacity:0;-moz-transform:translateX(-100px)}60%{opacity:1;-moz-transform:translateX(30px)}80%{-moz-transform:translateX(-10px)}100%{-moz-transform:translateX(0)}}@-ms-keyframes bounceinL{0%{opacity:0;-ms-transform:translateX(-100px)}60%{opacity:1;-ms-transform:translateX(30px)}80%{-ms-transform:translateX(-10px)}100%{-ms-transform:translateX(0)}}@keyframes bounceinL{0%{opacity:0;transform:translateX(-100px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}@-webkit-keyframes bounceout{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(0.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(0.3)}}@-moz-keyframes bounceout{0%{-moz-transform:scale(1)}25%{-moz-transform:scale(0.95)}50%{opacity:1;-moz-transform:scale(1.1)}100%{opacity:0;-moz-transform:scale(0.3)}}@-ms-keyframes bounceout{0%{-ms-transform:scale(1)}25%{-ms-transform:scale(0.95)}50%{opacity:1;-ms-transform:scale(1.1)}100%{opacity:0;-ms-transform:scale(0.3)}}@keyframes bounceout{0%{transform:scale(1)}25%{transform:scale(0.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(0.3)}}@-webkit-keyframes bounceoutT{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-100px)}}@-moz-keyframes bounceoutT{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(20px)}100%{opacity:0;-moz-transform:translateY(-100px)}}@-ms-keyframes bounceoutT{0%{-ms-transform:translateY(0)}20%{opacity:1;-ms-transform:translateY(20px)}100%{opacity:0;-ms-transform:translateY(-100px)}}@keyframes bounceoutT{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-100px)}}@-webkit-keyframes bounceoutR{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(100px)}}@-moz-keyframes bounceoutR{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(-20px)}100%{opacity:0;-moz-transform:translateX(100px)}}@-ms-keyframes bounceoutR{0%{-ms-transform:translateX(0)}20%{opacity:1;-ms-transform:translateX(-20px)}100%{opacity:0;-ms-transform:translateX(100px)}}@keyframes bounceoutR{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(100px)}}@-webkit-keyframes bounceoutB{0%{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(100px)}}@-moz-keyframes bounceoutB{0%{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(-20px)}100%{opacity:0;-moz-transform:translateY(100px)}}@-ms-keyframes bounceoutB{0%{-ms-transform:translateY(0)}20%{opacity:1;-ms-transform:translateY(-20px)}100%{opacity:0;-ms-transform:translateY(100px)}}@keyframes bounceoutB{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(100px)}}@-webkit-keyframes bounceoutL{0%{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-100px)}}@-moz-keyframes bounceoutL{0%{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(20px)}100%{opacity:0;-moz-transform:translateX(-100px)}}@-ms-keyframes bounceoutL{0%{-ms-transform:translateX(0)}20%{opacity:1;-ms-transform:translateX(20px)}100%{opacity:0;-ms-transform:translateX(-100px)}}@keyframes bounceoutL{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-200px)}}@-webkit-keyframes rotatein{0%{opacity:0;-webkit-transform:rotate(-200deg)}100%{opacity:1;-webkit-transform:rotate(0)}}@-moz-keyframes rotatein{0%{opacity:0;-moz-transform:rotate(-200deg)}100%{opacity:1;-moz-transform:rotate(0)}}@-ms-keyframes rotatein{0%{opacity:0;-ms-transform:rotate(-200deg)}100%{opacity:1;-ms-transform:rotate(0)}}@keyframes rotatein{0%{opacity:0;transform:rotate(-200deg)}100%{opacity:1;transform:rotate(0)}}@-webkit-keyframes rotateinLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateinLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-ms-keyframes rotateinLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}}@keyframes rotateinLT{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}@-webkit-keyframes rotateineftB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateineftB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-ms-keyframes rotateineftB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}}@keyframes rotateineftB{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}@-webkit-keyframes rotateinRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateinRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-ms-keyframes rotateinRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}}@keyframes rotateinRT{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}@-webkit-keyframes rotateinRB{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateinRB{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-ms-keyframes rotateinRB{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}}@keyframes rotateinRB{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}@-webkit-keyframes rotateout{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}}@-moz-keyframes rotateout{0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}}@-ms-keyframes rotateout{0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1}100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0}}@keyframes rotateout{0%{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}@-webkit-keyframes rotateoutLT{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateoutLT{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}}@-ms-keyframes rotateoutLT{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0}}@keyframes rotateoutLT{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}}@-webkit-keyframes rotateoutLB{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateoutLB{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}}@-ms-keyframes rotateoutLB{0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1}100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0}}@keyframes rotateoutLB{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}@-webkit-keyframes rotateoutRT{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateoutRT{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}}@-ms-keyframes rotateoutRT{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0}}@keyframes rotateoutRT{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}@-webkit-keyframes rotateoutBR{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateoutBR{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}}@-ms-keyframes rotateoutBR{0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1}100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0}}@keyframes rotateoutBR{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}}@-moz-keyframes flip{0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}}@-ms-keyframes flip{0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out}40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out}50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in}80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in}100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in}}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}@-webkit-keyframes flipinX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}}@-moz-keyframes flipinX{0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateX(-10deg)}70%{-moz-transform:perspective(400px) rotateX(10deg)}100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}}@-ms-keyframes flipinX{0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-ms-transform:perspective(400px) rotateX(-10deg)}70%{-ms-transform:perspective(400px) rotateX(10deg)}100%{-ms-transform:perspective(400px) rotateX(0);opacity:1}}@keyframes flipinX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0);opacity:1}}@-webkit-keyframes flipinY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}}@-moz-keyframes flipinY{0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateY(-10deg)}70%{-moz-transform:perspective(400px) rotateY(10deg)}100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}}@-ms-keyframes flipinY{0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-ms-transform:perspective(400px) rotateY(-10deg)}70%{-ms-transform:perspective(400px) rotateY(10deg)}100%{-ms-transform:perspective(400px) rotateY(0);opacity:1}}@keyframes flipinY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}@-webkit-keyframes flipoutX{0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}}@-moz-keyframes flipoutX{0%{-moz-transform:perspective(400px) rotateX(0);opacity:1}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}}@-ms-keyframes flipoutX{0%{-ms-transform:perspective(400px) rotateX(0);opacity:1}100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipoutX{0%{transform:perspective(400px) rotateX(0);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}@-webkit-keyframes flipoutY{0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}}@-moz-keyframes flipoutY{0%{-moz-transform:perspective(400px) rotateY(0);opacity:1}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}}@-ms-keyframes flipoutY{0%{-ms-transform:perspective(400px) rotateY(0);opacity:1}100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipoutY{0%{transform:perspective(400px) rotateY(0);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-moz-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-ms-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0)}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(10px)}}@-ms-keyframes shake{0%,100%{-ms-transform:translateX(0)}10%,30%,50%,70%,90%{-ms-transform:translateX(-10px)}20%,40%,60%,80%{-ms-transform:translateX(10px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0)}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}40%{-moz-transform:rotate(-10deg)}60%{-moz-transform:rotate(5deg)}80%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0)}}@-ms-keyframes swing{20%{-ms-transform:rotate(15deg)}40%{-ms-transform:rotate(-10deg)}60%{-ms-transform:rotate(5deg)}80%{-ms-transform:rotate(-5deg)}100%{-ms-transform:rotate(0)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0)}15%{-webkit-transform:translateX(-100px) rotate(-5deg)}30%{-webkit-transform:translateX(80px) rotate(3deg)}45%{-webkit-transform:translateX(-65px) rotate(-3deg)}60%{-webkit-transform:translateX(40px) rotate(2deg)}75%{-webkit-transform:translateX(-20px) rotate(-1deg)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes wobble{0%{-moz-transform:translateX(0)}15%{-moz-transform:translateX(-100px) rotate(-5deg)}30%{-moz-transform:translateX(80px) rotate(3deg)}45%{-moz-transform:translateX(-65px) rotate(-3deg)}60%{-moz-transform:translateX(40px) rotate(2deg)}75%{-moz-transform:translateX(-20px) rotate(-1deg)}100%{-moz-transform:translateX(0)}}@-ms-keyframes wobble{0%{-ms-transform:translateX(0)}15%{-ms-transform:translateX(-100px) rotate(-5deg)}30%{-ms-transform:translateX(80px) rotate(3deg)}45%{-ms-transform:translateX(-65px) rotate(-3deg)}60%{-ms-transform:translateX(40px) rotate(2deg)}75%{-ms-transform:translateX(-20px) rotate(-1deg)}100%{-ms-transform:translateX(0)}}@keyframes wobble{0%{transform:translateX(0)}15%{transform:translateX(-100px) rotate(-5deg)}30%{transform:translateX(80px) rotate(3deg)}45%{transform:translateX(-65px) rotate(-3deg)}60%{transform:translateX(40px) rotate(2deg)}75%{transform:translateX(-20px) rotate(-1deg)}100%{transform:translateX(0)}}@-webkit-keyframes ring{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0)}}@-moz-keyframes ring{0%{-moz-transform:scale(1)}10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}100%{-moz-transform:scale(1) rotate(0)}}@-ms-keyframes ring{0%{-ms-transform:scale(1)}10%,20%{-ms-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg)}100%{-ms-transform:scale(1) rotate(0)}}@keyframes ring{0%{transform:scale(1)}10%,20%{transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}.state-indicator{position:absolute;top:-999em;left:-999em;z-index:1}@media only screen and (-webkit-min-device-pixel-ratio: 2){.state-indicator{z-index:2}.nav .back-home a{background-image:url(../images/avatar@2x.jpg)}}@media only screen and (max-width: 1024px){.works-content{margin-top:140px !important}}@media only screen and (max-width: 960px){.nav{width:760px}.section{width:760px}}@media only screen and (max-width: 800px){.section-about .about-content{position:relative}.section-about .about-content .left{float:none;margin:20px 0 0 20px}.section-about .about-content .right{position:absolute;right:10px;top:0}.section-about .about-content .my-photo{width:250px;height:auto}.works-list{width:630px;margin:0 auto}.works-content .works-item:nth-child(2n+1){margin-left:0 !important}.works-content .works-item:nth-child(2n){margin-left:30px !important}.skill-content{width:600px;margin:0 auto}.contact-content{width:600px;margin:0 auto}.section-contact .contact-content h1{text-align:center}}

JS库吐舌头

images 吐舌头

阅读全文

0 0