/*basic.css - Written by douchaoyang in September 2015*/
|
body,
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
hr,
|
p,
|
blockquote,
|
dl,
|
dt,
|
dd,
|
ul,
|
ol,
|
li,
|
pre,
|
form,
|
fieldset,
|
legend,
|
button,
|
input,
|
textarea,
|
th,
|
td {
|
margin: 0;
|
padding: 0;
|
}
|
|
body,
|
button,
|
input,
|
select,
|
textarea {
|
font-family: "Microsoft Yahei", arial;
|
}
|
|
body {
|
overflow: hidden;
|
}
|
|
em,
|
strong,
|
th,
|
i {
|
font-style: normal;
|
font-weight: normal;
|
}
|
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 {
|
font-size: 100%;
|
font-weight: normal;
|
}
|
|
a {
|
text-decoration: none;
|
cursor: pointer;
|
outline: none;
|
}
|
|
table {
|
border-collapse: collapse;
|
border-spacing: 0;
|
}
|
|
ol,
|
ul,
|
li {
|
list-style: none;
|
}
|
|
fieldset,
|
img {
|
border: 0;
|
}
|
|
.clearfix:after {
|
content: ".";
|
display: block;
|
height: 0;
|
clear: both;
|
visibility: hidden;
|
overflow: hidden;
|
}
|
|
.clearfix {
|
*zoom: 1;
|
}
|
|
/*basic end*/
|
section::-webkit-scrollbar,
|
div::-webkit-scrollbar {
|
/* 滚动条整体样式 */
|
width: 3px;
|
height: 10px;
|
}
|
|
section::-webkit-scrollbar-thumb,
|
div::-webkit-scrollbar-thumb {
|
/* 滚动条里面小方块 */
|
border-radius: 10px;
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #02b0bd;
|
}
|
|
section::-webkit-scrollbar-track,
|
div::-webkit-scrollbar-track {
|
/* 滚动条里面轨道 */
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
border-radius: 10px;
|
background: #003d64;
|
}
|
|
* {
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
background-color: #171350;
|
}
|
|
|
.diagram-content {
|
position: relative;
|
}
|
|
.diagram-stc {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.diagram-flush {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 9;
|
overflow: hidden;
|
}
|
|
.page-container {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
/**
|
* 转场效果
|
* -enter
|
* -enter-to
|
* -enter-active
|
* -leave
|
* -leave-to
|
* -leave-active
|
*/
|
.slide-left-enter {
|
-webkit-transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
}
|
.slide-left-enter-to {
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
}
|
.slide-left-enter-active {
|
-webkit-transition: all .25s linear;
|
transition: all .25s linear;
|
}
|
.slide-left-leave {
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
}
|
.slide-left-leave-to {
|
-webkit-transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
}
|
.slide-left-leave-active {
|
-webkit-transition: all .25s linear;
|
transition: all .25s linear;
|
}
|
|
.slide-right-enter {
|
-webkit-transform: translate3d(-100%, 0, 0);
|
transform: translate3d(-100%, 0, 0);
|
}
|
.slide-right-enter-to {
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
}
|
.slide-right-enter-active {
|
-webkit-transition: all .25s linear;
|
transition: all .25s linear;
|
}
|
.slide-right-leave {
|
-webkit-transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
}
|
.slide-right-leave-to {
|
-webkit-transform: translate3d(100%, 0, 0);
|
transform: translate3d(100%, 0, 0);
|
}
|
.slide-right-leave-active {
|
-webkit-transition: all .25s linear;
|
transition: all .25s linear;
|
}
|
|
|
.clip-circle-in-enter-active {
|
animation: clipCircleIn .3s linear;
|
z-index: 1;
|
}
|
.clip-rect-in-leave,
|
.clip-diamond-in-leave,
|
.clip-rect-sp-in-leave,
|
.clip-sector-in-leave,
|
.seed-leave,
|
.seed-hor-leave,
|
.clip-rotate-in-leave,
|
.clip-triangle-in-leave,
|
.clip-circle-in-leave {
|
opacity: 1;
|
}
|
.clip-rect-in-leave-to,
|
.clip-diamond-in-leave-to,
|
.clip-rect-sp-in-leave-to,
|
.clip-sector-in-leave-to,
|
.seed-leave-to,
|
.seed-hor-leave-to,
|
.clip-rotate-in-leave-to,
|
.clip-triangle-in-leave-to,
|
.clip-circle-in-leave-to {
|
opacity: 0;
|
}
|
.clip-rect-in-leave-active,
|
.clip-diamond-in-leave-active,
|
.clip-rect-sp-in-leave-active,
|
.clip-sector-in-leave-active,
|
.seed-leave-active,
|
.seed-hor-leave-active,
|
.clip-rotate-in-leave-active,
|
.clip-triangle-in-leave-active,
|
.clip-circle-in-leave-active {
|
-webkit-transition: all .3s linear;
|
transition: all .3s linear;
|
}
|
@keyframes clipCircleIn {
|
0% {
|
clip-path: circle(0 at 50% 50%);
|
}
|
100% {
|
clip-path: circle(70% at 50% 50%);
|
}
|
}
|
|
|
.clip-triangle-in-enter-active {
|
animation: clipTriangleIn .3s linear;
|
z-index: 1;
|
}
|
@keyframes clipTriangleIn {
|
0% {
|
clip-path: polygon(50% 50%, 49% 51%, 51% 51%);
|
}
|
100% {
|
clip-path: polygon(50% -100%, -100% 150%, 200% 150%);
|
}
|
}
|
|
.clip-rect-in-enter-active {
|
animation: clipRectIn .3s linear;
|
z-index: 1;
|
}
|
@keyframes clipRectIn {
|
0% {
|
clip-path: inset(50% round 10% 50%);
|
}
|
100% {
|
clip-path: inset(0% round 0);
|
}
|
}
|
|
.clip-diamond-in-enter-active {
|
animation: clipDiamondIn .3s;
|
z-index: 1;
|
}
|
@keyframes clipDiamondIn {
|
0% {
|
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
}
|
100% {
|
clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
|
}
|
}
|
|
.clip-rect-sp-in-enter-active {
|
animation: clipRectSpIn .3s;
|
z-index: 1;
|
}
|
@keyframes clipRectSpIn {
|
0% {
|
clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
|
}
|
100% {
|
clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
|
}
|
}
|
|
.clip-sector-in-enter-active {
|
animation: clipSectorIn .3s linear;
|
z-index: 1;
|
}
|
@keyframes clipSectorIn {
|
0% {
|
clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);
|
}
|
50% {
|
clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);
|
}
|
100% {
|
clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
|
}
|
}
|
|
.clip-rotate-in-enter-active {
|
animation: clipRotateIn .3s linear;
|
z-index: 1;
|
}
|
@keyframes clipRotateIn {
|
0% {
|
clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
|
}
|
12.5% {
|
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
|
}
|
37.5% {
|
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
|
}
|
62.5% {
|
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
|
}
|
87.5% {
|
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 0% 0%);
|
}
|
100% {
|
clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
|
}
|
}
|
|
.seed-enter-active {
|
-webkit-mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
|
-webkit-mask-size: 40px;
|
mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
|
mask-size: 40px;
|
animation: seed .3s linear;
|
z-index: 1;
|
}
|
|
.seed-hor-enter-active {
|
-webkit-mask: linear-gradient(to bottom, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
|
-webkit-mask-size: auto 40px;
|
mask: linear-gradient(to bottom, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
|
mask-size: auto 40px;
|
animation: seed .3s linear;
|
z-index: 1;
|
}
|
@keyframes seed {
|
0% {--seed:0}
|
1% {--seed:1}
|
2% {--seed:2}
|
3% {--seed:3}
|
4% {--seed:4}
|
5% {--seed:5}
|
6% {--seed:6}
|
7% {--seed:7}
|
8% {--seed:8}
|
9% {--seed:9}
|
10% {--seed:10}
|
11% {--seed:11}
|
12% {--seed:12}
|
13% {--seed:13}
|
14% {--seed:14}
|
15% {--seed:15}
|
16% {--seed:16}
|
17% {--seed:17}
|
18% {--seed:18}
|
19% {--seed:19}
|
20% {--seed:20}
|
21% {--seed:21}
|
22% {--seed:22}
|
23% {--seed:23}
|
24% {--seed:24}
|
25% {--seed:25}
|
26% {--seed:26}
|
27% {--seed:27}
|
28% {--seed:28}
|
29% {--seed:29}
|
30% {--seed:30}
|
31% {--seed:31}
|
32% {--seed:32}
|
33% {--seed:33}
|
34% {--seed:34}
|
35% {--seed:35}
|
36% {--seed:36}
|
37% {--seed:37}
|
38% {--seed:38}
|
39% {--seed:39}
|
40% {--seed:40}
|
41% {--seed:41}
|
42% {--seed:42}
|
43% {--seed:43}
|
44% {--seed:44}
|
45% {--seed:45}
|
46% {--seed:46}
|
47% {--seed:47}
|
48% {--seed:48}
|
49% {--seed:49}
|
50% {--seed:50}
|
51% {--seed:51}
|
52% {--seed:52}
|
53% {--seed:53}
|
54% {--seed:54}
|
55% {--seed:55}
|
56% {--seed:56}
|
57% {--seed:57}
|
58% {--seed:58}
|
59% {--seed:59}
|
60% {--seed:60}
|
61% {--seed:61}
|
62% {--seed:62}
|
63% {--seed:63}
|
64% {--seed:64}
|
65% {--seed:65}
|
66% {--seed:66}
|
67% {--seed:67}
|
68% {--seed:68}
|
69% {--seed:69}
|
70% {--seed:70}
|
71% {--seed:71}
|
72% {--seed:72}
|
73% {--seed:73}
|
74% {--seed:74}
|
75% {--seed:75}
|
76% {--seed:76}
|
77% {--seed:77}
|
78% {--seed:78}
|
79% {--seed:79}
|
80% {--seed:80}
|
81% {--seed:81}
|
82% {--seed:82}
|
83% {--seed:83}
|
84% {--seed:84}
|
85% {--seed:85}
|
86% {--seed:86}
|
87% {--seed:87}
|
88% {--seed:88}
|
89% {--seed:89}
|
90% {--seed:90}
|
91% {--seed:91}
|
92% {--seed:92}
|
93% {--seed:93}
|
94% {--seed:94}
|
95% {--seed:95}
|
96% {--seed:96}
|
97% {--seed:97}
|
98% {--seed:98}
|
99% {--seed:99}
|
100% {--seed:100}
|
}
|
