<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hu</title>
<body background="https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg"
style="background-repeat:no-repeat;
background-attachment : fixed;
background-size: 100% 100%; ">
</body>
<audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="https://t4.kugou.com/song.html?id=9dUQXa1CNV2"></audio>
<style type="text/css">
#imgwrap{width: 880px;height: 300px;margin: 50px auto;perspective: 880px;}
#imgwrap img{width:200px;height:200px;float: centre;}
#btn{width: 100px;text-align: center;font: 16px/40px "微软雅黑";color: white;padding: 0 20px;
margin:0 auto;border-radius:5px;background: rgb(163, 44, 125);box-shadow: 2px 2px 5px rgba(33, 119, 43, 0.5);cursor: pointer;}
/*box-shadow(阴影): 2px(x) 2px(y) 5px(大小) rgba(0,0,0,0.5);*/
</style>
<script type="module" src=""></script>
<script type="text/javascript">
window.οnlοad=function(){
var btn=document.getElementById('btn');
var imgs=document.querySelectorAll('img');
var on=true;
btn.οnclick=function(){
if(!on){
return;
}
on=false;
var endNum=0; //运动完成的图片数量
var allEnd=0; //用来判断所有的图片是否都运动完了
for(var i=0;i<imgs.length;i++){
(function(i){
setTimeout(function(){
montion(imgs[i],'10ms',function(){
this.style.transform="scale(0)"; //缩放到0
},function(){
//第二个运动要在这里写
montion(this,'1s',function(){
this.style.transform="scale(1)";
this.style.opacity=0;
},function(){
endNum++; //只要有一张图走完了,就让他加个1
if(endNum==imgs.length){
toBig();
}
});
});
},Math.random()*1000); //500毫秒
})(i)
}
function toBig(){
// 这个函数用来做第三个效果
/*
* 坐标轴
* x轴(平行地面)
* y轴(垂直地面)
* x轴(垂直屏幕)
*/
for(var i=0;i<imgs.length;i++){
imgs[i].style.transition="";
//想要一个物体有css3中的一些变化,那就需要给他一个初始值
imgs[i].style.transform='rotateY(0deg)translateZ(-'+Math.random()*500+'px)';
//用这种方式去写是因为想要在循环里找i的值
(function(i){
setTimeout(function(){
montion(imgs[i],'2s',function(){
this.style.opacity=1;
this.style.transform='rotateY(-3600deg) translateZ(0)';
},function(){
allEnd++;
if(allEnd==imgs.length){
//这个条件成立,说明所有图片都运动完了,可以让用户再次点击了
on=true; //当所有运动完了以后才可以点
}
});
},Math.random()*1000);
})(i);
}
};
};
// 运动函数(运动的对象/运动的时间/运动的属性函数/运动完成后要做的事情)
function montion(obj,time,doFn,callBack){
obj.style.transition=time;
doFn.call(obj); //调用函数,并把this的指向给obj
var called=false; //解决transitionend调用多次的bug
obj.addEventListener('transitionend',function(){
if(!called){
callBack&&callBack.call(obj);
called=true;
}
},false);
}
};
</script>
</head>
<body>
<div id="imgwrap">
<img src="https://www.keaitupian.cn/cjpic/frombd/2/253/2107631312/3178897554.jpg" >
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.b8e84a0907bf9b5128dfa48be0ae48af?rik=tfH6k%2fT3hkauqw&riu=http%3a%2f%2fwww.08lr.cn%2fuploads%2fallimg%2f220330%2f1-2300141M0.jpg&ehk=dR6hTo1o7lNsHkpE62oIzMtJ%2bmxktf7%2fx6tp3Zt2uB8%3d&risl=&pid=ImgRaw&r=0">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.57384e4c2dd256a755578f00845e60af?rik=uy9%2bvT4%2b7Rur%2fA&riu=http%3a%2f%2fimg06file.tooopen.com%2fimages%2f20171224%2ftooopen_sy_231021357463.jpg&ehk=whpCWn%2byPBvtGi1%2boY1sEBq%2frEUaP6w2N5bnBQsLWdo%3d&risl=&pid=ImgRaw&r=0">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.0173a09b9c2ba6da89cfd89c492cae5b?rik=rmrp5VZYz2BTgQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f78%2f78_9.jpg&ehk=1T8b3FMg14%2bqrb1H9CaROVxQVIhp2vvDyfGbMjzzTKA%3d&risl=&pid=ImgRaw&r=0">
</div>
<div id="btn">
点一下!
</div>
</body>