会动的波吉（html+css+js实现）_css js做动的人-CSDN博客

本文链接：https://blog.csdn.net/weixin_40492102/article/details/121220876

王様ランキング_波吉
最近被这只小可爱圈粉了
话不多说上代码吧

最终效果

html

<!DOC## 标题TYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王様ランキング_波吉</title>
    <link rel="stylesheet" href="./style.css">
    <style id="style-draw"></style>
</head>

<body>
    <div class="code-wrapper">
        <pre id="code"></pre>
    </div>
    <div class="draw-wrapper">
        <div class="title">
            <h1 align='center'>王様ランキング_波吉</h1>
        </div>
        <div class="draw">

            <div class="face">
                <div class="eyebrows">
                    <div class="left-eyebrow"></div>
                    <div class="right-eyebrow"></div>
                </div>
                <div class="nose"></div>
                <div class="mouse mouse-left"></div>
                <div class="mouse mouse-right"></div>
                <div class="red red1"></div>
                <div class="red red2"></div>
                <div class="red red3"></div>
                <div class="red red24"></div>
                <div class="red red27"></div>
                <div class="red red25"></div>
                <div class="ears ears-left"></div>
                <div class="ears ears-right"></div>
            </div>
            <div class="hair hair0"></div>
            <div class="hair hair1"></div>
            <div class="hair hair3"></div>
            <div class="hair hair4"></div>
            <div class="hair hair5"></div>
            <div class="hair hair21"></div>
            <div class="hair hair23"></div>
            <div class="hair hair24"></div>
            <div class="hair hair25"></div>
            <div class="hair hair26"></div>
            <div class="hair hair27"></div>
            <div class="hair hair28"></div>
            <div class="hair hair29"></div>
            <div class="huangguan huangguan1"></div>
            <div class="huangguan huangguan2"></div>
            <div class="huangguan huangguan3"></div>
            <div class="eyes">
                <div class="eye-common left-eye"></div>
                <div class="eye-common right-eye"></div>
            </div>
            <script src="./main.js"></script>
        </div>
    </div>

</body>

</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    background: #137fb8;
}

.code-wrapper {
    position: absolute;
    border: 1px solid #cfcfcf;
    background: rgba(207, 207, 207, 1);
    box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
    border-radius: 10px;
    height: 80%;
    top: 10%;
    width: 40%;
    left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#code {
    overflow: auto;
    height: 85%;
    width: 80%;
    padding: 27px;
    border-radius: 10px;
    word-wrap: break-word;
    word-break: normal;
}

#code::-webkit-scrollbar {
    display: none
}

.draw-wrapper {
    position: absolute;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 5px rgba(207, 207, 207, 0.5);
    border-radius: 10px;
    height: 80%;
    top: 10%;
    width: 40%;
    right: 5%;
    display: flex;
    align-items: center
}

.draw {
    position: absolute;
    width: 100%;
    height: 165px;
}

.title {
    color: white;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
}

