CSS
语言:
CSSSCSS
确定
body {
height: 100%;
width: 100%;
}
.container {
height: 400px;
width: 500px;
overflow: hidden;
margin: 0 auto;
position: relative;
background-color: red;
margin-top: 60px;
}
.container:hover {
cursor: pointer;
}
.container:hover .overlay {
background-color: rgba(0, 0, 0, 0.8);
}
.container:hover h3 {
opacity: 1;
}
.container:hover span {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 180ms ease;
transition: transform 180ms ease;
}
.container:hover span:nth-of-type(1) {
-webkit-transition-delay: 180ms;
transition-delay: 180ms;
}
.container:hover span:nth-of-type(2) {
-webkit-transition-delay: 360ms;
transition-delay: 360ms;
}
.container:hover span:nth-of-type(3) {
-webkit-transition-delay: 540ms;
transition-delay: 540ms;
}
.container:hover span:nth-of-type(4) {
-webkit-transition-delay: 720ms;
transition-delay: 720ms;
}
.container:hover span:nth-of-type(5) {
-webkit-transition-delay: 900ms;
transition-delay: 900ms;
}
.container h1 {
font-family: 'Open Sans Condensed', sans-serif;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-transform: uppercase;
letter-spacing: 12px;
color: #b9a382;
font-size: 66px;
margin: 0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: background-color ease 200ms;
transition: background-color ease 200ms;
}
.overlay h3 {
font-family: 'Lora', serif;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-transform: uppercase;
color: white;
letter-spacing: 4px;
font-size: 14px;
opacity: 0;
will-change: opacity;
-webkit-font-smoothing: antialiased;
margin: 0;
-webkit-transition: opacity 350ms ease;
transition: opacity 350ms ease;
}
.overlay h3:before {
content: '';
display: block;
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 1px;
position: relative;
top: -10px;
}
.overlay h3:after {
content: '';
display: block;
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 1px;
position: relative;
bottom: -10px;
}
span {
position: absolute;
display: block;
background-color: #88714d;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
span:nth-of-type(1) {
width: 48%;
top: 2%;
right: 2%;
height: 1px;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
}
span:nth-of-type(2) {
right: 2%;
top: 2%;
height: 96%;
width: 1px;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
span:nth-of-type(3) {
bottom: 2%;
right: 2%;
width: 96%;
height: 1px;
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
span:nth-of-type(4) {
left: 2%;
top: 2%;
height: 96%;
width: 1px;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
}
span:nth-of-type(5) {
top: 2%;
left: 2%;
width: 48%;
height: 1px;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
}