@font-face { font-family: "iconfont-home"; src: url('//at.alicdn.com/t/font_1431765342_6775353.eot'); src: url('//at.alicdn.com/t/font_1431765342_6775353.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1431765342_6775353.woff') format('woff'), url('//at.alicdn.com/t/font_1431765342_6775353.ttf') format('truetype'), url('//at.alicdn.com/t/font_1431765342_6775353.svg#iconfont') format('svg'); } .iconfont-home { font-family: "iconfont-home" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon-tag:before { content: "\e607"; } .icon-lego:before { content: "\e600"; } .icon-all:before { content: "\e601"; } .icon-chevron:before { content: "\e602"; } .icon-externallink:before { content: "\e603"; } .icon-download:before { content: "\e604"; } .icon-github:before { content: "\e605"; } .icon-code:before { content: "\e606"; } html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; } body { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Microsoft Sans Serif", "WenQuanYi Micro Hei", Arial, sans-serif; line-height: 1.5; color: #888; font-size: 14px; background: #fff; transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1); } *, *:after, *:before { box-sizing: border-box; } html, body, ul, li, p { margin: 0; padding: 0; } ul, li { list-style: none; } a { color: #00ABEA; text-decoration: none; transition: color .3s ease; } a:hover { color: #23C0FA; } .clearfix:after { clear: both; display: table; content: ''; } .fn-hide { display: none; } ::selection { background: #4BB8FF; color: #fff; } ::-moz-selection { background: #4BB8FF; color: #fff; } header { width: 100%; background: #fff; overflow: hidden; border-bottom: 1px solid #eee; font-size: 16px; } .fn-hide { display: none; } .fn-alpha-in { opacity: 1 !important; } .fn-alpha-out { opacity: 0 !important; } a.logo { float: left; height: 46px; line-height: 46px; margin: 17px 45px; transition: margin 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s, height 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0s; text-transform: uppercase; font-size: 18px; font-family: "Raleway", sans-serif; font-weight: 500; color: #6EB4E0; } .logo img { float: left; margin-top: -7px; -webkit-animation: rotateCircleBack 0.6s 1 ease-in-out; animation: rotateCircleBack 0.6s 1 ease-in-out; } .search { float: left; height: 22px; padding: 0px 30px; margin: 32px auto 0; border-left: 1px solid #EBEDEE; position: relative; } .search input[type="text"] { border: transparent; outline: none; width: 160px; height: 22px; padding: 0 0 0 20px; color: #999; transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1); font-size: 14px; } .search input::-webkit-input-placeholder, .search input::-moz-placeholder, .search input:-ms-input-placeholder { color: #CADCE3; } .search form .focus { padding: 0 20px 0 0; } .search button { position: absolute; outline: none; background: transparent; border: transparent; top: 5px; width: 15px; height: 15px; padding: 0; left: 30px; cursor: pointer; transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1); } .search button:before, .search button:after { content: ""; display: block; } .search button:before { width: 12px; height: 12px; border-radius: 6px; border: 2px solid #CADCE3; background: #ffffff; position: absolute; top: 0 } .search button:after { width: 2px; height: 6px; background: #CADCE3; position: absolute; transform: rotate(-45deg); left: 10px; top: 8px; } .search input:focus ~ button { left: 170px; } .nav { width: 30%; height: 80px; line-height: 80px; float: right; font-size: 0.875em; position: relative; margin-right: 25px; } .nav ul li { float: left; width: 16.66%; text-align: center; } .nav ul li a { color: #728AA3; width: 100%; height: 100%; display: block; } .nav ul li a.disabled { cursor: not-allowed; color: #ddd !important; pointer-events: none; } .nav ul li.current a { color: #71B5DE; font-weight: bold; } .nav ul li a:hover, .nav ul li .hover { color: #6EB4E0; } .nav .bar { width: 16.66%; height: 3px; position: absolute; top: 0; left: 0; background: #6EB4E0; display: none; } .barAnim { transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1); } .nav-phone-icon { display: none; } .main-box { display: block; position: absolute; top: 0; width: 100%; height: 100%; overflow: hidden; } .perspective { vertical-align: top; position: relative; perspective: 4000px; -webkit-perspective: 4000px; } .main { overflow: hidden; position: relative; height: calc(100% - 190px); min-height: 500px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; } .banner-box { width: 100%; height: 100%; position: relative; overflow: inherit; -webkit-animation: alphaTo .3s ease-out; animation: alphaTo .3s ease-out; } .banner-box .banner-img { background: url("https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg") center no-repeat; height: 1300px; width: 2400px; transform-origin: center center; -webkit-transform-origin: center center; -moz-transform-origin: center center; transition: opacity 0.5s ease-out; -webkit-transition: opacity 0.5s ease-out; } .banner-box #bannerAnim, .load-main-box { position: absolute; width: 100%; height: 100%; transform-origin: 0 0; -webkit-transform-origin: 0 0; z-index: 2; top:0; left:0; } .load-box { -webkit-perspective: 300px; -moz-perspective: 300px; width: 140px; height: 80px; position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -40px; z-index: 99; animation: alphaTo .3s ease-out; -webkit-animation: alphaTo .3s ease-out; font-size: 22px; text-align: center; font-family: 'Raleway', sans-serif;; } .load-box em { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; display: block; width: 50px; height: 50px; margin: auto; animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;; } .load-box span{ display: inline-block; } .load-box span>p{ float: left; } .load-main-box .load-bar{ width: 0%; height: 2px; background: #6EB4E0; transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);; } .load-out { -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); } .banner-box #bannerAnim .banner-line-absolute { position: absolute; } footer { clear: both; border-top: 1px solid #eee; font-size: 16px; background: #fff; } footer ul { overflow: hidden; margin: 0 2%; } footer ul li { float: left; width: 25%; padding: 5px 2% 15px; } footer ul li>h2 { font-size: 1em; color: #5C6B77; margin: 10px auto 0; font-weight: normal; } footer ul li>h3, footer h3 { font-size: 0.75em; color: #5C6B77; font-weight: normal; margin-top: 12px; } footer > h3 { text-align: center; font-size: .75em; display: none; margin: auto; padding: 10px 0; } footer ul li > a { font-size: 0.75em; margin: 5px auto; } .aside-container { width: 260px; background: #F9F9F9; padding-top: 10px; margin-bottom: 50px; } .aside-container>ul>li { overflow: hidden; } .aside-container li h4 { font-size: 16px; font-weight: bold; padding: 10px 0 10px 50px; margin: 0; color: #5C6B77; cursor: pointer; transition: background .5s, border .5s; border-left: 3px solid transparent; position: relative; z-index: 1; background: #F9F9F9; } .aside-container li>ul { display: none; } .aside-container li>ul.aside-list-show { display: block; } .aside-container li>ul li { border-left: 3px solid transparent; } .aside-container li a { line-height: 40px; height: 40px; display: block; padding-left: 60px; font-size: 14px; color: #5C6B76; } .aside-container .chinese { font-size: 12px; margin-left: 6px; font-weight: normal; opacity: 0.67; } .aside-container li a:hover { color: #6EB4E0; } .aside-container .current { background: #fff; border-left: 3px solid #71B5DE; color: #71B5DE; } .aside-container .current a { color: #71B5DE; } .main-wrapper { display: -webkit-flex; display: flex; background: #f9f9f9; } .main-container { width: calc(100% - 260px); padding: 30px 40px 120px; -webkit-animation: xRightMatrix .5s ease-out; animation: xRightMatrix .5s ease-out; background: #fff; } .main-container-center { margin: 0 auto; padding: 30px 80px 120px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; width: 80%; height: 100%; } .markdown { width: 75%; color: #777; font-size: 14px; line-height: 1.8; } .markdown img { display: block; } .markdown h1 { color: #5C6B77; } .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { color: #5C6B77; margin: 1.8em 0 1em 0; } .markdown hr { border-radius: 10px; height: 3px; border: 0; background: #eee; margin: 20px 0; } .markdown code, .markdown kbd, .markdown pre, .markdown samp { font-family: Consolas, monospace; } .markdown p, .markdown pre { margin: 1.2em 0; } .markdown > ul > li { list-style: circle; margin-left: 20px; padding-left: 8px; } .markdown code { margin: 0 3px; } .markdown pre code { background: rgba(0, 0, 0, 0.03); border: none; border-radius: 6px; padding: 12px 20px; margin: 0; } .markdown > table { border-collapse: collapse; border-spacing: 0px; empty-cells: show; border: 1px solid #e9e9e9; width: 100%; } .markdown > table th { white-space: nowrap; } .markdown > table th, .markdown > table td { border: 1px solid #e9e9e9; padding: 8px 16px; text-align: left; } .markdown > table th { background: #F7F7F7; } .markdown blockquote { font-size: 90%; color: #999; border-left: 4px solid #e9e9e9; padding-left: 0.8em; } #api ~ ul > li > p > strong ~ code { background: #fff; color: #CC7300; border: none; margin-left: 0.5em; } /****************************动画样式*********************************/ .delay-mode { animation-fill-mode: backwards !important; -webkit-animation-fill-mode: backwards !important; } .no-delay { animation-delay: 0s !important; -webkit-animation-delay: 0s !important; -moz-animation-delay: 0s !important; -o-animation-delay: 0s !important; } .from-rotate-scale-m { animation: mRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: mRotateScale .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-rotate-scale-l { animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: lRotateScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-scale-l { animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: lScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-scale-m { animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: mScale .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-x-left { animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: xLeft .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-x-right { animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: xRight .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-y-top { animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: yTop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .from-y-bottom { animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-animation: yBottom .3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .to-img-blur { opacity: 0; animation: toImgBlur .5s ease-out; -webkit-animation: toImgBlur .5s ease-out; -moz-animation: toImgBlur .5s ease-out; -o-animation: toImgBlur .5s ease-out; -ms-animation: toImgBlur .5s ease-out; } .from-img-blur { opacity: 1 !important; animation: fromImgBlur .5s ease-out; -webkit-animation: fromImgBlur .5s ease-out; -moz-animation: fromImgBlur .5s ease-out; -o-animation: fromImgBlur .5s ease-out; -ms-animation: fromImgBlur .5s ease-out; } .alpha-out { opacity: 0; animation: alphaOut .5s ease-out; -webkit-animation: alphaOut .5s ease-out; } .yoyo-x-right{ animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: xRightMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-x-left{ animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: xLeftMatrixR 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load0{ animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load0 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load1{ animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load1 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load2{ animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load2 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load3{ animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load3 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load4{ animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load4 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } .yoyo-load5{ animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; -webkit-animation: Load5 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate; } @keyframes Load5 { 0% { opacity: 0; transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load5 { 0% { opacity: 0; -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes Load4 { 0% { opacity: 0; transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load4 { 0% { opacity: 0; -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes Load3 { 0% { opacity: 0; transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load3 { 0% { opacity: 0; -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(-30px,-30px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes Load2 { 0% { opacity: 0; transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load2 { 0% { opacity: 0; -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(-30px,30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes Load1 { 0% { opacity: 0; transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load1 { 0% { opacity: 0; -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(30px,30px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes Load0 { 0% { opacity: 0; transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1, 1); } } @-webkit-keyframes Load0 { 0% { opacity: 0; -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translate(30px,-30px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translate(0,0) rotate(0deg) scale(1, 1); } } @keyframes xLeftMatrixR { 0% { opacity: 0; transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translateX(0px) rotate(0deg) scale(1, 1); } } @-webkit-keyframes xLeftMatrixR { 0% { opacity: 0; -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); } } @keyframes xRightMatrixR { 0% { opacity: 0; transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; transform: translateX(0px) rotate(0deg) scale(1, 1); } } @-webkit-keyframes xRightMatrixR { 0% { opacity: 0; -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); } 20% { opacity: 0; -webkit-transform: translateX(50px) rotate(30deg) scale(1.5, 1.5); } 80% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg) scale(1, 1); } } @keyframes fromImgBlur { 0% { opacity: 0; filter: blur(15px); } 100% { opacity: 1; filter: blur(0px); } } @-webkit-keyframes fromImgBlur { 0% { opacity: 0; -webkit-filter: blur(15px); } 100% { opacity: 1; -webkit-filter: blur(0px); } } @-moz-keyframes fromImgBlur { 0% { opacity: 0; -moz-filter: blur(15px); } 100% { opacity: 1; -moz-filter: blur(0px); } } @-ms-keyframes fromImgBlur { 0% { opacity: 0; -ms-filter: blur(15px); } 100% { opacity: 1; -ms-filter: blur(0px); } } @-o-keyframes fromImgBlur { 0% { opacity: 0; -o-filter: blur(15px); } 100% { opacity: 1; -o-filter: blur(0px); } } @keyframes toImgBlur { 0% { opacity: 1; filter: blur(0px); } 100% { opacity: 0; filter: blur(15px); } } @-webkit-keyframes toImgBlur { 0% { opacity: 1; -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-filter: blur(15px); } } @-moz-keyframes toImgBlur { 0% { opacity: 1; -moz-filter: blur(0px); } 100% { opacity: 0; -moz-filter: blur(15px); } } @-ms-keyframes toImgBlur { 0% { opacity: 1; -ms-filter: blur(0px); } 100% { opacity: 0; -ms-filter: blur(15px); } } @-o-keyframes toImgBlur { 0% { opacity: 1; -o-filter: blur(0px); } 100% { opacity: 0; -o-filter: blur(15px); } } @keyframes yBottom { 0% { opacity: 0; margin-top: 100px; } 100% { opacity: 1; margin-top: 0px; } } @-webkit-keyframes yBottom { 0% { opacity: 0; margin-top: 100px; } 100% { opacity: 1; margin-top: 0px; } } @keyframes yTop { 0% { opacity: 0; margin-top: -100px; } 100% { opacity: 1; margin-top: 0px; } } @-webkit-keyframes yTop { 0% { opacity: 0; margin-top: -100px; } 100% { opacity: 1; margin-top: 0px; } } @keyframes xRight { 0% { opacity: 0; margin-left: 100px; } 100% { opacity: 1; margin-left: 0px; } } @-webkit-keyframes xRight { 0% { opacity: 0; margin-left: 100px; } 100% { opacity: 1; margin-right: 0px; } } @keyframes xLeft { 0% { opacity: 0; margin-left: -100px; } 100% { opacity: 1; margin-left: 0px; } } @-webkit-keyframes xLeft { 0% { opacity: 0; margin-left: -100px; } 100% { opacity: 1; margin-left: 0px; } } @keyframes mScale { 0% { opacity: 0; transform: scale(0, 0); } 100% { opacity: 1; transform: scale(1, 1); } } @-webkit-keyframes mScale { 0% { opacity: 0; -webkit-transform: scale(0, 0); } 100% { opacity: 1; -webkit-transform: scale(1, 1); } } @keyframes lScale { 0% { opacity: 0; transform: scale(1.5, 1.5); } 100% { opacity: 1; transform: scale(1, 1); } } @-webkit-keyframes lScale { 0% { opacity: 0; -webkit-transform: scale(1.5, 1.5); } 100% { opacity: 1; -webkit-transform: scale(1, 1); } } @keyframes mRotateScale { 0% { opacity: 0; transform: rotate(90deg) scale(0, 0); } 100% { opacity: 1; transform: rotate(0deg) scale(1, 1); } } @-webkit-keyframes mRotateScale { 0% { opacity: 0; -webkit-transform: rotate(90deg) scale(0, 0); } 100% { opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); } } @keyframes lRotateScale { 0% { opacity: 0; transform: rotate(90deg) scale(1.5, 1.5); } 100% { opacity: 1; transform: rotate(0deg) scale(1, 1); } } @-webkit-keyframes lRotateScale { 0% { opacity: 0; -webkit-transform: rotate(90deg) scale(1.5, 1.5); } 100% { opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); } } @keyframes RotaeX { to { transform: rotate(360deg); } } @-webkit-keyframes RotaeX { to { -webkit-transform: rotate(360deg); } } @keyframes scaleOut { 0% { transform: scale(1, 1); } 100% { transform: scale(0, 0); } } @-webkit-keyframes scaleOut { 0% { -webkit-transform: scale(1, 1); ; } 100% { -webkit-transform: scale(0, 0); ; } } @keyframes yTopMatrix { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0px); } } @-webkit-keyframes yTopMatrix { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0px); } } @keyframes yBottomMatrix { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0px); } } @-webkit-keyframes yBottomMatrix { 0% { opacity: 0; -webkit-transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0px); } } @keyframes xLeftMatrix { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0px); } } @-webkit-keyframes xLeftMatrix { 0% { opacity: 0; -webkit-transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0px); } } @keyframes xRightMatrix { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0px); } } @-webkit-keyframes xRightMatrix { 0% { opacity: 0; -webkit-transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0px); } } @keyframes mainOut { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(90deg); } } @-webkit-keyframes mainOut { 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(90deg); } } @keyframes alphaTo { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes alphaTo { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes alphaOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes alphaOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes rotateCircle { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(360deg); } } @keyframes rotateCircle { 0% { transform-origin: 50% 50%; transform: rotate(0deg); } 100% { transform-origin: 50% 50%; transform: rotate(360deg); } } @-webkit-keyframes rotateCircleBack { 0% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(360deg); } 100% { -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); } } @keyframes rotateCircleBack { 0% { transform-origin: 50% 50%; transform: rotate(360deg); } 100% { transform-origin: 50% 50%; transform: rotate(0deg); } } @keyframes loadTween { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateX(-180deg); } } @-webkit-keyframes loadTween { 0% { -webkit-transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateX(-180deg); } } /***************************************************************************/ .index-page header { transition: opacity 0.5S; -webkit-animation: xRightMatrix .5s ease-out; animation: xRightMatrix .5s ease-out; } .index-page .nav { -webkit-animation: yTopMatrix .5s ease-out .4s backwards; animation: yTopMatrix .5s ease-out .4s backwards; } .index-page footer { -webkit-animation: yBottomMatrix .5s ease-out .6s backwards; animation: yBottomMatrix .5s ease-out .6s backwards; } .index-page .logo { -webkit-animation: xLeftMatrix .5s ease-out; animation: xLeftMatrix .5s ease-out; } .index-page .search { -webkit-animation: xRightMatrix .5s ease-out .2s backwards; animation: xRightMatrix .5s ease-out .2s backwards; } .api-link { font-size: 16px; vertical-align: middle; margin-left: 15px; font-weight: normal; } .sketch-link { font-size: 14px; vertical-align: middle; font-weight: normal; float: right; margin-right: 15px; border: 1px solid #ddd; padding: 2px 15px; border-radius: 100px; color: #777; } .sketch-link i { margin-right: 5px; } .component-demos { margin: 2em 0 1em; } .component-demos .icon-all { cursor: pointer; font-size: 16px; color: #9199AC; margin-left: 5px; vertical-align: text-bottom; opacity: 0.8; transition: all 0.3s ease; } .component-demos .icon-all:hover { opacity: 1; } .component-demos .icon-all.expand { color: #3B4357; } .code-boxes-col { width: 50%; float: left; padding-right: 15px; } .code-boxes-col:last-child { padding-right: 0; } .code-box { border: 1px solid #E9E9E9; border-radius: 6px; display: inline-block; width: 100%; position: relative; margin: 0px 15px 15px 0px; transition: border-color 0.4s ease; } .code-box:hover { border-color: #ccc; } .code-box:hover .code-box-meta { background: #fbfbfb; } .code-box:hover .code-box-title { background: #fbfbfb; box-shadow: 0 -1.2px 0 #e9e9e9; } .code-box .code-box-demo { padding: 42px 20px 50px; border-bottom: 1px solid #E9E9E9; } .code-box-meta { position: relative; padding: 12px 15px; border-radius: 0 0 6px 6px; transition: background-color 0.4s ease; } .code-box-meta h4, .code-box-meta p { margin: 0; } .code-box-title { position: absolute; top: -14px; padding: 1px 1.1em; color: #777; border-radius: 6px; background: #fff; transition: all 0.4s ease; } .code-box-title:before { font-family: iconfont-home; content: "\e607"; font-size: 16px; vertical-align: middle; line-height: 22px; position: relative; margin-right: 8px; top: -1px; color: #ccc; } .code-box-meta > p { font-size: 12px; margin: 0.5em 0; padding-right: 25px; } .code-box .collapse { position: absolute; right: 15px; top: 50%; cursor: pointer; width: 18px; height: 18px; font-size: 18px; line-height: 18px; opacity: 0.5; margin-top: -10px; text-align: center; transform: rotate(90deg); transition: all 0.3s ease; color: #999; } .code-box.expand .collapse { transform: rotate(-90deg); } .code-box .collapse:hover { opacity: 1; } .code-box .highlight { overflow: hidden; display: none; padding: 5px; border-top: 1px dashed #e9e9e9; } .code-box pre { margin: 0; width: auto; } .code-box pre code { border: none; background: #fff; } .banner-entry { position: absolute; top: 19%; left: 10%; z-index: 100; color: #707d8d; font-family: 'Raleway', sans-serif; font-weight: 300; } .entry-title { font-size: 50px; text-transform: uppercase; line-height: 1; margin-bottom: 12px; } .entry-slogan { padding-left: 4px; font-size: 14px; color: #9ea9b4; } a.entry-link { margin-top: 15px; border: 1px solid rgba(95, 108, 119, 0.3); border-radius: 50px; color: #5F6C77; display: block; text-align: center; padding: 8px 0; width: 140px; transition: border 0.3s ease; } a.entry-link:hover { border-color: #5F6C77; } a.entry-link .icon-lego { margin-right: 3px; display: inline-block; -webkit-animation: rotateCircleBack 0.5s 1 ease-in-out; animation: rotateCircleBack 0.5s 1 ease-in-out; } a.entry-link:hover .icon-lego { -webkit-animation: rotateCircle 0.5s 1 ease-in-out; animation: rotateCircle 0.5s 1 ease-in-out; } @media only screen and (min-width: 320px) and (max-width: 1024px) { .code-boxes-col { float: none; width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 767px) { .nav, .search { display: none; } .logo { margin: 10px; width: 110px; height: auto; } .nav-phone-icon { display: block; width: 49px; height: 49px; float: right; cursor: pointer; background: #BEC4C8; } .nav-phone-icon:before, .nav-phone-icon:after { content: ""; display: block; border-radius: 1px; width: 15px; height: 2px; background: #EBEDEE; margin: 20px 0 0 18px; } .nav-phone-icon:after { margin-top: 5px; } .main { height: calc(100% - 86px); } footer ul { display: none; } footer h3 { display: block; } }