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 {
.........完整代码请登录后点击上方下载按钮下载查看