master

分支 (1)

管理

管理

master

myBlog
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
            overflow: hidden;
        }

        .heart {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            height: 260px;
            margin: auto;
            transform-style: preserve-3d;
            perspective: 1600px;
            animation: rot 15s linear infinite;
        }

        @keyframes rot {
            from {
                transform: rotateY(0deg) rotateX(0deg)
            }

            to {
                transform: rotateY(360deg) rotateX(360deg)
            }
        }

        .rib {
            position: absolute;
            width: 200px;
            height: 260px;
            border: solid black;
            border-width: 1px 1px 0 0;
            border-radius: 100% 100% 0/40% 100% 0;
            transition: all 1s;
        }

        .cube {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            color: red;
            transform-style: preserve-3d;
            transform: translateZ(50px);
        }

        .cube div {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .cube div:nth-child(1) {
            background: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=183905887,3000853773&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: 0;
            top: -100px;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }

        .cube div:nth-child(2) {
            background: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3012749818,4259798588&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: 0;
            top: 100px;
            transform-origin: top;
            transform: rotateX(-90deg);
        }

        .cube div:nth-child(3) {
            background: url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=166978379,1812273650&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: -100px;
            top: 0px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }

        .cube div:nth-child(4) {
            background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3051779986,3017825313&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: 100px;
            top: 0px;
            transform-origin: left;
            transform: rotateY(90deg);
        }

        .cube div:nth-child(5) {
            background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2100355634,1284571918&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: 0;
            top: 0px;
        }

        .cube div:nth-child(6) {
            background: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1117790015,2938395414&fm=26&gp=0.jpg') no-repeat center center/cover;
            left: 0;
            top: 0px;
            transform: translateZ(-100px);
        }
    </style>
</head>

<body>

    <div class="heart">
        <div class="cube">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <audio autoplay="autoplay" controls="controls">
        <source src="http://music.163.com/song/media/outer/url?id=1384026889.mp3" type="audio/ogg">
    </audio>
    <script>
        var heart = document.getElementsByClassName("heart")[0];
        for (var i = 0; i < 36; i++) {
            var oDiv = document.createElement("div");
            oDiv.className = "rib";
            // 画36条心形曲线
            oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)";

            // oDiv.style.borderColor = getRandomColor();

            heart.appendChild(oDiv);
        }

        var n = 0;
        setInterval(function () {
            if (n < 36) {
                document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();
                n = n + 1;
            } else {
                n = 0;
            }
        }, 100)
        console.log(n)

        // 随机色
        function getRandomColor() {
            return '#' +
                (function (color) {
                    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)])
                        && (color.length == 6) ? color : arguments.callee(color);
                })('');
        }
    </script>
</body>

</html>