扑捉一只耿鬼（HTML文件）

最新推荐文章于 2025-01-17 22:10:04 发布

Coisini_甜柚か

最新推荐文章于 2025-01-17 22:10:04 发布

阅读量2.2k

点赞数 10

分类专栏：游戏 web前端文章标签： html css

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/141634687

版权

图例：

在这里插入图片描述

代码：

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

<head>
    <meta charset="UTF-8" />
    <title>耿鬼</title>
    <style>
        body {
     
            background: #fff;
            font-family: 'Comfortaa', sans-serif;
        }

        * {
     
            box-sizing: border-box;
        }

        *:before,
        *:after {
     
            content: '';
            position: absolute;
        }

        main {
     
            width: 400px;
            height: 400px;
            margin: auto;
            text-align: center;
        }

        .gengar {
     
            background: #9179c6;
            margin: 3em auto 5em;
            width: 310px;
            height: 350px;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            margin: auto;
            position: relative;
        }

        .gengar .ear {
     
            width: 150px;
            height: 150px;
            background: #9179c6;
            border-radius: 10px;
            position: relative;
            transform: rotate(-120deg) skewX(-40deg) scale(1, 0.866);
            position: absolute;
            top: 0;
        }

        .gengar .ear.right {
     
            position: absolute;
            background: #9179c6;
            transform: rotate(110deg) skewX(40deg) scale(1, 0.866);
            right: 0;
        }

        .gengar .hair {
     
            width: 0;
            height: 0;
            position