在火狐浏览器中动画效果出来了，但是遮罩效果没有出来效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0;
padding:0;}
.yuan{ width:986px;
height:755px;
position:relative;
background:url(tu4.gif);
} .yuan .yuan1 {
width: 300px;
height: 300px;
position: absolute;
background: url(tu3.jpg) no-repeat;
background-size: contain;
-webkit-mask: url(bj.png) no-repeat;
-moz-mask: url(bj.png) no-repeat;
-o-mask: url(bj.png) no-repeat;
-ms-mask: url(bj.png) no-repeat;
left: 16px;
top: 36px;
animation:t1 1.5s infinite;
} .yuan .yuan2{
width: 300px;
height: 300px;
position: absolute;
margin-left: 200px;
margin-bottom: 100px;
background: url(tu2.jpg) no-repeat;
background-size: contain;
-webkit-mask: url(bj.png) no-repeat;
-moz-mask: url(bj.png) no-repeat;
-o-mask: url(bj.png) no-repeat;
-ms-mask: url(bj.png) no-repeat;
left: 80px;
top: 274px;
animation:t2 1.5s infinite;}
.yuan .yuan3{
width: 300px;
height: 300px;
position: absolute;
margin-left: 110px;
background: url(tu1.jpg) no-repeat;
background-size: contain;
-webkit-mask: url(bj.png) no-repeat;
-moz-mask: url(bj.png) no-repeat;
-o-mask: url(bj.png) no-repeat;
-ms-mask: url(bj.png) no-repeat;
left: -89px;
top: 454px;
animation:t3 1.5s infinite;}
@-webkit-keyframes t1{
0%{ top:0; }
50%{ top:25px;}
100%{ top:0;}
}@-moz-keyframes t1{
0%{ top:0; }
50%{ top:25px;}
100%{ top:0;}
}
@-webkit-keyframes t2{
0%{ top:274px; }
50%{ top:295px;}
100%{ top:274px;}
}@-moz-keyframes t2{
0%{ top:274px; }
50%{ top:295px;}
100%{ top:274px;}
}
@-webkit-keyframes t3{
0%{ top:454px; }
50%{ top:469px;}
100%{ top:454px;}
} @-moz-keyframes t3{
0%{ top:454px; }
50%{ top:469px;}
100%{ top:454px;}
}
</style>
</head>
<body>
<div class="yuan">
<div class="yuan1"></div>
<div class="yuan2"></div>
<div class="yuan3"></div>
</div>
</body>
</html>
你说的遮罩是什么？我chrome和firefox都是一样的效果哦