Difference between revisions of "Team:ZJU-China/css/home/ZJU-slide.css"
| (2 intermediate revisions by the same user not shown) | |||
| Line 25: | Line 25: | ||
left:0; | left:0; | ||
width:100%; | width:100%; | ||
| − | height: | + | height:1px; |
background:rgba(255,255,255,0.35); | background:rgba(255,255,255,0.35); | ||
z-index:3; | z-index:3; | ||
} | } | ||
| − | #gal ul {list-style-type:none;height: | + | #gal ul {list-style-type:none;height:0} |
input[type="radio"], input[type="radio"] + label { | input[type="radio"], input[type="radio"] + label { | ||
position:absolute; | position:absolute; | ||
| Line 35: | Line 35: | ||
display:block; | display:block; | ||
width:20px; | width:20px; | ||
| − | height: | + | height:20px; |
-webkit-border-radius:50%; | -webkit-border-radius:50%; | ||
-moz-border-radius:50%; | -moz-border-radius:50%; | ||
| Line 150: | Line 150: | ||
display:block; | display:block; | ||
width:40px; | width:40px; | ||
| − | height: | + | height:40px; |
background:rgba(255,255,255,0.2); | background:rgba(255,255,255,0.2); | ||
text-decoration:none; | text-decoration:none; | ||
Latest revision as of 07:54, 5 September 2015
- , *:before, *:after {
margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
- gal {
position:relative; width:100%; height:760px; margin:0 auto; background:white;
-webkit-transform:translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
- gal:after {
content:; position:absolute; right:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.35); z-index:3;
}
- gal ul {list-style-type:none;height:0}
input[type="radio"], input[type="radio"] + label {
position:absolute; bottom:7%; display:block; width:20px; height:20px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer;
} input[type="radio"] {
opacity:0; z-index:9;
} input[value="one"], input[value="one"] + label {left:23%} input[value="two"], input[value="two"] + label {left:33%} input[value="three"], input[value="three"] + label {left:43%} input[value="four"], input[value="four"] + label {left:53%} input[value="five"], input[value="five"] + label {left:63%} input[value="six"], input[value="six"] + label {left:73%} input[type="radio"] + label {
background:rgba(255,255,255,0.35); z-index:7; -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; transition:all .1s;
} [class*="entypo-"]:before {
position:absolute; font-family: 'entypo', sans-serif;
} figure[class*="entypo-"]:before {
left:10px; top:5px; color:rgba(255,255,255,0); z-index:1; -webkit-transition:color .1s; -moz-transition:color .1s; -o-transition:color .1s; transition:color .1s;
} a[class*="entypo-"]:before {
top:8px; left:9px;
color:white;
} a:hover[class*="entypo-"]:before {
color:white;
} figure, figure img, figcaption {
position:absolute; top:0; right:0;
} figure {
bottom:0; left:0; width:100%; height:100%; display:block; overflow:hidden;
} figure img {
bottom:0; left:0; display:block; width:100%; height:100%; z-index:1; -webkit-transform:translateX(600px); -moz-transform:translateX(600px); -ms-transform:translateX(600px); -o-transform:translateX(600px); transform:translateX(600px); -webkit-transition:all .15s .15s, z-index 0s; -moz-transition:all .15s .15s, z-index 0s; -o-transition:all .15s .15s, z-index 0s; transition:all .15s .15s, z-index 0s;
} figcaption {
display:block; width:30%; height:60%; top:20%; padding-top:30px; right:35%; background-image:radial-gradient(rgba( 255,255,255,0.3), transparent); background-size:600px 600px; background-repeat:no-repeat; background-position:-500px -150px; text-align:center; z-index:3; -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); box-shadow:-5px 0px 20px rgba(0,0,0,0.1); -webkit-transform:translateX(500%); -moz-transform:translateX(500%); -ms-transform:translateX(500%); -o-transform:translateX(500%); transform:translateX(500%); -webkit-transition:all .35s; -moz-transition:all .35s; -o-transition:all .35s; transition:all .35s;
}
figcaption nav ul {display:block;padding-top:10px;} figcaption nav ul li {display:inline-block;margin-left:5px;} figcaption nav ul li a {
position:relative; display:block; width:40px; height:40px; background:rgba(255,255,255,0.2); text-decoration:none; color:white; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); -webkit-transition:all .15s; -moz-transition:all .15s; -o-transition:all .15s; transition:all .15s;
} figcaption nav ul li a:hover {
background:rgba(255,255,255,0); -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
} figcaption p {
padding:50px 15px; font-family:'Titillium Web', sans-serif; font-weight:300; color:#333; background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35))); background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-size:1px 100%; background-repeat:no-repeat; background-position:50% 0%;
}
input[type="radio"]:hover + label {
background:rgba(255,255,255,0.6);
} input[type="radio"]:checked + label {
background:rgba(255,255,255,1); -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
} input[type="radio"]:checked + label:before {} input[type="radio"]:checked ~ figure img {
z-index:2; -webkit-transform:translatex(0px); -moz-transform:translatex(0px); -ms-transform:translatex(0px); -o-transform:translatex(0px); transform:translatex(0px); -webkit-transition:all .15s, z-index 0s; -moz-transition:all .15s, z-index 0s; -o-transition:all .15s, z-index 0s; transition:all .15s, z-index 0s;
} input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
z-index:3; color:rgba(255,255,255,0.5); -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s;
} input[type="radio"]:checked ~ figure figcaption {
z-index:8; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:all .35s, .7s; -moz-transition:all .35s, .7s; -o-transition:all .35s, .7s; transition:all .35s, .7s;
}