实现一个灯笼效果，实现了一个意想不到的效果。-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>recall</title>
<style>
{
margin: 0;
padding: 0;
}
body{
background: #000000;
overflow: hidden;
}
.container1{
width: 1300px;
position: relative;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
.dl img,.dll img,.dlll img{
transform: rotateX(-180deg) rotateZ(90deg);
}
.dl{
width: 75px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 100px auto;
animation: zd step-end 1s;
}
.dll{
width: 125px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 100px auto;
animation: zd step-end 1s;
}
.dlll{
width: 200px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: all 1s;
position: relative;
transform: rotateX(-10deg) rotateY(0deg);
-webkit-transform: rotateX(-10deg) rotateY(0deg);
margin: 50px auto;
animation: zd step-end 1s;
}
@keyframes zd{
from{ transform: scale(0);}
to{ transform: scale(1);}
}
.dlll img{
width: 200px;
height: 400px;
position: absolute;
opacity: 0;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);/
left: 0;
top: 0;
}
.dll img{
width: 125px;
height: 200px;
position: absolute;
opacity: 0;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);/
left: 0px;
top: 0;
}
.dl img{
width: 75px;
height: 100px;
position: absolute;
opacity: 1;
transition: all 3s ease-in-out;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
/transform: rotateY(-20deg);*/
left: 0px;
top: 0;
}
.dl-2 img{
top: 100px;
}
.dl-3 img{
top: 200px;
}
.dl-4 img{
top: 300px;
}
.dll-2 img{
top: 200px;
}
.lz{
position: absolute;
top: 180px;
margin: 0px auto;
width: 20px;
height: 40px;
background: -webkit-linear-gradient(#CC3333,#FF6666,#FFCCCC );
position: relative;
}
.hy{
border-radius: 100%;
position: absolute;
top: -40px;
left: 50%;
margin-left: -10px;
width: 20px;
height: 40px;
}
.hy:nth-child(1) {
-webkit-animation: hy 2s infinite;
animation: hy 2s infinite;
}
.hy:nth-child(2) {
-webkit-animation: hy 1.5s infinite;
animation: hy 1.5s infinite;
}
.hy:nth-child(3) {
-webkit-animation: hy 1.5s infinite;
animation: hy 1s infinite;
}
.hy:nth-child(4) {
-webkit-animation: hy 1.5s infinite;
animation: hy .5s infinite;
}
.hy:nth-child(5) {
-webkit-animation: hy 1.5s infinite;
animation: hy .2s infinite;
}
@keyframes hy{
0%, 100% {
background: rgba(254, 248, 97, 0.5);
-webkit-box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
}
50% {
background: rgba(255, 50, 0, 0.1);
-webkit-box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
-webkit-transform: translateY(-20px) scale(0);
transform: translateY(-20px) scale(0);
}
}
.ig{
position: relative;
}
.ig img{
position: absolute;
width: 50px;
height: 50px;
top: -300px;
animation: xh 3s linear infinite;
}
@keyframes xh{
from{
top:-300px;
transform: rotateZ(0deg);
}
to{
top:450px;
transform: rotateZ(360deg);
}
}

snowFlow img{

            width: 50px;
            height: 50px;
        }
        @keyframes mysnow{ 
            0% { bottom: 100%; opacity: 0; } 
            50% { opacity: 1; transform: rotateZ(720deg) rotateX(720deg) rotateY(720deg);} 
            100% { transform: rotateZ(0deg); opacity: 0; bottom: 0%;} } 
        .container { position: fixed; } 
        .pic { position: absolute; opacity: 0; animation: mysnow 5s;height: 90px; } 
    </style>
</head>
<body>
    <script src="../../jq/01/jquery-1.11.3.js"></script>
    <div class="container1">
        <div class="dl dl-1">
            <img src="a-img/001.jpg"/>
            <img src="a-img/002.jpg"/>
            <img src="a-img/003.jpg"/>
            <img src="a-img/004.jpg"/>
            <img src="a-img/005.jpg"/>
            <img src="a-img/006.jpg"/>
        </div>
        <div class="dl dl-2">
            <img src="a-img/007.jpg"/>
            <img src="a-img/008.jpg"/>
            <img src="a-img/009.jpg"/>
            <img src="a-img/010.jpg"/>
            <img src="a-img/011.jpg"/>
            <img src="a-img/012.jpg"/>
        </div>
        <div class="dl dl-3">
            <img src="a-img/025.jpg"/>
            <img src="a-img/026.jpg"/>
            <img src="a-img/027.jpg"/>
            <img src="a-img/028.jpg"/>
            <img src="a-img/029.jpg"/>
            <img src="a-img/030.jpg"/>
        </div>
        <div class="dl dl-4">
            <img src="a-img/031.jpg"/>
            <img src="a-img/032.jpg"/>
            <img src="a-img/033.jpg"/>
            <img src="a-img/034.jpg"/>
            <img src="a-img/035.jpg"/>
            <img src="a-img/036.jpg"/>
        </div>
        <div class="dll dll-1">
            <img src="a-img/013.jpg"/>
            <img src="a-img/014.jpg"/>
            <img src="a-img/015.jpg"/>
            <img src="a-img/016.jpg"/>
            <img src="a-img/017.jpg"/>
            <img src="a-img/018.jpg"/>
        </div>
        <div class="dll dll-2">
            <img src="a-img/019.jpg"/>
            <img src="a-img/020.jpg"/>
            <img src="a-img/021.jpg"/>
            <img src="a-img/022.jpg"/>
            <img src="a-img/023.jpg"/>
            <img src="a-img/024.jpg"/>
        </div>
        <div class="dlll dlll-1">
            <img src="a-img/037.jpg"/>
            <img src="a-img/038.jpg"/>
            <img src="a-img/039.jpg"/>
            <img src="a-img/040.jpg"/>
            <img src="a-img/041.jpg"/>
            <img src="a-img/042.jpg"/>
        </div>
        <!--<div class="dlll dlll-2">
            <img src="a-img/043.jpg"/>
            <img src="a-img/045.jpg"/>
            <img src="a-img/046.jpg"/>
            <img src="a-img/012.jpg"/>
            <img src="a-img/034.jpg"/>
            <img src="a-img/035.jpg"/>
        </div>-->
        <div class="lz">
            <div class="hy"></div>
            <div class="hy"></div>
            <div class="hy"></div>
            <div class="hy"></div>
            <div class="hy"></div>
        </div>
        <div id="snowFlow">

        </div>
    </div>
    <script>
        $(function(){
            var oLen = $('.dl-1 img').length;
            var oDeg = 360/oLen;
            $('.dl img').each(function(i){

// var i = $(this).index();
$(this).css({'transform':'rotateY('+oDeg*i+'deg) translateZ(65px)'});
})

            var ooDeg = 0;
            var bb = 0;

// var aa = 1;
setInterval(function(){
ooDeg+=oDeg;
if(ooDeg%360 == 0){
bb++;
console.log(bb)
$('.dll img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'1','transform':'rotateX(-360deg) rotateY('+oDegi+'deg) translateZ(108px)'});
$('.dl img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'0','transform':'rotateY(0deg) translateZ(0px)'});
})
})
if((ooDegbb)%720 == 0){
// aa++;
$('.dlll img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'1','transform':'rotateX(-360deg) rotateY('+oDegi+'deg) translateZ(173px)'});
$('.dll img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'0','transform':'rotateY(0deg) translateZ(0px)'});
})
})
if((ooDegbb)%1080 == 0){
$('.dl img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'1','transform':'rotateX(-360deg) rotateY('+oDegi+'deg) translateZ(250px)'});
$('.dlll img').each(function(i){
// var i = $(this).index();
$(this).css({'opacity':'0','transform':'rotateY(0deg) translateZ(0px)'});
})
})
}
}
}
$(".dl").css({'transform':'rotateX(-10deg) rotateY('+ooDeg+'deg)'});
$(".dll").css({'transform':'rotateX(-10deg) rotateY('+ooDeg+'deg)'});
$(".dlll").css({'transform':'rotateX(-10deg) rotateY('+ooDeg+'deg)'});
},1000)
})
</script>
<script>
window.onload=function(){ // snowFlow();
function snowFlow(left,height,src){
var container=document.createElement('div');
var pic=document.createElement('img');
var snowFlow=document.getElementById('snowFlow');
pic.className='pic';
container.className='container';
snowFlow.appendChild(container);
container.appendChild(pic);
container.style.left=left+'px';
container.style.height=height+'px';
pic.src=src;
setTimeout(function(){
snowFlow.removeChild(container);
},5000);
}
setInterval(function(){
var left=Math.random()window.innerWidth;
var height=Math.random()*window.innerHeight;
var src = 'a-img/xh/xh-3.png';
snowFlow(left,height,src);
},500)
}
</script>
</body>
</html>