文单阅读

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>基于TweenMax.js的图片碎裂切换动画</title>
    <style>
        body {
            background-color: #000;
            margin: 0;
            overflow: hidden;
        }

        canvas {
            position: absolute;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
        }

        img {
            position: absolute;
            cursor: pointer;
        }

        #container {
            position: absolute;
            width: 768px;
            height: 485px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="container"></div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/delaunay.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
<!-- partial -->
<script  src="./script.js"></script>
<div style="text-align:center;clear:both;">
    <script src="/statics.js" type="text/javascript"></script>
</div>
</body>
</html>