!(function() {
    function writeCode(code) {
        let codeContainer = document.getElementById('code')
        let drawContainer = document.getElementById('style-draw');
        let n = 0;
        let id = setInterval(() => {
            n += 1;
            codeContainer.innerHTML = code.substring(0, n);
            drawContainer.innerHTML = code.substring(0, n);
            codeContainer.scrollTop = codeContainer.scrollHeight;
            if (n >= code.length) {
                clearInterval(id);
            }
        }, 1)
    }
    let code = ` .face {
        position: absolute;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        top: 50px;
        left: 50px;
        border-radius: 50%;
        border: 1px solid;
        background: rgb(240, 200, 165);
        z-index: 2;
    }
    
    .nose {
        position: absolute;
        width: 12px;
        height: 12px;
        top: 142px;
        left: 156px;
        border-radius: 50%;
        border-left: 2px solid;
        transform: rotate(120deg);
    }
    
    .mouse {
        position: absolute;
        width: 72px;
        height: 20px;
        top: 222px;
        border-radius: 50%;
        border: 2px solid;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }
    
    .mouse-left {
        left: 82px;
        transform: rotate( 16deg);
    }
    
    .mouse-right {
        left: 148px;
        transform: rotate( -16deg);
    }
    
    .red {
        border-top: 1px solid red;
        position: absolute;
        transform: rotate(-45deg)
    }
    
    .red1 {
        width: 20px;
        height: 20px;
        top: 180px;
        left: 50px;
    }
    
    .red2 {
        width: 30px;
        height: 30px;
        top: 180px;
        left: 60px;
    }
    
    .red3 {
        width: 40px;
        height: 30px;
        top: 180px;
        left: 70px;
    }
    
    .red24 {
        width: 20px;
        height: 20px;
        top: 180px;
        left: 200px;
    }
    
    .red27 {
        width: 30px;
        height: 30px;
        top: 180px;
        left: 210px;
    }
    
    .red25 {
        width: 40px;
        height: 30px;
        top: 180px;
        left: 220px;
    }
    
    .eyes {
        width: 280px;
        height: 80px;
        position: absolute;
        top: 132px;
        left: 60px;
        z-index: 3;
        display: flex;
        justify-content: space-around;
    }
    
    .eye-common {
        background: white;
        border-radius: 50%;
        border-top: 5px solid;
        border-bottom: 1px solid;
    }
    
    .eye-common::after {
        content: '';
        display: block;
        border-radius: 50%;
        background: black;
        margin-top: 38px;
        margin-left: 34px;
    }
    
    .left-eye {
        width: 25%;
        height: 100%;
    }
    
    .left-eye::after {
        width: 25px;
        height: 25px;
    }
    
    .right-eye {
        width: 25%;
        height: 100%;
    }
    
    .right-eye::after {
        width: 25px;
        height: 25px;
        margin-left: 14px;
    }
    
    .ears {
        width: 40px;
        height: 80px;
        border-radius: 50%;
        background: rgb(240, 200, 165);
        position: absolute;
        top: 120px;
        z-index: 9;
    }
    
    .ears-left {
        border-left: 1px solid;
        left: -20px;
    }
    
    .ears-right {
        border-right: 1px solid;
        left: 280px;
    }
    
    .eyebrows {
        position: absolute;
        width: 280px;
        height: 80px;
        top: 52px;
        left: 10px;
        background: rgb(240, 200, 165);
        display: flex;
        justify-content: space-around;
        z-index: 10;
        border-radius: 50%;
    }
    
    .eyebrows>div {
        border-radius: 50%;
        border-top: 1px solid;
    }
    
    .left-eyebrow {
        width: 20%;
        height: 60%;
    }
    
    .right-eyebrow {
        width: 20%;
        height: 60%;
    }
    
    .hair {
        position: absolute;
        border-radius: 50%;
        background: rgb(52, 58, 60);
        z-index: 1;
    }
    
    .hair0 {
        top: 90px;
        left: 40px;
        width: 100px;
        height: 100px;
    }
    
    .hair1 {
        top: 50px;
        left: 80px;
        width: 150px;
        height: 100px;
    }
    
    .hair3 {
        position: absolute;
        top: 30px;
        left: 120px;
        width: 150px;
        height: 100px;
    }
    
    .hair4 {
        position: absolute;
        top: 60px;
        left: 205px;
        width: 150px;
        height: 100px;
        transform: rotate(40deg);
    }
    
    .hair5 {
        top: 100px;
        left: 230px;
        width: 150px;
        height: 100px;
        transform: rotate(40deg);
    }
    
    .hair21 {
        top: 110px;
        left: 30px;
        width: 100px;
        height: 37px;
        transform: rotate(-55deg);
        z-index: 2;
    }
    
    .hair23 {
        top: 60px;
        left: 86px;
        width: 100px;
        height: 37px;
        transform: rotate(-37deg);
        z-index: 2;
    }
    
    .hair24 {
        top: 45px;
        left: 170px;
        width: 110px;
        height: 37px;
        background: rgb(52, 58, 60);
        transform: rotate(10deg);
        z-index: 2;
    }
    
    .hair25 {
        top: 85px;
        left: 260px;
        width: 90px;
        height: 37px;
        transform: rotate(45deg);
        z-index: 2;
    }
    
    .hair26 {
        top: 130px;
        left: 295px;
        width: 90px;
        height: 28px;
        transform: rotate(65deg);
        z-index: 2;
    }
    
    .hair28 {
        top: 80px;
        left: 220px;
        width: 50px;
        height: 50px;
        border-radius: 0 50%;
        transform: rotate(91deg);
        z-index: 2;
    }
    
    .hair29 {
        top: 87px;
        left: 201px;
        width: 39px;
        height: 45px;
        border-radius: 0 50%;
        background: rgb(240, 200, 165);
        transform: rotate(70deg);
        z-index: 2;
    }
    
    .huangguan {
        width: 0;
        height: 0;
        position: absolute;
        transform: rotate(-30deg);
    }
    
    .huangguan1 {
        top: 50px;
        left: 80px;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #d0c872;
    }
    
    .huangguan2 {
        top: 30px;
        left: 90px;
        border-left: 30px solid transparent;
        border-right: 33px solid transparent;
        border-bottom: 30px solid #d0c872;
    }
    
    .huangguan3 {
        top: 20px;
        left: 120px;
        border-left: 30px solid transparent;
        border-right: 33px solid transparent;
        border-bottom: 30px solid #d0c872;
    }`
    writeCode(code);
})()