提交 97b4a452 编写于 作者: X XieJiaHe

新增

上级 18675953
/*!
@author xiejiahe;
@link https://github.com/xjh22222228
*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:15px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 20px 10px 30px;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px}.container .main-nav{margin:20px 0 0 0}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;box-shadow:0 0 5px #ccc;margin:0 30px 30px 0;width:200px;padding:15px;cursor:pointer;border-radius:5px;overflow:hidden;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;top:-1000px;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:5px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 30px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover{transform:translateY(-7px);-webkit-transform:translateY(-7px);-ms-transform:translateY(-7px)}.container .nav-ul li:hover .mark{top:0}.footer a:hover{text-decoration:underline}}
*/a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;color:#333;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html::-webkit-scrollbar{width:8px;height:16px;border-radius:2px}html::-webkit-scrollbar-track{border-radius:6px;background:#fff}html::-webkit-scrollbar-thumb{border-radius:6px;background:#ccc}body{min-width:320px;font-size:12px;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;font-family:-apple-system, "PingFang SC", "Hiragino Sans GB", Arial, "Microsoft YaHei", "Helvetica Neue", sans-serif;background:#f8f8f8}body,html,#xiejiahe{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}small{font-size:12px}ol,ul,li{list-style:none}a{text-decoration:none}abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}q:after,q:before{content:''}legend{color:#000}fieldset,img,iframe{border:none}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}hr{border:none;height:1px}input[type="text"],input[type="password"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;outline:none;border:1px solid #e1e1e1}textarea{resize:none;outline:none;-webkit-appearance:none}button,input[type="submit"],input[type="reset"]{cursor:pointer;outline:none}i,em{font-style:normal}[ng-cloak]{display:none}a,img{-webkit-touch-callout:none}.user-select-none{user-select:none;-webkit-user-select:none;-ms-user-select:none}.sidebar{z-index:3;position:fixed;top:0;left:0;width:180px;height:100%;background:#30333c;height:100%;visibility:visible;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.sidebar .logo{margin-top:10px;text-align:center}.sidebar .logo img{width:50px;height:50px;pointer-events:none}.sidebar .nav{padding-top:20px}.sidebar .nav-title{text-align:center;cursor:pointer;font-size:16px}.sidebar .nav-title a{padding:15px 0;display:block;color:#fff}.sidebar .nav-title a.active{background:rgba(255,255,255,0.2);font-weight:bold}.container{margin-left:180px;transition:all 0.2s linear;-webkit-transition:all 0.2s linear;-ms-transition:all 0.2s linear}.container .main{margin:20px 20px}.container .main .block{margin:15px 0;padding:20px 20px 10px 30px;background:#fff;box-shadow:0 0 5px #ccc}.container .main .title{color:#000;font-size:18px}.container .main-nav{margin:20px 0 0 0}.container .main-nav .nav-ul{display:flex;display:-webkit-flex;display:-ms-flexbox;flex-wrap:wrap}.container .main-nav li{position:relative;margin:0 30px 30px 0;width:200px;padding:15px;border:1px solid #eee;cursor:pointer;border-radius:5px;overflow:hidden;transform-origin:right bottom;-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.container .main-nav li .icon{width:35px;height:35px;vertical-align:middle;border-radius:50%;pointer-events:none}.container .main-nav li .name{display:inline-block;font-size:16px;margin-left:5px;width:calc(100% - 50px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.container .main-nav li .desc{padding-top:5px;border-top:1px solid #eee;margin-top:8px}.container .main-nav li .mark{z-index:28;position:absolute;top:-1000px;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);display:flex;display:-webkit-flex;display:-ms-flexbox;display:box;display:-webkit-box;display:-ms-flexbox;justify-content:center;align-items:center;box-pack:center;-webkit-box-pack:center;-ms-box-pack:center;box-align:center;-webkit-box-align:center;-ms-box-align:center}.container .main-nav li .mark .button-box{width:100%;text-align:center}.container .main-nav li .mark a{display:inline-block;position:relative;font-size:16px;padding:3px 0;border:none;width:30%;background:#2db7f5;color:#fff;border-radius:5px;overflow:hidden}.container .main-nav li .mark a:nth-child(1){margin-right:15px}.container .main-nav li .mark a:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0}.container .main-nav li .mark a:active:after{opacity:.2}.container .main-nav li .mark .zh{background:#26a2ff}.header{display:none;text-align:center}.header .header-top{position:relative;height:45px;border-bottom:1px solid #eee;background:#fff}.header .header-top .logo{width:35px;height:35px;margin-top:4px;pointer-events:none}.header .open{position:absolute;top:9px;right:15px;cursor:pointer}.header .open i{display:block;margin-top:6px;height:2px;width:25px;background:#000;transform-origin:right center;-webkit-transform-origin:right center;-ms-transform-origin:right center;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .open.active i:nth-child(1){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg)}.header .open.active i:nth-child(2){opacity:0}.header .open.active i:nth-child(3){transform:translateY(2px) rotate(45deg);-webkit-transform:translateY(2px) rotate(45deg);-ms-transform:translateY(2px) rotate(45deg)}.header .nav-open{display:none;box-shadow:1px 1px 5px #ccc;overflow:hidden;background:#fff;transition:0.1s linear;-webkit-transition:0.1s linear;-ms-transition:0.1s linear}.header .nav-title{font-size:16px}.header .nav-title a{display:block;padding:8px 0}.header .nav-title a:active,.header .nav-title a.active{background:rgba(0,0,0,0.05)}.footer{margin-top:20px;padding:10px 10px 10px 15px;background:#fff;line-height:22px}.footer a{color:#0366d6}.scroll-top{z-index:66;position:fixed;bottom:25px;right:15px;width:30px;height:30px;cursor:pointer}@media screen and (max-width: 768px){.sidebar{transform:translate3d(-100%, 0, 0);-webkit-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0)}.header{display:block}.container{margin-left:0}.container .main{margin:10px}.main-nav .nav-ul li{width:calc(50% - 15px)}.main-nav .nav-ul li:not(:nth-child(even)){margin:0 30px 30px 0}.main-nav .nav-ul li:not(:nth-child(odd)){margin:0 0 30px 0}}@media screen and (min-width: 768px){.container .nav-ul li:hover{transform:rotate(5deg);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg)}.container .nav-ul li:hover .mark{top:0}.footer a:hover{text-decoration:underline}}
images/demo.gif

4.2 MB | W: | H:

images/demo.gif

4.2 MB | W: | H:

images/demo.gif
images/demo.gif
images/demo.gif
images/demo.gif
  • 2-up
  • Swipe
  • Onion skin
......@@ -259,6 +259,26 @@ app.controller('controller', function ($scope) {
desc: 'AntV 是蚂蚁金服全新一代数据可视化解决方案',
link: 'https://antv.alipay.com/',
},
{
icon: './icon/icon-1x014.png',
name: 'Sass',
desc: 'Sass 是成熟、稳定、强大的 CSS 扩展语言',
link: 'http://sass-lang.com/',
language: [
'http://sass-lang.com/',
'http://sass.bootcss.com/'
]
},
{
icon: './icon/icon-1x015.png',
name: 'Less',
desc: 'Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性',
link: 'http://lesscss.org/',
language: [
'http://lesscss.org/',
'https://less.bootcss.com/'
]
}
]
},
{
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册