js+css实现小人键盘数字变形动画效果代码-html代码-BFW代码库

js+css实现小人键盘数字变形动画效果代码

代码语言：html

所属分类：其他

代码描述：js+css实现小人键盘数字变形动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<style>
:root {
        --bg: #d1f3ff;
        --empty: #69e6ff;
        --wrong: #98143d;
        --included: #ffe699;
        --correct: #a9d18e;
        --letters: #000;
}

body {
        background-color: var(--bg);
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0 auto;
        font-size: clamp(0.5rem, 2.5vmin, 1.5rem);
}
#dancer {
        transition: 500ms;
}
/* Parent container for SVG and keyboard */
.container {
        display: flex;
        flex-direction: column;
        height: 100vh;
}

/* Placeholder (SVG) section */
#dancerArea {
        flex: 3; /* Takes 3/4ths of the space */
        display: flex;
        justify-content: center;
        align-items: center;
}
/* Keyboard section */
.keyboard {
        flex: 1; /* Takes 1/4th of the space */
        display: grid;
        grid-template-columns: repeat(20, minmax(auto, 1.25em));
        grid-auto-rows: 3em;
        gap: 0.25em;
        justify-content: center;
        align-content: center; /* Centers keys vertically */
        padding: 1em;
}

/* Key styles */
.key {
        font-size: inherit;
        grid-column: span 2;
        border: none;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--empty);
        color: var(--letters);
        fill: white;
        text-transform: uppercase;
        border-radius: 0.25em;
        cursor: pointer;
        user-select: none;
}

.key.large {
        grid-column: span 3;
}

.key.active,
.key:active {
        background: var(--correct);
}

.key > svg {
        width: 70%;
        height: 70%;
}

.key:hover,
.key:focus {
        opacity: 0.8;
}
</style>

  
  
</head>

<body translate="no">
  <div class="container">
        <svg viewBox="0 0 100 100" id="dancerArea">
                <defs>
                        <g fill="none" stroke="#333" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
                                <path class="A" d="M 50 43 l 1 -12 m -1 12 q -13 -9 -17 -21 m 17 21.........完整代码请登录后点击上方下载按钮下载查看