afc163
10 years ago
commit
c5e67da18f
18 changed files with 1298 additions and 0 deletions
@ -0,0 +1,27 @@ |
|||
*.iml |
|||
.idea/ |
|||
.ipr |
|||
.iws |
|||
*~ |
|||
~* |
|||
*.diff |
|||
*.patch |
|||
*.bak |
|||
.DS_Store |
|||
Thumbs.db |
|||
.project |
|||
.*proj |
|||
.svn/ |
|||
*.swp |
|||
*.swo |
|||
*.log |
|||
node_modules/ |
|||
.buildpath |
|||
.settings |
|||
.yml |
|||
data |
|||
nohup.out |
|||
.spmjspid |
|||
elasticsearch-* |
|||
config/base.yaml |
|||
_site |
|||
@ -0,0 +1,22 @@ |
|||
MIT LICENSE |
|||
|
|||
Copyright (c) 2015 Alipay.com, https://www.alipay.com/ |
|||
|
|||
Permission is hereby granted, free of charge, to any person obtaining |
|||
a copy of this software and associated documentation files (the |
|||
"Software"), to deal in the Software without restriction, including |
|||
without limitation the rights to use, copy, modify, merge, publish, |
|||
distribute, sublicense, and/or sell copies of the Software, and to |
|||
permit persons to whom the Software is furnished to do so, subject to |
|||
the following conditions: |
|||
|
|||
The above copyright notice and this permission notice shall be |
|||
included in all copies or substantial portions of the Software. |
|||
|
|||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, |
|||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
|||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND |
|||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE |
|||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION |
|||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION |
|||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
|||
@ -0,0 +1,3 @@ |
|||
# Ant Design |
|||
|
|||
--- |
|||
@ -0,0 +1,13 @@ |
|||
{ |
|||
"source": "src", |
|||
"output": "_site", |
|||
"theme": "theme", |
|||
"sitename": "Ant Design", |
|||
"siteurl": "", |
|||
"permalink": "{{directory}}/{{filename}}.html", |
|||
"writers": [ |
|||
"nico.PageWriter", |
|||
"nico.FileWriter", |
|||
"nico.StaticWriter" |
|||
] |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
{ |
|||
"name": "ant-design", |
|||
"version": "0.0.1", |
|||
"description": "Design for ease", |
|||
"homepage": "http://ant-design.github.io/", |
|||
"repository": { |
|||
"type": "git", |
|||
"url": "https://github.com/ant-design/ant-design.github.io" |
|||
}, |
|||
"bugs": { |
|||
"url": "https://github.com/ant-design/ant-design.github.io/issues" |
|||
}, |
|||
"dependencies": { |
|||
"nico": "*" |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
# 按钮 |
|||
|
|||
--- |
|||
|
|||
123 |
|||
@ -0,0 +1,13 @@ |
|||
{% extends "layout.html" %} |
|||
|
|||
{% block main -%} |
|||
<div class="main"> |
|||
<div class="main-box" id="main"> |
|||
<div class="banner-box"> |
|||
<div id="bannerAnim"></div> |
|||
<div class="banner-img"></div> |
|||
<div class="banner-text"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{%- endblock %} |
|||
@ -0,0 +1 @@ |
|||
|
|||
@ -0,0 +1,935 @@ |
|||
html { |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
font-family: Consolas, "Microsoft Yahei", "tahoma", "arial", "\5b8b\4f53"; |
|||
font-size: 1em; |
|||
color: #BEC4C8; |
|||
} |
|||
html, |
|||
body { |
|||
height: 100%; |
|||
} |
|||
*, |
|||
*:after, |
|||
*:before { |
|||
box-sizing: border-box; |
|||
} |
|||
html, |
|||
body, |
|||
ul, |
|||
li, |
|||
p { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
img, |
|||
input { |
|||
display: block; |
|||
} |
|||
ul, |
|||
li { |
|||
list-style: none; |
|||
} |
|||
a { |
|||
color: #BEC4C8; |
|||
text-decoration: none; |
|||
transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
-webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
} |
|||
a:hover { |
|||
color: #6EB4E0; |
|||
} |
|||
header { |
|||
width: 100%; |
|||
background: #ffffff; |
|||
overflow: hidden; |
|||
} |
|||
.fn-alpha-in { |
|||
opacity: 1 !important; |
|||
} |
|||
.fn-alpha-out { |
|||
opacity: 0 !important; |
|||
} |
|||
.logo { |
|||
float: left; |
|||
width: 173px; |
|||
height: 46px; |
|||
margin: 20px 30px; |
|||
transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
-webkit-transition: margin .3s cubic-bezier(0.075, 0.82, 0.165, 1), width .3s cubic-bezier(0.075, 0.82, 0.165, 1), height .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
animation: xLeftMatrix .5s ease-out; |
|||
-webkit-animation: xLeftMatrix .5s ease-out; |
|||
} |
|||
.search { |
|||
float: left; |
|||
height: 22px; |
|||
padding: 0px 30px; |
|||
margin: 32px auto; |
|||
border-left: 1px solid #EBEDEE; |
|||
position: relative; |
|||
animation: xRightMatrix .5s ease-out .3s backwards; |
|||
-webkit-animation: xRightMatrix .5s ease-out .3s backwards; |
|||
} |
|||
.search input[type="text"] { |
|||
border: transparent; |
|||
outline: none; |
|||
width: 100px; |
|||
height: 22px; |
|||
padding: 0 0 0 20px; |
|||
color: #CADCE3; |
|||
transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
-webkit-transition: padding .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
} |
|||
.search input::-webkit-input-placeholder { |
|||
color: #CADCE3; |
|||
} |
|||
.search input::-moz-placeholder { |
|||
color: #CADCE3; |
|||
} |
|||
.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); |
|||
-webkit-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); |
|||
-webkit-transform: rotate(-45deg); |
|||
left: 10px; |
|||
top: 8px; |
|||
} |
|||
.nav { |
|||
width: 30%; |
|||
height: 87px; |
|||
line-height: 87px; |
|||
float: right; |
|||
font-size: 0.875em; |
|||
position: relative; |
|||
animation: yTopMatrix .5s ease-out .5s backwards; |
|||
-webkit-animation: yTopMatrix .5s ease-out .5s backwards; |
|||
} |
|||
.nav ul li { |
|||
float: left; |
|||
width: 16.66%; |
|||
text-align: center; |
|||
} |
|||
.nav ul li a { |
|||
color: #728AA3; |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
-webkit-transition: color .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
} |
|||
.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; |
|||
transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
-webkit-transition: left .3s cubic-bezier(0.075, 0.82, 0.165, 1); |
|||
} |
|||
.nav-phone-icon { |
|||
display: none; |
|||
} |
|||
/*banner*/ |
|||
|
|||
.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; |
|||
min-height: calc(100% - 217px); |
|||
-webkit-transform-style: preserve-3d; |
|||
transform-style: preserve-3d; |
|||
-webkit-transition: -webkit-transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; |
|||
transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out; |
|||
} |
|||
.banner-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
min-height: 600px; |
|||
position: relative; |
|||
overflow: inherit; |
|||
animation: yTopMatrix .3s ease-out; |
|||
-webkit-animation: yTopMatrix .3s ease-out; |
|||
} |
|||
.banner-box .banner-img { |
|||
background: url("images/banner.jpg") center no-repeat; |
|||
height: 1062px; |
|||
width: 2185px; |
|||
opacity: 0; |
|||
transform-origin: 0 0; |
|||
-webkit-transform-origin: 0 0; |
|||
} |
|||
.banner-box #bannerAnim, |
|||
.load-main-box { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
transform-origin: 0 0; |
|||
-webkit-transform-origin: 0 0; |
|||
z-index: 2; |
|||
background: #EBEDEE; |
|||
} |
|||
.load-main-box { |
|||
top: 0; |
|||
background: rgba(100, 100, 100, 0.15); |
|||
animation: alphaTo .3s ease-out; |
|||
-webkit-animation: alphaTo .3s ease-out; |
|||
} |
|||
.load-box { |
|||
width: 40px; |
|||
height: 40px; |
|||
background: #ffffff; |
|||
border-radius: 4px; |
|||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); |
|||
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); |
|||
overflow: hidden; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin-left: -20px; |
|||
margin-top: -20px; |
|||
} |
|||
.load-box em { |
|||
display: block; |
|||
width: 20px; |
|||
height: 20px; |
|||
border-radius: 20px 20px 0 0; |
|||
background: linear-gradient(0deg, transparent 50%, #6EB4E0 50%); |
|||
margin: 10px; |
|||
position: relative; |
|||
float: left; |
|||
animation: RotaeX 1.5s infinite linear; |
|||
-webkit-animation: RotaeX 1.5s infinite linear; |
|||
} |
|||
.load-box em:before, |
|||
.load-box em:after { |
|||
content: ""; |
|||
display: block; |
|||
} |
|||
.load-box em:before { |
|||
width: 14px; |
|||
height: 14px; |
|||
border-radius: 14px; |
|||
margin: 3px auto; |
|||
position: relative; |
|||
z-index: 1; |
|||
background: #ffffff; |
|||
} |
|||
.load-box em:after { |
|||
position: absolute; |
|||
width: 20px; |
|||
height: 20px; |
|||
border-radius: 20px; |
|||
top: 0; |
|||
background: linear-gradient(90deg, #6EB4E0, transparent); |
|||
} |
|||
.load-out { |
|||
transform: scale(0, 0); |
|||
-webkit-transform: scale(0, 0); |
|||
animation: scaleOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); |
|||
-webkit-animation: scaleOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045); |
|||
} |
|||
.banner-box #bannerAnim .banner-line-absolute { |
|||
position: absolute; |
|||
} |
|||
/*footer*/ |
|||
|
|||
footer { |
|||
animation: yBottomMatrix .5s ease-out .7s backwards; |
|||
-webkit-animation: yBottomMatrix .5s ease-out .7s backwards; |
|||
} |
|||
footer ul { |
|||
overflow: hidden; |
|||
min-height: 130px; |
|||
margin: 0 2%; |
|||
} |
|||
footer ul li { |
|||
float: left; |
|||
width: 25%; |
|||
padding: 1% 2%; |
|||
} |
|||
footer ul li>h2 { |
|||
font-size: 1em; |
|||
color: #5C6B77; |
|||
margin: 10px auto; |
|||
font-weight: normal; |
|||
} |
|||
footer ul li>h3, |
|||
footer h3 { |
|||
font-size: 0.75em; |
|||
color: #5C6B77; |
|||
font-weight: normal; |
|||
} |
|||
footer>h3 { |
|||
text-align: center; |
|||
font-size: .75em; |
|||
display: none; |
|||
margin: auto; |
|||
padding: 10px 0; |
|||
} |
|||
footer ul li>a { |
|||
font-size: 0.75em; |
|||
display: block; |
|||
margin: 5px auto; |
|||
} |
|||
/***********content**************/ |
|||
|
|||
.content-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: inherit; |
|||
animation: yTopMatrix .3s ease-out; |
|||
-webkit-animation: yTopMatrix .3s ease-out; |
|||
} |
|||
.content-line { |
|||
width: 96%; |
|||
background: #EBEDEE; |
|||
height: 1px; |
|||
margin: auto; |
|||
} |
|||
.content-left { |
|||
width: 240px; |
|||
float: left; |
|||
height: 100%; |
|||
background: #F9F9F9; |
|||
position: absolute; |
|||
animation: xLeftMatrix .5s ease-out .3s backwards; |
|||
-webkit-animation: xLeftMatrix .5s ease-out .3s backwards; |
|||
} |
|||
.content-left>ul { |
|||
width: 100%; |
|||
margin: 20px auto; |
|||
} |
|||
.content-left>ul>li { |
|||
position: relative; |
|||
line-height: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.content-left .list-one { |
|||
display: block; |
|||
padding-left: 30px; |
|||
width: 100%; |
|||
font-size: 1em; |
|||
color: #5C6B77; |
|||
} |
|||
.content-left .list-tow { |
|||
display: block; |
|||
padding-left: 40px; |
|||
font-size: 0.875em; |
|||
color: #788692; |
|||
} |
|||
.content-left .list-tow>p { |
|||
display: inline-block; |
|||
font-size: 0.75em; |
|||
padding-left: 10px; |
|||
} |
|||
.content-left>ul>li>ul { |
|||
background: #f6f6f6; |
|||
} |
|||
.content-left .hover>a { |
|||
background: #ffffff; |
|||
} |
|||
.content-left .hover>a:before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 4px; |
|||
background: #6EB4E0; |
|||
height: 40px; |
|||
left: 0; |
|||
position: absolute; |
|||
} |
|||
.content-right { |
|||
width: calc(100% - 240px); |
|||
float: right; |
|||
padding: 30px 40px; |
|||
animation: xRightMatrix .5s ease-out .5s backwards; |
|||
-webkit-animation: xRightMatrix .5s ease-out .5s backwards; |
|||
} |
|||
/**************/ |
|||
|
|||
@media only screen and (min-width: 768px) and (max-width: 1024px) { |
|||
.nav { |
|||
width: 40%; |
|||
} |
|||
} |
|||
@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; |
|||
} |
|||
} |
|||
/*********动画区域**********/ |
|||
/*动画延时*/ |
|||
|
|||
.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; |
|||
} |
|||
@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; |
|||
/*transform:translateX(-50px);*/ |
|||
|
|||
margin-left: -100px; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
/*transform: translateX(-50px);*/ |
|||
|
|||
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; |
|||
} |
|||
} |
|||
@ -0,0 +1,163 @@ |
|||
/* Tomorrow Theme */ |
|||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */ |
|||
/* Pretty printing styles. Used with prettify.js. */ |
|||
/* SPAN elements with the classes below are added by prettyprint. */ |
|||
/* plain text */ |
|||
.pln { |
|||
color: #4d4d4c; |
|||
} |
|||
|
|||
@media screen { |
|||
/* string content */ |
|||
.str { |
|||
color: #718c00; |
|||
} |
|||
|
|||
/* a keyword */ |
|||
.kwd { |
|||
color: #8959a8; |
|||
} |
|||
|
|||
/* a comment */ |
|||
.com { |
|||
color: #8e908c; |
|||
} |
|||
|
|||
/* a type name */ |
|||
.typ { |
|||
color: #4271ae; |
|||
} |
|||
|
|||
/* a literal value */ |
|||
.lit { |
|||
color: #f5871f; |
|||
} |
|||
|
|||
/* punctuation */ |
|||
.pun { |
|||
color: #4d4d4c; |
|||
} |
|||
|
|||
/* lisp open bracket */ |
|||
.opn { |
|||
color: #4d4d4c; |
|||
} |
|||
|
|||
/* lisp close bracket */ |
|||
.clo { |
|||
color: #4d4d4c; |
|||
} |
|||
|
|||
/* a markup tag name */ |
|||
.tag { |
|||
color: #c82829; |
|||
} |
|||
|
|||
/* a markup attribute name */ |
|||
.atn { |
|||
color: #f5871f; |
|||
} |
|||
|
|||
/* a markup attribute value */ |
|||
.atv { |
|||
color: #3e999f; |
|||
} |
|||
|
|||
/* a declaration */ |
|||
.dec { |
|||
color: #f5871f; |
|||
} |
|||
|
|||
/* a variable name */ |
|||
.var { |
|||
color: #c82829; |
|||
} |
|||
|
|||
/* a function name */ |
|||
.fun { |
|||
color: #4271ae; |
|||
} |
|||
} |
|||
/* Use higher contrast and text-weight for printable form. */ |
|||
@media print, projection { |
|||
.str { |
|||
color: #006600; |
|||
} |
|||
|
|||
.kwd { |
|||
color: #006; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.com { |
|||
color: #600; |
|||
font-style: italic; |
|||
} |
|||
|
|||
.typ { |
|||
color: #404; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.lit { |
|||
color: #004444; |
|||
} |
|||
|
|||
.pun, .opn, .clo { |
|||
color: #444400; |
|||
} |
|||
|
|||
.tag { |
|||
color: #006; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.atn { |
|||
color: #440044; |
|||
} |
|||
|
|||
.atv { |
|||
color: #006600; |
|||
} |
|||
} |
|||
/* Style */ |
|||
pre.prettyprint { |
|||
background: white; |
|||
font-family: Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; |
|||
font-size: 12px; |
|||
line-height: 1.5; |
|||
border: 1px solid #ddd; |
|||
background: #fafafa; |
|||
border-radius: 4px; |
|||
padding: 5px 10px; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
/* Specify class=linenums on a pre to get line numbering */ |
|||
ol.linenums { |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
/* IE indents via margin-left */ |
|||
li.L0, |
|||
li.L1, |
|||
li.L2, |
|||
li.L3, |
|||
li.L4, |
|||
li.L5, |
|||
li.L6, |
|||
li.L7, |
|||
li.L8, |
|||
li.L9 { |
|||
/* */ |
|||
} |
|||
|
|||
/* Alternate shading for lines */ |
|||
li.L1, |
|||
li.L3, |
|||
li.L5, |
|||
li.L7, |
|||
li.L9 { |
|||
/* */ |
|||
} |
|||
@ -0,0 +1 @@ |
|||
aside |
|||
@ -0,0 +1,11 @@ |
|||
{% extends "layout.html" %} |
|||
|
|||
{% block title %}{{post.title}} - {{config.site.name}}{% endblock %} |
|||
{% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %} |
|||
{% block main -%} |
|||
{%- include "aside.html" %} |
|||
<article class="markdown"> |
|||
<h1>{{ post.title }}</h1> |
|||
{{ post.html }} |
|||
</article> |
|||
{%- endblock %} |
|||
@ -0,0 +1,66 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<meta name="apple-mobile-web-app-capable" content="yes"> |
|||
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|||
<meta name="format-detection" content="telephone=no"> |
|||
<title>Ant Design</title> |
|||
<link rel="stylesheet" href="static/style.css"> |
|||
</head> |
|||
<body> |
|||
<header id="header"> |
|||
<a class="logo" href="/"><img src="https://t.alipayobjects.com/images/T1.lRfXcxoXXXXXXXX.png" width="100%" height="100%" /> |
|||
</a> |
|||
<div class="search"> |
|||
<form> |
|||
<input type="text" placeholder="search"> |
|||
<button type="submit"></button> |
|||
</form> |
|||
</div> |
|||
<nav class="nav"> |
|||
<span class="bar"></span> |
|||
<ul> |
|||
<li><a href="/">首页</a> |
|||
</li> |
|||
<li><a href="principle/">原则</a> |
|||
</li> |
|||
<li><a href="comp/">组件</a> |
|||
</li> |
|||
<li><a href="mode/">模式</a> |
|||
</li> |
|||
<li><a href="case/">案例</a> |
|||
</li> |
|||
<li><a href="down/">下载</a> |
|||
</li> |
|||
</ul> |
|||
</nav> |
|||
<div class="nav-phone-icon"></div> |
|||
</header> |
|||
|
|||
{%- block main %}{% endblock -%} |
|||
|
|||
<footer id="footer"> |
|||
<ul> |
|||
<li> |
|||
<h2>Ｇitlab仓库</h2> |
|||
<a href="">脚手架 - Flaming Water</a> |
|||
<a href="">组件 - Flaming Cloud Component</a> |
|||
</li> |
|||
<li> |
|||
<h2>关于我们</h2> |
|||
<a href="">博客 - Ant UED</a> |
|||
</li> |
|||
<li> |
|||
<h2>联系我们</h2> |
|||
<a href="">问题建议 - lssuse</a> |
|||
</li> |
|||
<li> |
|||
<h3>© 2015 体验技术部-企业平台组出品</h3> |
|||
</li> |
|||
</ul> |
|||
<h3>© 2015 体验技术部-企业平台组出品</h3> |
|||
</footer> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,10 @@ |
|||
{% extends "layout.html" %} |
|||
|
|||
{% block title %}{{post.title}} - {{config.site.name}}{% endblock %} |
|||
{% block description %}{% if post.summay %}{{post.summary}}{% endif %}{% endblock %} |
|||
{% block main -%} |
|||
<article class="markdown"> |
|||
<h1>{{ post.title }}</h1> |
|||
{{ post.html }} |
|||
</article> |
|||
{%- endblock %} |
|||
@ -0,0 +1,12 @@ |
|||
exports.reader = function(post) { |
|||
var filename = post.meta.filepath.toLowerCase(); |
|||
if (post.meta.filepath.indexOf('components') >= 0) { |
|||
post.template = post.meta.template = 'component'; |
|||
} else { |
|||
post.template = post.meta.template = (post.meta.template || 'page'); |
|||
} |
|||
if (!post.meta.category) { |
|||
post.meta.category = post.meta.directory; |
|||
} |
|||
return post; |
|||
}; |
|||
Loading…
Reference in new issue