css布局实现一个可点击变暗的皮卡丘效果代码-html代码-BFW代码库

css布局实现一个可点击变暗的皮卡丘效果代码

代码语言：html

所属分类：动画

代码描述：css布局实现一个可点击变暗的皮卡丘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @-webkit-keyframes blinky {
          0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
            transform: scaleY(1);
          }
          10%, 20%, 70% {
            transform: scaleY(0);
          }
        }
        @keyframes blinky {
          0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {
            transform: scaleY(1);
          }
          10%, 20%, 70% {
            transform: scaleY(0);
          }
        }
        :root {
          --black: #8f3632;
          --white: #fff;
          --primary-color: #ff9441;
          --primary-color-dark: #dd814b;
          --primary-color-tint: #ffc562;
          --secondary-color: #697f31;
          --secondary-color-tint: #98b847;
          --tertiary-color: #ebd24c;
          --tertiary-color-dark: #d3b35a;
          --tertiary-color-tint: #fcf691;
          --accent-color: #e63900;
          --background: #ebd5f6;
          --background-shadow: #d8ade3;
          --pumpkin-inside-color: var(--black);
          --darkness-color: #753f8e;
          --stroke-width: 0.3125rem;
          --transition-dur: 0.5s;
          --flip: 1;
        }
        
        * {
          box-sizing: border-box;
        }
        
        html {
          font-size: 14px;
        }
        
        body {
          display: grid;
          place-items: center;
          height: 100vh;
          background-color: var(--background);
          line-height: 1;
        }
        
        .pumpkin {
          display: grid;
          place-items: center;
          position: relative;
          cursor: pointer;
        }
        .pumpkin *,
        .pumpkin *::before,
        .pumpkin *::after {
          position: absolute;
          transition: background-color var(--transition-dur);
        }
        .pumpkin::after {
          content: "";
          position: absolute;
          bottom: -1rem;
          height: 3rem;
          width: 70%;
          border-radius: 100%;
          background-color: var(--background-shadow);
          transition: background-color var(--transition-dur);
        }
        .pumpkin-ear {
          border-top-left-radius: 50% 80%;
          border-top-right-radius: 50% 80%;
          border-bottom-right-radius: 50% 20%;
          border-bottom-left-radius: 50% 20%;
          --ear-position-x: 2.75rem;
          --ear-tip-position-x: -1.5rem;
          z-index: 4;
          bottom: calc(100% - 4rem);
          height: 10rem;
          width: 5.5rem;
          transform-origin: center bottom;
          transform: rotate(calc(40deg * var(--flip)));
          background-color: var(--primary-color);
          overflow: hidden;
        }
        .pumpkin-ear::before {
          content: "";
          top: -0.5rem;
          left: var(--ear-tip-left);
          right: var(--ear-tip-right);
          height: 4rem;
          width: 140.........完整代码请登录后点击上方下载按钮下载查看