|
|
Line 57: |
Line 57: |
| #firstTitle { | | #firstTitle { |
| left: 550px; | | left: 550px; |
− | }
| |
− | /****gallery ***********/
| |
− | .gallery{
| |
− | width: 600px;
| |
− | height: 100%;
| |
− | position: relative;
| |
− | text-align: center;
| |
− | margin-right: 20px;
| |
− | display: inline;
| |
| } | | } |
| | | |
− | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
| |
− | .cr-bgimg div span:nth-child(1){
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/c/cb/CHINA_CD_UESTC_KINDER01.JPG);
| |
− | background-size: 400%;
| |
− | }
| |
− | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
| |
− | .cr-bgimg div span:nth-child(2){
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_KINDER02.JPG);
| |
− | background-size: 400%;
| |
− |
| |
− | }
| |
− | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
| |
− | .cr-bgimg div span:nth-child(3){
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/3/3c/CHINA_CD_UESTC_KINDER03.JPG);
| |
− | background-size: 400%;
| |
− |
| |
− | }
| |
− | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
| |
− | .cr-bgimg div span:nth-child(4){
| |
− | background-image: url(https://static.igem.org/mediawiki/2015/6/62/CHINA_CD_UESTC_KINDER04.JPG);
| |
− | background-size: 400%;
| |
− | }
| |
− | /*************gallery 2***********/
| |
− |
| |
− | #gal {
| |
− | position:relative;
| |
− | width:700px;
| |
− | height:400px;
| |
− | margin:0 120px 0 150px;
| |
− | background:#FFF;
| |
− | }
| |
− | #gal:after {
| |
− | content:'';
| |
− | position:absolute;
| |
− | bottom:24px;
| |
− | right:0;
| |
− | left:0;
| |
− | width:100%;
| |
− | height:1px;
| |
− | background:rgba(255,255,255,0.35);
| |
− | z-index:3;
| |
− | }
| |
− | input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
| |
− | position:absolute;
| |
− | bottom:80px;
| |
− | display:block;
| |
− | width:22px;
| |
− | height:22px;
| |
− | top:350px;
| |
− | -webkit-border-radius:50%;
| |
− | -moz-border-radius:50%;
| |
− | border-radius:50%;
| |
− | cursor:pointer;
| |
− | }
| |
− | input[class="re_radio"] {
| |
− | opacity:0;
| |
− | z-index:200;
| |
− | }
| |
− | input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;}
| |
− | input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;}
| |
− | input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;}
| |
− | input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;}
| |
− | input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;}
| |
− | input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;}
| |
− | input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;}
| |
− | input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
| |
− |
| |
− | input[class="re_radio"] + label[class="re_label"] {
| |
− | background:rgba(2, 2, 2, 0.46);
| |
− | 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 .3s;
| |
− | -moz-transition:all .3s;
| |
− | -o-transition:all .3s;
| |
− | transition:all .3s;
| |
− | }
| |
− | [class*="entypo-"]:before {
| |
− | position:absolute;
| |
− | font-family: 'entypo', sans-serif;
| |
− | }
| |
− | figure[class*="entypo-"]:before {
| |
− | left:10px;
| |
− | top:5px;
| |
− | font-size:2rem;
| |
− | 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;
| |
− | font-size:1.5rem;
| |
− | 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:600px;
| |
− | height:300px;
| |
− | display:block;
| |
− | overflow:hidden;
| |
− | }
| |
− | figure img {
| |
− | bottom:0;
| |
− | left:0;
| |
− | display:block;
| |
− | width:700px;
| |
− | height:400px;
| |
− | 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:270px;
| |
− | height:300px;
| |
− | background-image: radial-gradient(rgba(161, 255, 0, 0.3), #D7E84B); background-size:600px 600px;
| |
− | background-repeat:no-repeat;
| |
− | background-position:-300px -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(300px);
| |
− | -moz-transform:translateX(300px);
| |
− | -ms-transform:translateX(300px);
| |
− | -o-transform:translateX(300px);
| |
− | transform:translateX(300px);
| |
− | -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:5px 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[class="re_radio"]:hover + label[class="re_label"] {
| |
− | background:rgba(255,255,255,0.6);
| |
− | }
| |
− | input[class="re_radio"]:checked + label[class="re_label"] {
| |
− | background:rgba(255,209,0,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(0,0,0,0.8);
| |
− | }
| |
− | input[class="re_radio"]:checked + label[class="re_label"]:before {}
| |
− | input[class="re_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[class="re_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[class="re_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;
| |
− | }
| |
− | .entypo-forward {
| |
− | margin: 0;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | border: 17px solid #fff;
| |
− | box-shadow:1px 1px 3px rgba(221, 226, 207, 0.26);
| |
− | border-radius: 20px;
| |
− | }
| |
− | .entypo-forward p {
| |
− | color: #000;
| |
− | font-size: 19px;
| |
− | font-family: 'Microsoft YaHei'
| |
− | }
| |
− |
| |
− | /********end of gallery 2*********/
| |
| p { | | p { |
| text-align: left; | | text-align: left; |