zoukankan      html  css  js  c++  java
  • js图片碎片效果(移动端也适用)

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>利用JS实现文字的聚合动画效果</title>
        <style>
            .boxWrap1{width: 160px;height: 417px;position: relative;margin:0px auto;}
            .boxWrap1 img{width: 100%;}
            .boxWrap1 div{background: url(http://itakeo.com/wpimg/2_1.png) no-repeat;background-size: 160px auto; position: absolute; left: 0px;top: 0px;
            }
            .boxWrap1.set div{ opacity: 1!important;
                transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
                -moz-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
                -webkit-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
            }
            .boxSiteWrap{ width: 100%;overflow: hidden;height: auto; background: #000;padding: 140px 0}
            .boxSiteWrap button{cursor:pointer;display: block;font-size: 16px; width: 140px;height: 40px; background: #fff;color: #000;border:none;margin:30px auto;}
        </style>
    </head>
    
    <body>
    <div class="boxSiteWrap">
        <div class="boxWrap1"></div>
        <button>重新加载</button>
    </div>
    
    <script>
        window.addEventListener('load',function(){
            ;(function(){
                function init(){
                    var box = document.querySelector('.boxWrap1')
                     var c=4,r=8;
                    var w = box.offsetWidth/c,h = box.offsetHeight/r;
                    for(var i=0;i<r;i++){
                        for(var j=0;j<c;j++) {
                            var _div=document.createElement('div');
                            var _left = j * w,_top = i * h;
                            _div.style.cssText = ''+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';
                            _div.style.transition = _div.style.MozTransition = _div.style.WebkitTransition = 'all '+ Random(1,1.8) +'s ease';
                            _div.style.transform = _div.style.MozTransform = _div.style.WebkitTransform = 'perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'
                            box.appendChild(_div);
                        };
                    };
                    setTimeout(function(){
                        box.classList.add('set')
                    },100);
                    function Random(start,end){
                        return Math.random()*(end-start)+start;
                    };
                };
                init();
                var flag = true;
                document.querySelector('button').onclick = function(){
                    if(flag){
                        document.querySelector('.boxWrap1').classList.remove('set')
                        setTimeout(function(){
                            document.querySelector('.boxWrap1').innerHTML = '';
                            init();
                            flag = true;
                        },1200);
                        flag = false;
                    };
                };
            })();
        });
    </script>
    </body>
    </html>

     demo:https://controllerone.github.io/demo/piece.html

    原文链接:http://itakeo.com/blog/2015/12/14/imgcover/?none=123

  • 相关阅读:
    钱多多软件制作04
    团队项目01应用场景
    HDU 4411 arrest
    HDU 4406 GPA
    HDU 3315 My Brute
    HDU 3667 Transportation
    HDU 2676 Matrix
    欧拉回路三水题 POJ 1041 POJ 2230 POJ 1386
    SPOJ 371 BOXES
    POJ 3422 Kaka's Matrix Travels
  • 原文地址:https://www.cnblogs.com/xiaobaibubai/p/7504112.html
Copyright © 2011-2022 走看看