@import "reset";
@w:100%;
@h:100%;
html{
width:@w;
height:@h;
body{
width:@w;
height:@h;
position:relative;
overflow-x:hidden;
.frame{
width:@w*4;
height:@h;
}
};
}
//初始化
.scr1,.scr2{
width:@w;
position:absolute;
left:0;
top:0;
}
// 2
.scr1{
opacity:1;
z-index:1;
transform:translateX(0);
background: #050c19;
height:100%;
overflow: hidden;
transition:all 1s ;
.galaxy{
width:@w;
height:@h;
overflow:hidden;
.htmleaf-container{
margin-top:140px;
margin-left:50px;
.canvas-text{
position:absolute;
right:100px;
top:40px;
word-wrap:break-word;
writing-mode:vertical-lr;
text-align:center;
line-height:40px;
font-size:22px;
font-weigth:normal;
color:#fff;
letter-spacing:3px;
.p1{ animation:canvasText 3s 1s linear both; };
.p2{ animation:canvasText 3s 3s linear both; };
.p3{ animation:canvasText 3s 5s linear both; };
.p4{ animation:canvasText 3s 7s linear both; };
.p5{ animation:canvasText 3s 9s linear both; };
.p6{ animation:canvasText 3s 11s linear both; };
.p7{ animation:canvasText 3s 13s linear both; };
.p8{ animation:canvasText 3s 15s linear both; margin-left:30px; };
.p9{ animation:canvasText 3s 17s linear both; };
.p10{ animation:canvasText 3s 19s linear both; };
.p11{ animation:canvasText 3s 21s linear both; };
.p12{ animation:canvasText 3s 23s linear both; };
.p13{ animation:canvasText 3s 25s linear both; };
.p14{ animation:canvasText 3s 27s linear both; };
};
};
};
}
// 4
.scr2{
display:none;
background:url("../img/003.jpg") 0 0 no-repeat,url("../img/031.jpg") 0 1200px no-repeat,url("../img/008.jpg") 0 1800px no-repeat;
.container{
width:1060px;
margin:0 auto;
}
}
//header
.header{
position:relative;
width:@w;
height:140px;
overflow:hidden;
.cover-header{
position:absolute;
left:0;
top:0;
width:@w*(1.2);
height:@h;
background:url("../img/phybg1.jpg") no-repeat;
background-size:100%;
background-position:-100px -76px;
background-color:rgba(42,42,42,1);
filter:blur(2px);
box-shadow:2px 0 4px 3px rgba(40,40,40,1) inset,4px 0 4px 3px rgba(80,80,80,1) inset,6px 0 4px 3px rgba(120,120,120,1) inset,8px 0 4px 3px rgba(160,160,160,1) inset,10px 0 4px 3px rgba(200,200,200,1) inset,12px 0 4px 3px rgba(240,240,240,1) inset,14px 0 4px 3px rgba(280,280,280,1) inset;
};
h1{
position:absolute;
width:260px;
left:60px;
top:25px;
font-size:60px;
color:#000;
height:60px;
line-height:60px;
padding:10px 20px;
font-weight:600;
cursor:pointer;
&:before{
display:block;
width:100%;
content:attr(data-content);
z-index:1;
position:absolute;
top:0;
left:0;
color:rgba(250,250,250,1);
height:30%;
overflow:hidden;
padding:10px 20px;
text-shadow:6px -10px 6px #000;
};
};
p{
position:absolute;
right:30px;
top:80px;
color:#555;
font-size:18px;
height:30px;
line-height:26px;
text-align:center;
};
}
//content
.content{
width:@w;
margin:0 auto;
.nav{
width:@w;
height:80px;
border-radius:0 0 7px 7px;
background:linear-gradient(top, #F8F8F8 0.00%, #EFEFEF 32.86%, #D7D7D7 68.93%, #CFCFCF 100.00%);;
background:-webkit-linear-gradient(top, #F8F8F8 0.00%, #EFEFEF 32.86%, #D7D7D7 68.93%, #CFCFCF 100.00%);
box-shadow: 0 2px 1px 0 #BEBEBE, 0 4px 1px -1px #B8B8B8, 0 6px 1px -2px #B3B3B3, 0 8px 1px -3px #ADADAD, 0 10px 1px -4px #AAAAAA, 0 12px 1px -5px #A7A7A7, 0 14px 1px -6px #9C9C9C, 0 16px 1px -7px #939393, 0 18px 1px -8px #8B8B8B, 0 20px 1px -9px #666666, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 20px 4px -6px rgba(0, 0, 0, 0.9), 0 45px 5px -5px rgba(0, 0, 0, 0.05), 0 35px 10px -5px rgba(0, 0, 0, 0.1), 0 25px 55px 5px rgba(0, 0, 0, 0.15);
ul{
width:980px;
margin:0 auto;
padding:10px 0;
&:after{
display:block;
content:"";
clear:both;
};
li{
float:left;
width:140px;
height:60px;
line-height:60px;
text-align:center;
a{
display:block;
color:#000;
font-weight:500;
font-size:22px;
width:120px;
height:60px;
padding:0 10px;
&:hover{
border-radius: 0 0 7px 7px;
background-color:rgba(255,130,4,1);
transform:rotateX(20deg);
-webkit-transform:rotateX(30deg);
transition:all 1s linear;
-webkit-transition:all 1s linear;
box-shadow: 0 2px 1px 0 #963004, 0 4px 1px -1px #852A03,0 8px 1px -3px #7D2803, 0 10px 1px -4px #661F01, 0 12px 1px -5px #521A02, 0 16px 1px -7px #3C1501, 0 18px 1px -8px #2D1001, 0 20px 1px -9px #110500, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.75), 0 10px 4px -6px rgba(0, 0, 0, 0.9), 0 22px 5px -5px rgba(0, 0, 0, 0.05), 0 12px 10px -5px rgba(0, 0, 0, 0.1), 0 13px 55px 5px rgba(0, 0, 0, 0.15);
};
};
};
};
};
h2{
width:100%;
font-size:50px;
font-weight:600;
height:40px;
line-height:40px;
text-align:left;
margin:60px 10px auto 60px;
a{
color:#fff;
}
};
.main{
width:100%;
height:750px;
margin:20px auto;
overflow:hidden;
.comb{
width:1020px;
margin:0 auto;
overflow:hidden;
.subcomb{
position:relative;
float:left;
margin:20px 0 0 20px;
width:230px;
height:270px;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent;
-webkit-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
.subcomba{
position: absolute;
visibility: visible;
outline:1px solid transparent;
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
img{
width:100%;
height:100%;
overflow:hidden;
};
h1{
position:absolute;
left:0;
top:-120px;
width:100%;
height:30px;
line-height:30px;
font-size:20px;
color:#fff;
padding:80px 0 10px 0;
color:rgba(0,0,255,1);
span{
display:block;
margin:0 10px;
text-align:center;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
};
};
p{
position:absolute;
left:0;
bottom:-150px;
width:100%;
height:150px;
line-height:20px;
font-size:16px;
color:#fff;
color:rgba(0,0,255,1);
text-align:left;
span{
display:block;
margin:0 10px;
};
};
};
};
};
};
.article{
width:100%;
margin:20px auto;
background-color:rgba(100,100,100,1);
height:1060px;
border-radius:20px;
&:after{
display:block;
content:"";
clear:both;
}
.art{
width:100%;
color:#fff;
h3{
width:100%;
text-align:center;
font-size:30px;
padding:30px 0;
height:40px;
line-height:40px;
};
img{
float:left;
padding:0 30px;
};
p{
font-size:18px;
line-height:24px;
padding:10px 30px;
text-align:justify;
text-indent:2em;
};
.sources{
font-size:16px;
text-indent:0;
padding-top:40px;
text-align:right;
font-style:italic;
};
};
};
}
//footer
.footer{
margin-top:30px;
width:1@w;
height:80px;
background:linear-gradient(rgba(160,160,160,.9) 20%,rgba(140,140,140,.9) 40%,rgba(120,120,120,.9) 60%,rgba(100,100,100,.9) 80%,rgba(80,80,80,.9) 100%);
border-top:1px solid rgba(0,0,0,1);
box-shadow:0px 0 2px rgba(0,0,0,1) inset;
p{
float:left;
font-size:14px;
color:#000;
line-height:30px;
padding:25px 60px;
};
a{
float:right;
font-size:14px;
color:#000;
line-height:30px;
padding:25px 80px 25px 0;
&:hover{
color:#fff;
}
};
}
//7n-2,7n-1,7n号的定位
#comb {
.subcomb:nth-child(7n-2),
.subcomb:nth-child(7n-1),
.subcomb:nth-child(7n){
left:126px;
top:-70px;
};
.subcomb:nth-child(8){
left:-750px;
top:147px;
};
.subcomb:nth-child(9),
.subcomb:nth-child(10),
.subcomb:nth-child(11){
left:252px;
top:-140px;
}
}
//hover
.subcomba:hover h1{
background:rgba(128,255,128,.6);
transform:translateY(120px);
transform:-webkit-translateY(120px);
transition:all .7s linear;
-webkit-transition:all .7s linear;
}
.subcomba:hover p{
background:rgba(128,255,128,.6);
transform:translateY(-150px);
transform:-webkit-translateY(-150px);
transition:all .7s linear;
-webkit-transition:all .7s linear;
}
@keyframes canvasText {
0% {
opacity: 0;
}
20% {
opacity: .3;
}
40% {
opacity: .8;
}
100% {
opacity: 1;
}
}
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}