代码如下:
<!doctype html><!-- 声明文档类型 -->
<html>
<head>
<meta charset="UTF-8"><!-- 编码格式 -->
<meta name="Author" content="xyong">
<meta name="Keywords" content="给搜索引擎看的关键字">
<meta name="Description" content="网页描述">
<title>爱心遮罩效果</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
.box{
position:fixed;
width:100%;
height:100%;
background:url("images/03.jpg");
/* -webkit-mask-image:url("images/love.png"),url("images/love.png"),url("images/love.png");
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:0 0, 50%, 100% 0; */
-webkit-mask:url("images/love.png") no-repeat 0 0/200px, url("images/love.png") no-repeat 50%/200px, url("images/love.png") no-repeat 100% 0/200px;
animation:love 5s infinite;
}
@keyframes love{
50%{ -webkit-mask-position:50%; -webkit-mask-size:600px;}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图如下:
知识点:
position:fixed;的应用
已知设置元素的样式为 position:fixed; 后,元素会相对于浏览器窗口定位,从而实现侧边栏等页面效果。同时,你可以为该元素设置width:100%;height:100%;。因为元素是相对于浏览器窗口的,所以此时该元素会充满整个页面。
注意:在body元素中写遮罩层是没有效果的。