js实现下拉框随机选择怪物动画效果代码-html代码-BFW代码库

js实现下拉框随机选择怪物动画效果代码

代码语言：html

代码描述：js实现下拉框随机选择怪物动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap'>

    <style>
        body {
          display: grid;
          place-items: center;
          height: 100vh;
          font-family: "Poppins", sans-serif;
        }
        body h1 {
          text-align: center;
        }
        body #dropdown {
          display: flex;
          --border-radius: 0.35rem;
          --frame: #8e9094;
          --border-thickness: 2px;
          background: var(--frame);
          border-radius: var(--border-radius);
          overflow: hidden;
          transition: 0.25s -0.1s;
        }
        body #dropdown.shake {
          --frame: #d8334a;
          -webkit-animation: shake 0.5s;
                  animation: shake 0.5s;
        }
        @-webkit-keyframes shake {
          10% {
            transform: translateX(0.5rem);
          }
          25% {
            transform: translateX(-0.4rem);
          }
          40% {
            transform: translateX(0.3rem);
          }
          65% {
            transform: translateX(-0.2rem);
          }
          80% {
            transform: translateX(0.1rem);
          }
          100% {
            transform: translateX(0rem);
          }
        }
        @keyframes shake {
          10% {
            transform: translateX(0.5rem);
          }
          25% {
            transform: translateX(-0.4rem);
          }
          40% {
            transform: translateX(0.3rem);
          }
          65% {
            transform: translateX(-0.2rem);
          }
          80% {
            transform: translateX(0.1rem);
          }
          100% {
            transform: translateX(0rem);
          }
        }
        body #dropdown:hover {
          --frame: #717272;
        }
        body #dropdown.valid {
          --frame: #a0d468;
        }
        body #dropdown.valid:hover {
          --frame: #8cc152;
        }
        body #dropdown .tag {
          display: grid;
          place-items: center;
          cursor: pointer;
          position: relative;
          width: 32px;
          background: var(--frame);
          transition: background 0.25s -0.1s;
        }
        body #dropdown .tag .arrow {
          border: 0.5rem solid transparent;
          border-top-color: white;
          border-width: 0.8rem 0.4rem 0 0.4rem;
          transform: translateY(0.1rem);
        }
        body #dropdown .tag.disabled {
          cursor: wait;
        }
        body #dropdown .tag.disabled .arrow {
          opacity: 0.25;
        }
        body #dropdown .dropdown {
          display: flex;
          width: 224px;
          height: 48px;
          border: 2px solid var(--frame);
          transition: border-color 0.25s -0.1s;
          border-radius: calc(var(--border-radius) - var(--border-thickness));
          overflow: hidden;
          pointer-events: none;
        }
        body #dropdown .dropdown .gap {
          position: relative;
          width: 0px;
          transition: 0.05s;
        }
        body #dropdown .dropdown .wheel {
          flex-grow: 20;
          flex-basis: 0;
          overflow: hidden;
          border-radius: 0;
          transition: 0.25s;
          background: url(https://i.koya.io/codepen-dropdown.svg) white;
        }
        body #dropdown .dropdown .wheel .container {
          position: relative;
          width: 224px;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        body #dropdown .dropdown .wheel .container > div {
          display: grid;
          place-items: center;
          height: 48px;
          width: 100%;
          font-size: 2rem;
          letter-spacing: 0.2rem;
        }
        body #dropdown .dropdown .wheel.wheel1 {
          border-radius: calc(var(--border-radius) - var(--border-thickness)) 0 0 calc(var(--border-radius) - var(--border-thickness));
          transition: background-position 3s cubic-bezier(0.3, 0, 0.1, 1), 0.25s border-radius;
        }
        body #dropdown .dropdown .wheel.wheel2 {
          background-position-x: -74.6666666667px;
          transition: background-position 4s cubic-bezier(0.3, 0, 0.1, 1), 0.25s border-radius, 0.25s box-shadow;
        }
        body #dropdown .dropdown .wheel.wheel3 {
          background-position-x: -149.3333333333px;
          border-radius: 0 calc(var(--border-radius) - var(--border-thickness)) calc(var(--border-radius) - var(--.........完整代码请登录后点击上方下载按钮下载查看