• clip-path的任意元素的碎片拼接动效


    看了张大神的这篇文章后自己写的,兼容性不好clip-path要加-webkit-

    css

                #test img{position: absolute;}
                .active .clip{
                    will-change: transform;
                    animation: clear_transform .5s both;
                }
                @keyframes clear_transform {
                    to {
                        opacity: 1;
                        transform: translate3d(0, 0, 0) rotate(0) scale(1);
                    }
                }
                .active #image{
                    opacity: 0;
                    animation: fadeIn  .1s .4s both;
                }
                @keyframes fadeIn {
                  from { opacity: 0; }
                  to { opacity: 1; }
                }
                #repeat{position: absolute;top: 200px;}

    html

    <div id="test">
                <img src="http://img.mswon.com/img.php?url=http://npic7.edushi.com/cn/zixun/zh-chs/2016-05/31/e-3053153-s1464644414872299.jpg" id='image'/>
            </div>
            <button id='repeat'>再来一次</button>

    JS

    test('image');//image-id
            function test(ele){    
                var clip = {
                    parent:'',
                    id:ele,
                    src:'',
                    num:0,//裁剪个数
                    x_tier:10,//X轴要裁剪的个数
                    y_tier:10,//Y轴要裁剪的个数
                    h:0,//图片高度
                    w:0,//图片宽度
                    y:0,//要裁剪的高度40
                    x:0//要裁剪的宽度60
                }
                clip.parent = document.getElementById(ele).parentNode;//图片父级div
                var img = document.getElementById(clip.id);
                img.onload = function(){
                    clip.src = img.getAttribute('src');
                    clip.h = img.clientHeight;
                    clip.w = img.clientWidth;
                    clip.x = clip.w/clip.x_tier;
                    clip.y = clip.h/clip.y_tier;
                    clip.num = clip.num*clip.num;
                    start_clip();
                }
                function start_clip(){
                    var info = '<img src="'+clip.src+'" id="image" style="opacity:0;"/>';
                    for (var i = 0;i<clip.x_tier;i++){
                        for (var j = 0;j<clip.y_tier;j++) {//(x,y)
                            //裁剪
                            var d1 = (clip.x*j)+'px '+(clip.y*i)+'px';
                            var d2 = (clip.x*j)+'px '+(clip.y*i+clip.y)+'px';
                            var d3 = (clip.x*j+clip.x)+'px '+(clip.y*i+clip.y)+'px';
                            var d4 = (clip.x*j+clip.x)+'px '+(clip.y*i)+'px';
                            var css1 = '-webkit-clip-path: polygon('+d1+','+d2+','+d3+','+d4+');';
                            //旋转
                            var r = random(360)+'deg';
                            //位移
                            var t_x = random(500)+'px';
                            var t_y = random(350)+'px';
                            var t_z = random(100)+'px';
                            //缩放
                            var s = random(1);
                            var css2 = '-webkit-transform:translate3d('+t_x+','+t_y+','+t_z+') rotate('+r+') scale('+s+');';
                            info +='<img class="clip" src="'+clip.src+'" style="'+css1+''+css2+'"/>'
                        }        
                    }
                    clip.parent.innerHTML = info;
                    clip.parent.className = 'active';
                }
                //随机数
                function random(n){
                    var num = Number(Math.random()*n).toFixed(1);
                    return num;
                }
                document.getElementById('repeat').onclick = function(){
                    clip.parent.innerHTML = '<img src="'+clip.src+'" id="'+clip.id+'"/>';
                    test(clip.id);
                }
            }

     代码地址

  • 相关阅读:
    CSS3笔记
    HTML5新标签
    前端工程师面试题JavaScript部分(第五季)
    前端工程师面试题JavaScript部分(第四季)
    前端工程师面试题JavaScript部分(第三季)
    前端组件开发方式(二)
    前端组件开发方式(一)
    面向对象的代码研究(一)
    ServiceDemo,ClientDemo Socket chat
    Socket(java基础)
  • 原文地址:https://www.cnblogs.com/bruce-gou/p/5627435.html
Copyright © 2020-2023  润新知