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

网友评论0