|
|
| Line 34: |
Line 34: |
| | background:rgba(35, 37, 35, 0.26) | | background:rgba(35, 37, 35, 0.26) |
| | } | | } |
| − | /**************gallery******************/
| |
| − | .gallery-items {
| |
| − | width:970px;
| |
| − | height: 1000px;
| |
| − | margin:100px 0 0 70px;
| |
| − | position: relative;
| |
| − | left: -150px;
| |
| − | }
| |
| − | .gallery-items a {
| |
| − | display:inline-block;
| |
| − | height:150px;
| |
| − | position:relative;
| |
| − | width:230px;
| |
| − | margin-left: 10px;
| |
| − | margin-right: 10px;
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | .gallery-items a img {
| |
| − | cursor:pointer;
| |
| − | display:inline-block;
| |
| − | height:100%;
| |
| − | left:0px;
| |
| − | position:absolute;
| |
| − | top:0px;
| |
| − | width:100%;
| |
| − | z-index:0;
| |
| − | border: 10px solid #fff;
| |
| − | box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
| |
| − |
| |
| − |
| |
| − | -moz-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | user-select: none;
| |
| − |
| |
| − | -moz-box-sizing:border-box;
| |
| − | -webkit-box-sizing:border-box;
| |
| − | box-sizing:border-box;
| |
| − |
| |
| − | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -webkit-transition-duration:0.5s;
| |
| − | -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -moz-transition-duration:0.5s;
| |
| − | -o-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -o-transition-duration:0.5s;
| |
| − | transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | transition-duration:0.5s;
| |
| − | }
| |
| − | .gallery-items li:hover img{
| |
| − | border:15px solid #fff;
| |
| − | cursor:default;
| |
| − | height:190%;
| |
| − | position:absolute;
| |
| − | width:190%;
| |
| − | z-index:51;
| |
| − |
| |
| − | box-shadow:1px 1px 5px #888;
| |
| − | -moz-box-shadow:1px 1px 5px #888;
| |
| − | -webkit-box-shadow:1px 1px 5px #888;
| |
| − | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -webkit-transition-duration:0.5s;
| |
| − | -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -moz-transition-duration:0.5s;
| |
| − | -o-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -o-transition-duration:0.5s;
| |
| − | transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | transition-duration:0.5s;
| |
| − | }
| |
| − |
| |
| − | /* custom focus rules */
| |
| − | .gallery-items li:hover:nth-child(3n+1) img{
| |
| − | left: -100px;
| |
| − | z-index: 50;
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(3n+2) img{
| |
| − | left:-200px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(3n+3) img{
| |
| − | left:-300px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n) img{
| |
| − | top:-100px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n+7) img{
| |
| − | top:-150px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n+10) img{
| |
| − | top:-295px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | text-align: left;
| |
| − |
| |
| − | }
| |
| − | /***********select-gallery*********/
| |
| − | .gallery-container{
| |
| − | width: 80%;
| |
| − | margin: 60px auto 30px 170px;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .gallery-container label {
| |
| − | width: 20%;
| |
| − | height: 30px;
| |
| − | padding: 10px;
| |
| − | cursor: pointer;
| |
| − | line-height: 33px;
| |
| − | font-size: 19px;
| |
| − |
| |
| − | color: rgba(255,255,255,1);
| |
| − | text-decoration: none;
| |
| − | background-color: rgba(219,87,5,1);
| |
| − | font-family: 'Yanone Kaffeesatz','Microsoft yahei';
| |
| − | display: block;
| |
| − | padding: 4px;
| |
| − | -webkit-border-radius: 8px;
| |
| − | -moz-border-radius: 8px;
| |
| − | border-radius: 8px;
| |
| − | -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | text-align: center;
| |
| − |
| |
| − | -webkit-transition: all .3s ease;
| |
| − | -moz-transition: all .3s ease;
| |
| − | -ms-transition: all .3s ease;
| |
| − | -o-transition: all .3s ease;
| |
| − | transition: all .3s ease;
| |
| − |
| |
| − |
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
| |
| − | float: left;
| |
| − | }
| |
| − | .gallery-container label.gallery-label-type-all{
| |
| − | border-radius: 3px 0px 0px 3px;
| |
| − | }
| |
| − | .gallery-container label.gallery-label-type-3{
| |
| − | border-radius: 0px 3px 3px 0px;
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
| |
| − |
| |
| − |
| |
| − |
| |
| − | -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | background-color: rgba(255, 178, 29, 0.9);
| |
| − | color: rgb(255, 255, 255);}
| |
| − | .gallery-container input{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .gallery-items li{
| |
| − | margin: 0px;
| |
| − | float: left;
| |
| − | width: 300px;
| |
| − | height: 200px;
| |
| − | -webkit-transition: all 0.6s ease-in-out;
| |
| − | -moz-transition: all 0.6s ease-in-out;
| |
| − | -o-transition: all 0.6s ease-in-out;
| |
| − | -ms-transition: all 0.6s ease-in-out;
| |
| − | transition: all 0.6s ease-in-out;
| |
| − | }
| |
| − | .gallery-items img {
| |
| − | width: 400px;
| |
| − | height: 400px;
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.1);
| |
| − | -moz-transform: scale(1.1);
| |
| − | -o-transform: scale(1.1);
| |
| − | -ms-transform: scale(1.1);
| |
| − | transform: scale(1.1);
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
| |
| − | opacity: 0.1;
| |
| − | -webkit-transform: scale(0.5);
| |
| − | -moz-transform: scale(0.5);
| |
| − | -o-transform: scale(0.5);
| |
| − | -ms-transform: scale(0.5);
| |
| − | transform: scale(0.5);
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | /**********select-gallery over*******/
| |
| | #firstTitle { | | #firstTitle { |
| | margin-left: 100px; | | margin-left: 100px; |
