大家好，又见面了，我是你们的朋友全栈君。
动画（一）
图片从左至右逐渐消失
-
实现逻辑：
a: 将遮罩分割为数个div,多个div通过图片定位拼接成一张图片;
b: 运用requestAnimationFrame + animation实现动画；
c: 遮罩层网格状逐步消失设置background-position: 0； -
效果图：
-
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#maskBox {
width: 800px;
height: 600px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
/* 精灵图 */
#maskBox .parentBox {
width: 100%;
height: 100px;
overflow: hidden;
}
.parentBox div {
width: 100px;
height: 100px;
float: left;
background: url("https://img-blog.csdnimg.cn/20210308163835396.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzgwMzEx,size_16,color_FFFFFF,t_70#pic_center") no-repeat left center;
background-size: 800px 600px;
overflow: hidden;
border: 1px solid #ccc;
box-sizing: border-box;
}
.opacity{
animation:opacity 5s ease-in-out 0s 1 alternate forwards; /*循环完成保留最后一帧画面*/
-webkit-animation:opacity 5s ease-in-out 0s 1 alternate forwards; /*Safari and Chrome*/
}
/* 去掉 background-position 无图片折叠效果 */
@keyframes opacity{
from {opacity:1;}
to {opacity:0;background-position: 0;}
}
</style>
</head>
<body>
<!-- 内容 -->
<div style=" width: 800px;height: 600px;background: #efa925;font-size: 50px;">内容。。。</div>
<!-- 遮罩 -->
<div id="maskBox"></div>
<script type="text/javascript">
function Render() {
let r_this = this;
let lowNum = 48,colNum = 9; // 宽800/100 = 8;高 600/100=6; 个数 8*6 =48；
let p_box = document.getElementById('maskBox');
let pDiv = null,cDiv = null,dX = 0,dY = 0,divHidden = null;
let index = 0,childernArr = [];
// 创建DIV css精灵拼接图片
r_this.createDiv = () => {
for (let i=0;i<colNum;i++) {
pDiv = document.createElement("div"); // 创建父Div
p_box.appendChild(pDiv);
pDiv.setAttribute('class','parentBox');
for (let a=0;a<lowNum;a++) {
cDiv = document.createElement("div"); // 创建子div
pDiv.appendChild(cDiv);
dX = cDiv.offsetLeft;
dY = cDiv.offsetTop;
cDiv.style['background-position']=''+(-dX)+'px '+(-dY)+'px'; // 每个div都贴上图片
cDiv.setAttribute('class','div_'+a);
}
}
}
// 动画 将div 逐步消失
r_this.animation = () =>{
childernArr = document.querySelectorAll("div.div_"+index);
for(let i=0;i<childernArr.length;i++) {
childernArr[i].setAttribute('class','opacity')
}
index ++
// 关闭动画
if (index >= lowNum) {
p_box.remove(); // 清除遮罩
window.cancelAnimationFrame(divHidden);
divHidden = null;
return;
}
divHidden = window.requestAnimationFrame(function( callback ){
window.setTimeout(r_this.animation, 1000 / 20);//定义每秒执行60次动画
});
}
}
// 创建方法
var render = new Render();
// 创建遮罩div图片
render.createDiv();
// 让遮罩先停留一秒开始动画
setTimeout(function(){
render.animation();
},1000)
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/148011.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...