扑捉一只耿鬼（HTML文件）

图例：

在这里插入图片描述

代码：

<!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: absolute;
            top: -45px;
            left: 50%;
            margin-left: -45px;
            transform: rotate(10deg);
            border-bottom: 100px solid #9179c6;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
        }

        .gengar .hair.two,
        .gengar .hair.two:before,
        .gengar .hair.two:after {
            transform: rotate(-30deg);
            margin-left: -60px;
            top: -35px;
            border-bottom: 80px solid #9179c6;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }

        .gengar .hair.two:before {
            transform: rotate(60deg) translate(130px, -50px);
        }

        .gengar .hair.two:after {
            transform: rotate(-15deg) translate(-10px, 48px);
            border-bottom: 40px solid #9179c6;
        }

        .gengar .eye {
            width: 100px;
            height: 50px;
            background: #f6b392;
            border-radius: 0 0 200px 200px;
            position: absolute;
            top: 33%;
            overflow: hidden;
            transition: 0.3s ease;
        }

        .gengar .eye:before {
            width: 20px;
            height: 35px;
            background: black;
            border-radius: 100%;
            transform: rotate(-35deg);
        }

        .gengar .eye:after {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
            left: 43%;
            top: 10px;
        }

        .gengar .eye.one {
            left: 50%;
            transform: rotate(35deg);
            margin-left: -120px;
        }

        .gengar .eye.two {
            transform: rotate(-35deg) scaleX(-1);
            right: 50%;
            margin-right: -120px;
        }

        .gengar .mouth {
            position: absolute;
            left: 50%;
            margin-left: -125px;
            top: 7%;
            width: 250px;
            height: 190px;
            border-radius: 50%;
            box-shadow: 0 75px 0 -10px white;
            transition: 0.3s ease;
        }

        .gengar .leg {
            position: absolute;
            width: 320px;
            height: 130px;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            border: 80px solid #7a63ad;
            border-bottom: 0;
            top: 75%;
            left: 0;
            right: 0;
            margin: auto;
            z-index: -1;
        }

        .gengar .leg:before,
        .gengar .leg:after {
            height: 20px;
            border-radius: 10px;
            width: 85px;
            bottom: -5px;
            background: #7a63ad;
        }

        .gengar .leg:before {
            left: -84.5px;
        }

        .gengar .leg:after {
            right: -84.5px;
        }

        .gengar .hand {
            position: absolute;
            width: 85px;
            height: 140px;
            background: #9179c6;
            border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
            transform: rotate(59deg);
            top: 31%;
            left: -40px;
        }

        .gengar .hand.two {
            transform: rotate(-59deg);
            left: auto;
            right: -40px;
        }

        input[type='checkbox'] {
            height: 0;
            width: 0;
            visibility: hidden;
        }

        label {
            background: #eee;
            width: 160px;
            height: 75px;
            border-radius: 80px;
            display: inline-block;
            margin: 4em auto;
            position: relative;
            cursor: pointer;
        }

        label span {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 65px;
            height: 65px;
            background: #333;
            border-radius: 50%;
            transition: 0.5s;
            border: 3px solid #222;
            background: radial-gradient(#fff, #fff 15%, #333 15%, #333 24%, transparent 24%), linear-gradient(to bottom, #d02222, #d02222 45%, #222 45%, #222 52%, #fff 52%);
        }

        input:checked+label span {
            left: 90px;
            transform: rotate(360deg);
            background: #f38dcb;
            border-radius: 200% 320% 150% 150%;
            border-radius: 50%;
            background-repeat: no-repeat;
            background-image: radial-gradient(ellipse, black 50%, transparent 50%), radial-gradient(ellipse, black 50%, transparent 50%), linear-gradient(#333, #333);
            background-size: 6px 6px, 6px 6px, 25px 2px;
            background-position: 28% 50%, 80% 50%, 55% 64%;
        }

        input:checked~.gengar .eye {
            background: black;
            width: 16px;
            height: 16px;
            border-radius: 50%;
        }

        input:checked~.gengar .eye.one {
            margin-left: -60px;
        }

        input:checked~.gengar .eye.two {
            margin-right: -60px;
        }

        input:checked~.gengar .eye:before,
        input:checked~.gengar .eye:after {
            content: none;
        }

        input:checked~.gengar .mouth {
            margin-left: -100px;
            top: 35%;
            width: 210px;
            height: 50px;
            border-radius: 50%;
            box-shadow: 0 15px 0 -10px #131313;
        }
    </style>
</head>

<body>
    <main>
        <input type="checkbox" id="ditto-me" />
        <label for="ditto-me"><span></span></label>
        <div class="gengar">
            <div class="ear left"></div>
            <div class="ear right"></div>
            <div class="hair"></div>
            <div class="hair two"></div>
            <div class="hand"></div>
            <div class="hand two"></div>
            <div class="mouth"></div>
            <div class="eye one"></div>
            <div class="eye two"></div>
            <div class="leg"></div>
        </div>
    </main>
</body>

</html>