143 lines
4.4 KiB
CSS
143 lines
4.4 KiB
CSS
@keyframes rotateY
|
|
{0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
|
|
@-webkit-keyframes rotateY
|
|
{0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
|
|
@-o-keyframes rotateY
|
|
{0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
|
|
@-moz-keyframes rotateY
|
|
{0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
|
|
@-ms-keyframes rotateY
|
|
{0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
|
|
|
|
.items-body{
|
|
padding-bottom: 85px;
|
|
}
|
|
.index-heZuo li {
|
|
height: 119px;
|
|
border: 1px solid #ddd;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: rotateY(0deg);
|
|
background: url(../img/logo-qiang.jpg) no-repeat #fafafa;
|
|
}
|
|
.index-heZuo li.bg1 {background-position: 0 0; }
|
|
.index-heZuo li.bg2 {background-position: -171px 0; }
|
|
.index-heZuo li.bg3 {background-position: -342px 0; }
|
|
.index-heZuo li.bg4 {background-position: -513px 0; }
|
|
.index-heZuo li.bg5 {background-position: -684px 0; }
|
|
.index-heZuo li.bg6 {background-position: -855px 0; }
|
|
.index-heZuo li.bg7 {background-position: -1026px 0; }
|
|
.index-heZuo li.bg8 {background-position: 0 -119px; }
|
|
.index-heZuo li.bg9 {background-position: -171px -119px; }
|
|
.index-heZuo li.bg10 {background-position: -342px -119px; }
|
|
.index-heZuo li.bg11 {background-position: -513px -119px; }
|
|
.index-heZuo li.bg12 {background-position: -684px -119px; }
|
|
.index-heZuo li.bg13 {background-position: -855px -119px; }
|
|
.index-heZuo li.bg14 {background-position: -1026px -119px; }
|
|
.index-heZuo li.bg15 {background-position: 0 -238px; }
|
|
.index-heZuo li.bg16 {background-position: -171px -238px; }
|
|
.index-heZuo li.bg17 {background-position: -342px -238px; }
|
|
.index-heZuo li.bg18 {background-position: -513px -238px; }
|
|
.index-heZuo li.bg19 {background-position: -684px -238px; }
|
|
.index-heZuo li.bg20 {background-position: -855px -238px; }
|
|
.index-heZuo li.bg21 {background-position: -1026px -238px; }
|
|
.index-heZuo li.bg22 {background-position: 0 -357px; }
|
|
.index-heZuo li.bg23 {background-position: -171px -357px; }
|
|
.index-heZuo li.bg24 {background-position: -342px -357px; }
|
|
.index-heZuo li.bg25 {background-position: -513px -357px; }
|
|
.index-heZuo li.bg26 {background-position: -684px -357px; }
|
|
.index-heZuo li.bg27 {background-position: -855px -357px; }
|
|
.index-heZuo li.bg28 {background-position: -1026px -357px; }
|
|
.index-heZuo li.bg29 {background-position: 0 -476px; }
|
|
.index-heZuo li.bg30 {background-position: -171px -476px; }
|
|
.index-heZuo li.bg31 {background-position: -342px -476px; }
|
|
.index-heZuo li.bg32 {background-position: -513px -476px; }
|
|
.index-heZuo li.bg33 {background-position: -684px -476px; }
|
|
.index-heZuo li.bg34 {background-position: -855px -476px; }
|
|
.index-heZuo li.bg35 {background-position: -1026px -476px; }
|
|
.index-heZuo li.ro_cur {
|
|
animation: rotateY 1s linear;
|
|
-moz-animation: rotateY 1s linear;
|
|
/* Firefox */
|
|
-webkit-animation: rotateY 1s linear;
|
|
/* Safari and Chrome */
|
|
-o-animation: rotateY 1s linear;
|
|
/* Opera */
|
|
-ms-animation: rotateY 1s linear;
|
|
}
|
|
.index-heZuo li:hover .hezuo-shade {
|
|
top: 0;
|
|
}
|
|
.index-heZuo li .hezuo-shade {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
-webkit-transition: all 0.5s ease;
|
|
-moz-transition: all 0.5s ease;
|
|
-o-transition: all 0.5s ease;
|
|
-ms-transition: all 0.5s ease;
|
|
transition: all 0.5s ease;
|
|
}
|
|
.txt-hidden {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.index-heZuo li .hezuo-shade p {
|
|
width: 100%;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
font-size: 14px;
|
|
color: #fff;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
.content1_center ul li {
|
|
width: 201px;
|
|
margin: 0 100px;
|
|
}
|
|
@media screen and (max-width: 990px) {
|
|
.index-heZuo li {
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: 35px solid #fafafa;
|
|
border-right: 35px solid #fafafa;
|
|
}
|
|
}
|
|
@media screen and (max-width: 768px) {
|
|
.index-heZuo li {
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: 70px solid #fafafa;
|
|
border-right: 70px solid #fafafa;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.index-heZuo li {
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: 50px solid #fafafa;
|
|
border-right: 50px solid #fafafa;
|
|
}
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
.index-heZuo li {
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: 30px solid #fafafa;
|
|
border-right: 30px solid #fafafa;
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
.index-heZuo li {
|
|
border-top: none;
|
|
border-bottom: none;
|
|
border-left: 10px solid #fafafa;
|
|
border-right: 10px solid #fafafa;
|
|
}
|
|
} |