基于clip-path的任意元素的碎片拼接动效_使用clip-path实现一个拼图块样式-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clip[style] {
            opacity: 0;
        }
        .active .clip:not([style]) {
            opacity: 0;
            animation: fadeIn .1s .9s both;
        }
        .active .clip[style] {
            will-change: transform;
            animation: noTransform 1s both;
        }

        @keyframes noTransform {
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0) rotate(0deg);
            }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .box { height: 190px; }
        .text { position: absolute; width: 300px; }
        .image { position: absolute;width: 250px;}
    </style>
</head>
<body>
<strong>1. 普通带文本的元素</strong>
<div class="box active">
    <p id="text" class="text clip">魔兽要上映了，由于我从来没有玩过《魔兽世界》，所以无感。但是，有一点我是知道的：不管是联盟狗还是部落猪，最后都是为了艾泽拉斯！</p>
</div>

<strong>2. 替换元素如图片</strong>
<div class="box active">
    <img id="image" class="image clip" src="img/24.jpg">
</div>
</body>
<script type="text/javascript">
    window.οnlοad=function () {
        console.log(reader);
        var clipPath=function(t){
            if(!t){
                return false
            }
            t.removeAttribute("id");
            var r={
                height:t.clientHeight,
                width:t.clientWidth,
                distance:60,
                html:t.outerHTML
            };
            if(window.getComputedStyle(document.body).webkitClipPath){
                var a=r.distance,n=r.width,e=r.height;
                var o="";
                for(var i=0;i<n;i+=a){

                    for(var h=0;h<e;h+=a){
                        var d=[i,h],u=[i,h+a],l=[i+a,h+a],v=[i+a,h];
                        var c=[i+a/2,h+a/2];
                        var m=[[d,c,v],[d,u,c],[c,u,l],[v,c,l]];
                        m.forEach(function(t,a){
                            var n=t.map(function(t){
                                return t.map(function(t){
                                    return t+"px"
                                }).join(" ");
                            }).join();
                            var e="-webkit-clip-path: polygon("+n+");";
                            var i=Math.random();
                            console.log(i);
                            var h=i<.5?-1:1;
/*                            var d=[[h*(200+Math.round(500*i)),-1*(500+Math.round(300*i))],[h*(100+Math.round(500*i)),-1*(400+Math.round(600*i))],[h*(50+Math.round(500*i)),-1*(500+Math.round(300*i))],[h*(100+Math.round(400*i)),1*(500+Math.round(700*i))]];*/
                            var u=[600*(.5-Math.random()),600*(.5-Math.random())];
                            var l="translate("+u.map(function(t){return t+"px"}).join()+") rotate("+Math.round(h*360*Math.random())+"deg)";
                            var v="-webkit-transform:"+l+";transform:"+l+";";
                            o=o+r.html.replace('">','" style="'+e+v+'">')
                        })
                    }
                }
                t.parentNode.innerHTML=r.html+o;return true
            }
            else{
                t.className+=" no-clipath";return false
            }
        };

        var eleText = document.getElementById('text'),
                eleImage = document.getElementById('image');

        // 碎片特效初始化
            clipPath(eleText);
        clipPath(eleImage);
    };

</script>

</html>
转自：张鑫旭博客地址：http://www.zhangxinxu.com/wordpress/?p=5429