mask-image:為元素添加圖片遮罩層缠黍，跟ps里面的遮罩層用法類似；
適用于：所有元素; 在SVG中药蜻，它適用于除defs元素和所有圖形元素之外的容器元素瓷式；
屬性默認(rèn)值：
mask-image： none/url/ 設(shè)置蒙版圖像源.默認(rèn)值透明的黑色圖像層
mask-mode： match-source 設(shè)置蒙版圖像的蒙版模式
mask-repeat： no-repeat 是否重復(fù)
mask-position： center 設(shè)置蒙版圖像的位置
mask-size： auto 設(shè)置蒙版圖像的大小
語法：(與background-image用法相同)
mask-image: url(masks.svg#mask1);
mask-image:linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
利用mask-image制作走馬燈效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@keyframes mask{
0% {-webkit-mask-position:0px 0px;}
25% {-webkit-mask-position:619px 0px;}
50% {-webkit-mask-position:0px 0px;}
75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
100% {-webkit-mask-size:1000%;}
}
.mask{
width:700px;
height:392px;
background:black url("https://xiaowu0371.github.io/img/bg.jpg");
-webkit-mask-image:url("https://xiaowu0371.github.io/img/mask.jpg");
animation:mask 5s linear infinite forwards;
}
</style>
</head>
<body>
<div class="mask"></div>
</body>
</html>
按鈕特效：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*公共按鈕樣式*/
.public-button {
position: relative;
width: 300px;
height: 86px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 20px;
font-weight: 300;
transition: 0.5s;
margin:40px auto;
box-shadow: 0 0 20px #cccccc;
background:#68b7ff;
font-size:0;
}
.public-button button {
width: 101%;
height: 100%;
font-weight: 300;
font-size: 34px;
background: #daecfd;
-webkit-mask: url("http://static.baizhiedu.com/mobile-2018/special/python/img-2/urban-sprite.png");
mask: url("http://static.baizhiedu.com/mobile-2018/special/python/img-2/urban-sprite.png");
-webkit-mask-size: 3000% 100%;
mask-size: 3000% 100%;
border: none;
border-radius: 20px;
color: black;
font-family: "Arial, Helvetica, sans-serif";
cursor: pointer;
-webkit-animation: ani2 2s steps(29) infinite;
animation: ani2 2s steps(29) infinite;
}
.mas {
position: absolute;
display: inline-block;
width: 300px;
height: 86px;
line-height: 86px;
color: #ffffff;
text-align: center;
width: 101%;
font-weight: 300;
position: absolute;
font-size: 34px;
overflow: hidden;
}
@-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;
}
}
</style>
</head>
<body>
<div class="public-button">
<span class="mas">更多相關(guān)信息</span>
<button type="button" name="Hover">更多相關(guān)信息</button>
</div>
</body>
</html>
