先贴演示地址

https://www.abellee.cn/comic/
谷歌浏览器演示很棒！
代码

html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>comic</title>
</head>

<body>
    <div class="container"></div>
</body>

<script>
    var quantity = Math.floor( Math.random() * 20 ) + 1;

    var comicWidth = 200;
    var offset = 1;
    var timeInterval = 15;

    var comicHeight = comicWidth;
    var height = window.innerHeight;
    var width = window.innerWidth;
    window.onload = function() {
        init();

        setInterval(function(){
            resize();
            move();
        }, timeInterval);

        function resize() {
            height = window.innerHeight;
            width = window.innerWidth;
        }

        function move() {
            var comics = document.querySelectorAll('.comic');
            for (var i = 0; i < comics.length; i++) {
                moveItem(comics[i], offset);
            }
        }

        function moveItem(element, offset){
            var itemWidth = parseInt(element.style.width, 10);
            var itemScale = itemWidth * element.scale;
            var style = element.style;

            var xaxis = element.xaxis;
            var yaxis = element.yaxis;

            var top = parseInt(style.top, 10);
            var left = parseInt(style.left, 10);

            if(element.xaxis){
                style.left = compute(left, offset);
            }
            if(!element.xaxis){
                style.left = compute(left, -offset);
            }
            if(left <= 0){
                element.xaxis = true;
            }
            if(left >= width - itemScale){
                element.xaxis = false;
            }
            if(element.yaxis){
                style.top = compute(top, offset);
            }
            if(!element.yaxis){
                style.top = compute(top, -offset);
            }
            if(top <= 0){
                element.yaxis = true;
            }
            if(top >= height - itemScale){
                element.yaxis = false;
            }
        }

        function compute(m, n) {
            return (m + n) + 'px';
        }
    }



    function init() {
        appendComic(quantity);
        initComics();
    }

    function initComics() {
        var comics = document.querySelectorAll('.comic');
        for (var i = 0; i < comics.length; i++) {
            var style = comics[i].style;
            comics[i].xaxis = Math.random() >= 0.5;
            comics[i].yaxis = Math.random() >= 0.5;
            style.position = 'absolute';
            style.width = comicWidth + 'px';
            style.height = comicHeight + 'px';
            style.left = Math.random() * (width - comicWidth) + 'px';
            style.top = Math.random() * (height - comicHeight) + 'px';
        }
    }

    function appendComic(quantity) {
        for (var index = 0; index < quantity; index++) {
            var comicNode = document.createElement('div');
            comicNode.classList.add('comic');

            var scale = Math.random();
            comicNode.scale = scale;
            comicNode.style.transform = 'scale(' + scale + ')'
            comicNode.style.transformOrigin = 'top left';

            var mouth = document.createElement('div');
            mouth.classList.add('mouth');

            var left_eye = document.createElement('div');
            left_eye.classList.add('eye');
            left_eye.classList.add('eye_left');

            var right_eye = document.createElement('div');
            right_eye.classList.add('eye');
            right_eye.classList.add('eye_right');

            var left_eye1 = document.createElement('div');
            left_eye1.classList.add('eye1');
            var left_eye2 = document.createElement('div');
            left_eye2.classList.add('eye2');
            var left_eye3 = document.createElement('div');
            left_eye3.classList.add('eye3');
            var left_eye4 = document.createElement('div');
            left_eye4.classList.add('eye4');
            var left_eye5 = document.createElement('div');
            left_eye5.classList.add('eye5');
            var left_eye6 = document.createElement('div');
            left_eye6.classList.add('eye6');

            var right_eye1 = document.createElement('div');
            right_eye1.classList.add('eye1');
            var right_eye2 = document.createElement('div');
            right_eye2.classList.add('eye2');
            var right_eye3 = document.createElement('div');
            right_eye3.classList.add('eye3');
            var right_eye4 = document.createElement('div');
            right_eye4.classList.add('eye4');
            var right_eye5 = document.createElement('div');
            right_eye5.classList.add('eye5');
            var right_eye6 = document.createElement('div');
            right_eye6.classList.add('eye6');

            left_eye.appendChild(left_eye1);
            left_eye.appendChild(left_eye2);
            left_eye.appendChild(left_eye3);
            left_eye.appendChild(left_eye4);
            left_eye.appendChild(left_eye5);
            left_eye.appendChild(left_eye6)

            right_eye.appendChild(right_eye1);
            right_eye.appendChild(right_eye2);
            right_eye.appendChild(right_eye3);
            right_eye.appendChild(right_eye4);
            right_eye.appendChild(right_eye5);
            right_eye.appendChild(right_eye6);

            comicNode.appendChild(mouth);

            comicNode.appendChild(left_eye);
            comicNode.appendChild(right_eye);

            document.querySelector('.container').appendChild(comicNode);
        }
    }

</script>

<style>
    .container {
        width: 100%;
        height: 100%;
    }

    .comic {
        background: #fd8;
        border-radius: 50%;
        box-shadow: 3px 8px 20px 2px rgba(0, 0, 0, 0.3), 
                        /* 内阴影 */
                        0px 0px 20px 10px rgba(238, 170, 85, 0.8)inset;
        /* position: absolute; */
        transform-origin: 50% 100%;
        animation: rotate3 0.5s infinite linear;
    }

    .mouth {
        width: 80%;
        height: 70%;
        border-bottom: 0.3rem solid rgb(80, 64, 31);
        border-left: 0px solid transparent;
        border-right: 0 solid transparent;
        border-radius: 50% / 50%;
        position: absolute;
        bottom: 12.5%;
        left: 10%;
    }

    .eye {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 50%;
        transform: translate(-50%, -25%) rotate(45deg);
    }

    .eye_left {
        left: 20%;
    }

    .eye_right {
        left: 80%;
    }

    .eye1 {
        position: absolute;
        top: 1.5%;
        left: 1.5%;
        width: 38%;
        height: 38%;
        overflow: hidden;
    }

    .eye1::before {
        content: "";
        width: 300%;
        height: 300%;
        position: absolute;
        border: 0.75rem solid #fff;
        border-radius: 150%;
    }

    .eye2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 70px;
        height: 70px;
        overflow: hidden;
    }

    .eye3 {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 65px;
        height: 65px;
        overflow: hidden;
    }

    .eye2::before,
    .eye3::before {
        content: "";
        width: 300px;
        height: 300px;
        position: absolute;
        border: 5px solid #fb7;
        border-radius: 120px;
    }

    .eye4 {
        position: absolute;
        top: 72px;
        left: 9px;
        width: 24px;
        height: 12px;
        overflow: hidden;
        transform: rotate(-160deg);
    }

    .eye5 {
        position: absolute;
        top: 15px;
        left: 66px;
        width: 24px;
        height: 12px;
        overflow: hidden;
        transform: rotate(70deg);
    }

    .eye4::before,
    .eye5::before {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        border: 5px solid #fb7;
        border-radius: 120px;
    }

    .eye6 {
        position: absolute;
        top: 62px;
        left: 17px;
        width: 15px;
        height: 15px;
        background: rgb(37, 37, 37);
        border-radius: 10px;
    }

</style>

</html>
自己写的一个好玩的滑稽减压HTML #3

先贴演示地址

代码

About

Table of Content
