css滚动网页实现照片波动过渡动画效果代码-html代码-BFW代码库

css滚动网页实现照片波动过渡动画效果代码

代码语言：html

所属分类：动画

代码描述：css滚动网页实现照片波动过渡动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">





    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        ul {
            display: none;
        }
        p {
            z-index: -1;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>


</head>

<body>
    <p id="loading">
        Now Loading...
    </p>
    <ul>

        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="sliced mango. ">Dolor Sit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="a bunch of blueberries. ">Amet Consectetur</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6078dc95244d6.png" alt="a pineapple sitting on a table. ">Adipiscing Elit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="sliced mango. ">Dolor Sit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="a bunch of blueberries. ">Amet Consectetur</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6078dc95244d6.png" alt="a pineapple sitting on a table. ">Adipiscing Elit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="sliced mango. ">Dolor Sit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="a bunch of blueberries. ">Amet Consectetur</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6078dc95244d6.png" alt="a pineapple sitting on a table. ">Adipiscing Elit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="sliced mango. ">Dolor Sit</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6065033ab18d9.png" alt="a bunch of blueberries. ">Amet Consectetur</li>
        <li> <img src="//repo.bfw.wiki/bfwrepo/image/6078dc95244d6.png" alt="a pineapple sitting on a table. ">Adipiscing Elit</li>
    </ul>



    <script>
        var w, m, c, C, W, H, HW, HH, R, r, d, nd, wv, p, countLoaded, nowIndex, ts, tm, te, images = [];

        var makeCanvas = function () {
            document.
            getElementsByTagName("body")[0].
            appendChild(document.createElement("canvas"));
            w = window;
            m = Math;
            c = document.getElementsByTagName("canvas")[0];
            C = c.getContext("2d");
        };

        var init = function () {
            W = c.width = w.innerWidth;
            HW = W / 2;
            H = c.height = w.innerHeight;
            HH = H / 2;
            R = W > H ? W / H: H / W;
            wv = 0;
            p = 0;
            countLoaded = 0;
            nowIndex = 0;
        };

        var getImageData = function () {
            if (W > H) {
                C.drawImage(
                    images[nowIndex],
                    HW - W / 2,
                    HH - H * R / 2,
                    W,
                    H * R);

            } else {
                C.drawImage(
                    images[nowIndex],
                    HW - W * R / 2,
                    HH - H / 2,
                    W * R,
                    H);

            }
            d.........完整代码请登录后点击上方下载按钮下载查看