爆炸翻页HTML5+CSS3

作者: 函数function | 来源:发表于2016-12-03 17:58 被阅读0次

爆炸翻页HTML5+CSS3
颗粒翻页HTML5+CSS3
立体翻页HTML5+CSS3
css3+js翻页效果一：爆炸翻页
3Df翻页HTML5+CSS3
翻页，再翻页
动画翻页书 —— 不忘初心童心童趣
每天一条linux命令——less
html5+css3实现日食动画过程
前端学习路线

爆炸翻页.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>李立昌 http://www.jianshu.com/users/b1e8423ae7e2/latest_articles</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{ overflow: hidden;}
    #box{
        width: 700px;
        height: 400px;
        background:url("img/1.jpg") no-repeat;
        margin:100px auto;
        position: relative;
    }
    #box span{
        position: absolute;
        background:url("img/0.jpg") no-repeat;
        transform:perspective(800px)  translate(0,0) rotateX(0deg) rotateY(0deg) scale(1);
    }

</style>
<script>
    function rnd(m,n){
        return parseInt(m+Math.random()*(n-m));
    }
    document.addEventListener('DOMContentLoaded',function(){
        var oBox = document.getElementById('box');
        //1铺span
        var C = 7;
        var R = 4;
        for(var r = 0;r<R;r++){
            for(var c = 0;c<C;c++){
                //创建span
                var oSpan = document.createElement('span');
                var w = oBox.offsetWidth/C;
                var h = oBox.offsetHeight/R;
                oSpan.style.width = w +'px';
                oSpan.style.height = h +'px';
                oSpan.style.left = w*c+'px';
                oSpan.style.top = h*r+'px';
                oBox.appendChild(oSpan);
                oSpan.style.backgroundPosition = -oSpan.offsetLeft+'px -'+oSpan.offsetTop+'px';
            }
        }
        //点击
        var aSpan = oBox.children;
        var iNow = 0;
        var bReady = true;
        oBox.onclick = function(){
            if(bReady==false){return;}
            bReady = false;
            iNow++;
            for(var i = 0;i<aSpan.length;i++){
                //爆炸开
                var x = aSpan[i].offsetLeft+aSpan[i].offsetWidth/2 - oBox.offsetWidth/2;
                var y = aSpan[i].offsetTop+aSpan[i].offsetHeight/2 - oBox.offsetHeight/2;
                aSpan[i].style.transition = '1s all ease';
                aSpan[i].style.transform  = 'perspective(800px)  translate('+x+'px,'+y+'px) rotateX('+rnd(-180,180)+'deg) rotateY('+rnd(-180,180)+'deg) scale(1.4)';
                aSpan[i].style.opacity = 0;
            }
        };

        aSpan[0].addEventListener('transitionend',function(){
            //瞬间拉回
            bReady = true;
            for(var i = 0;i<aSpan.length;i++){
                aSpan[i].style.transition = 'none';
                aSpan[i].style.transform = 'perspective(800px)  translate(0,0) rotateX(0deg) rotateY(0deg) scale(1)';
                aSpan[i].style.opacity = 1;
                //换图
                aSpan[i].style.backgroundImage = 'url("img/'+iNow%3+'.jpg")';
                oBox.style.backgroundImage = 'url("img/'+((iNow+1)%3)+'.jpg")';
            }
        },false);
    },false);
</script>
</head>
<body>
<div id="box">
</div>
</body>
</html>