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;

}

總結

以上是生活随笔為你收集整理的mask属性是css3的吗_使用CSS3 mask（蒙版，遮罩）属性实现超酷按钮悬停动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。