HTML&CSS：熊猫与鼠标的眼神密语，等你来体验！

前端Hardy

已于 2024-11-29 10:09:53 修改

阅读量946

点赞数 15

分类专栏： CSS 文章标签： javascript html css 前端

于 2024-11-29 09:46:35 首次发布

本文链接：https://blog.csdn.net/weixin_52814911/article/details/144128302

版权

这个 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

最低0.47元/天解锁文章