利用mask-image，制作走马灯效果
2019-07-22 本文已影响0人
牛妈代代
mask-image:为元素添加图片遮罩层，跟ps里面的遮罩层用法类似；
适用于：所有元素; 在SVG中，它适用于除defs元素和所有图形元素之外的容器元素；
属性默认值：
mask-image： none/url/ 设置蒙版图像源.默认值透明的黑色图像层
mask-mode： match-source 设置蒙版图像的蒙版模式
mask-repeat： no-repeat 是否重复
mask-position： center 设置蒙版图像的位置
mask-size： auto 设置蒙版图像的大小
语法：(与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">更多相关信息</span>
<button type="button" name="Hover">更多相关信息</button>
</div>
</body>
</html>
