CSS
语言:
CSSSCSS
确定
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
html #container,
body #container {
width: 100%;
height: 100%;
position: relative;
padding: 5% auto;
text-align: center;
background: url("/uploads/161001/normal1.jpg") no-repeat center;
background-size: cover;
}
html .btn,
body .btn {
width: 280px;
height: 56px;
display: inline-block;
position: relative;
top: 20%;
margin: 16px;
overflow: hidden;
background: transparent;
border: 2px solid white;
color: white;
font-size: 16px;
cursor: pointer;
-webkit-backface-visibility: hidden;
}
html .btn:focus,
body .btn:focus {
outline: none;
}
html .btn:before,
body .btn:before {
content: "";
height: 110%;
position: absolute;
top: -4px;
left: -4px;
right: -4px;
background: url("/uploads/161001/normal1.jpg") no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: 50%;
}
html .btn span,
body .btn span {
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
z-index: 9;
}
html .btn#btn-1:before,
body .btn#btn-1:before {
transition: all 0.3s ease;
}
html .btn#btn-1:hover:before,
body .btn#btn-1:hover:before {
-webkit-filter: blur(4px);
filter: blur(4px);
}
html .btn#btn-2:before,
body .btn#btn-2:before {
transition: all 0.3s ease;
-webkit-filter: blur(4px);
filter: blur(4px);
}
html .btn#btn-2:hover:before,
body .btn#btn-2:hover:before {
-webkit-filter: blur(0);
filter: blur(0);
}