HTML&CSS：熊猫与鼠标的眼神密语这个 HTML 和 CSS 代码创建了一个具有动画效果的熊猫形象，它的眼睛会随着鼠

这个 HTML 和 CSS 代码创建了一个具有动画效果的熊猫形象，它的眼睛会随着鼠标的移动而转动。

一键复制

<!DOCTYPE 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>前端Hardy</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(0deg, #000, #272727);
        }

        .container {
            width: 500px;
            height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0px 15px;
            background-color: red;
            border-radius: 10px;
            border: none;
            color: white;
            position: relative;
            cursor: pointer;
            transition-duration: .2s;
            background: #f7d6ff;
            background-image: linear-gradient(to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);
        }


        .container:before,
        .container:after {
            content: '';
            position: absolute;
            left: -2px;
            top: -2px;
            border-radius: 10px;
            background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094,
                    #0000ff, #00ff00, #ffff00, #ff0000);
            background-size: 400%;
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            z-index: -1;
            animation: steam 20s linear infinite;
        }

        @keyframes steam {
            0% {
                background-position: 0 0;
            }

            50% {
                background-position: 400% 0;
            }

            100% {
                background-position: 0 0;
            }
        }

        .container:after {
            filter: blur(100px);
        }

        .panda {
            background-color: #fff;
            border-radius: 50%;
            position: relative;
            height: 170px;
            width: 170px;
        }

        .panda .ear {
            background-color: #000;
            border-radius: 50%;
            position: absolute;
            top: 5px;
            height: 50px;
            width: 50px;
            z-index: -1;
        }

        .panda .ear.left {
            left: 0;
        }

        .panda .ear.right {
            right: 0;
        }

        .panda .eye {
            background-color: #000;
            position: absolute;
            top: 50px;
            left: 50%;
            height: 50px;
            width: 40px;
        }

        .panda .eye.left {
            border-radius: 100% 60% 80% 60%;
            transform: translateX(calc(-50% - 35px));
        }

        .panda .eye.right {
            border-radius: 60% 100% 60% 80%;
            transform: translateX(calc(-50% + 35px));
        }

        .panda .eye .eye-roll {
            background: #fff;
            border-radius: 50%;
            position: absolute;
            top: 20px;
            left: 20px;
            height: 12px;
            width: 12px;
            transform-origin: center left;
        }

        .panda .nose {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%);
        }

        .panda .mouth {
            background: transparent;
            border-radius: 0 0 50% 50%;
            border: 2px solid transparent;
            border-bottom: 2px solid #000;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%);
            height: 50px;
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="panda">
            <div class="ear left"></div>
            <div class="ear right"></div>
            <div class="eye left">
                <div class="eye-roll"></div>
            </div>
            <div class="eye right">
                <div class="eye-roll"></div>
            </div>
            <div class="nose">
                <i class="fa fa-heart"></i>
            </div>
            <div class="mouth"></div>
        </div>
    </div>
</body>

<script>
    const eyes = document.querySelectorAll('.eye-roll');
    window.addEventListener('mousemove', (e) => {
        eyes.forEach(eye => {
            const x = eye.getBoundingClientRect().left + (eye.clientWidth / 2);
            const y = eye.getBoundingClientRect().top + (eye.clientHeight / 2);
            const radian = Math.atan2(e.pageX - x, e.pageY - y);
            const rot = (radian * (180 / Math.PI) * -1) + 90;
            eye.style.transform = `rotate(${rot}deg)`;

            console.log(rot);
        });
    });
</script>

</html>
</body>

</html>

container：作为最外层容器，用于包含熊猫形象。设置了宽度、高度、背景渐变色、边框半径等样式。
panda：包含熊猫的所有部分，如耳朵、眼睛、鼻子和嘴巴。
ear left 和 ear right：分别代表熊猫的左耳和右耳。每个眼睛包含一个 eye-roll，代表眼珠。
nose：代表熊猫的鼻子，使用 Font Awesome 图标库中的心形图标
fa fa-heart 和 mouth：代表熊猫的嘴巴。
.container 设置容器的宽度、高度、显示方式、背景颜色、边框半径、边框、颜色、位置、光标和过渡效果。
.container:before 和 .container:after 用于创建背景的动态渐变效果，通过 background-size 和 animation 属性实现。
.panda 设置熊猫的背景颜色、边框半径、尺寸和位置。
.ear 设置耳朵的背景颜色、边框半径、位置和尺寸。
.eye 设置眼睛的背景颜色、位置、尺寸和形状。
.eye-roll 设置眼珠的背景颜色、边框半径、位置和尺寸。
.nose 和.mouth 设置鼻子和嘴巴的位置和尺寸。