CSS
语言：
CSSSCSS
确定
@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400");
@import url("https://fonts.googleapis.com/css?family=Roboto:100");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 34px;
margin-top: 12vh;
}
.footer {
text-align: center;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
margin-top: 15vh;
}
.button-container-1 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 6vh;
overflow: hidden;
border: 1px solid;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
transition: 0.5s;
letter-spacing: 1px;
}
.button-container-1 button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
letter-spacing: 1px;
background: #000;
-webkit-mask: url("/uploads/1705/nature-sprite.png");
mask: url("/uploads/1705/nature-sprite.png");
-webkit-mask-size: 2300% 100%;
mask-size: 2300% 100%;
border: none;
color: #fff;
cursor: pointer;
-webkit-animation: ani2 0.7s steps(22) forwards;
animation: ani2 0.7s steps(22) forwards;
}
.button-container-1 button:hover {
-webkit-animation: ani 0.7s steps(22) forwards;
animation: ani 0.7s steps(22) forwards;
}
.button-container-2 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 7vh;
overflow: hidden;
border: 1px solid #000;
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: 0.5s;
letter-spacing: 1px;
}
.button-container-2 button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
letter-spacing: 1px;
background: #000;
-webkit-mask: url("/uploads/1705/urban-sprite.png");
mask: url("/uploads/1705/urban-sprite.png");
-webkit-mask-size: 3000% 100%;
mask-size: 3000% 100%;
border: none;
color: #fff;
cursor: pointer;
-webkit-animation: ani2 0.7s steps(29) forwards;
animation: ani2 0.7s steps(29) forwards;
}
.button-container-2 button:hover {
-webkit-animation: ani 0.7s steps(29) forwards;
animation: ani 0.7s steps(29) forwards;
}
.button-container-3 {
position: relative;
width: 100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 8vh;
overflow: hidden;
border: 1px solid #000;
font-family: 'Lato', sans-serif;
font-weight: 300;
transition: 0.5s;
letter-spacing: 1px;
}
.button-container-3 button {
width: 101%;
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
letter-spacing: 1px;
background: #000;
-webkit-mask: url("/uploads/1705/nature-sprite-2.png");
mask: url("/uploads/1705/nature-sprite-2.png");
-webkit-mask-size: 7100% 100%;
mask-size: 7100% 100%;
border: none;
color: #fff;
cursor: pointer;
-webkit-animation: ani2 0.7s steps(70) forwards;
animation: ani2 0.7s steps(70) forwards;
}
.button-container-3 button:hover {
-webkit-animation: ani 0.7s steps(70) forwards;
animation: ani 0.7s steps(70) forwards;
}
.mas {
position: absolute;
color: #000;
text-align: center;
width: 101%;
font-family: 'Lato', sans-serif;
font-weight: 300;
position: absolute;
font-size: 20px;
margin-top: 12px;
overflow: hidden;
}
@-webkit-keyframes ani {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@keyframes ani {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}
@-webkit-keyframes ani2 {
from {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
to {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
@keyframes ani2 {
from {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
to {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
}
a {
color: #00ff95;
}
