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 q 12 -8 21 -19 m -21 19 l -1 11 q -4 9 -5 30 l -8 1 m 13 -31 q 23 1 4 19 l 8 5 m -10 -47 a 6 6 0 1 0 -0.01 0 z" />
<path class="B" d="M 50 43 l 1 -12 m -1 12 q 0 0 0 0 m 0 0 q 0 0 0 0 m 0 0 l -1 11 q -9 5 -16 26 l -9 0 m 25 -26 q 23 1 4 19 l 8 5 m -10 -47 a 6 6 0 1 0 -0.01 0 z" />
<path class="C" d="M 50 43 l 1 -12 m -1 12 q -13 -9 -17 -21 m 17 21 q 0 0 0 0 m 0 0 l -1 11 q -24 -2 -11 18 l -7 4 m 18 -22 q 23 1 4 19 l 8 5 m -10 -47 a 6 6 0 1 0 -0.01 0 z" />
<path class="D" d="M 49 54 l -1 12 m 1 -12 q 11 6 18 21 m -18 -21 q 0 0 0 0 m 0 0 l 1 -11 q 14 -10 16 -28 l 9 2 m -25 26 q -7 -12 -7 -28 l -8 0 m 13 51 a 6 6 180 1 0 0.01 0 z" />
<path class="E" d="M 50 43 l 1 -12 m -1 12 q -13 -9 -17 -21 m 17 21 q 12 -8 21 -19 m -21 19 l -1 11 q -13 8 -16 27 l -7 0 m 23 -27 q 6 5 6 27 l 9 1 m -13 -51 a 6 6 0 1 0 -0.01 0 z" />
<path class="F" d="M 50 43 l 1 -12 m -1 12 q -23 -3 -11 -23 m 11 23 q 12 -8 21 -19 m -21 19 l -1 11 q -13 8 -16 27 l -7 0 m 23 -27 q 22 3 3 20 l 8 5 m -9 -48 a 6 6 0 1 0 -0.01 0 z" />
<path class="G" d="M 50 43 l 1 -12 m -1 12 q 0 0 0 0 m 0 0 q 12 -8 21 -19 m -21 19 l -1 11 q -25 -5 -12 19 l -7 2 m 19 -21 q 0 4 -6 30 l 9 1 m -1 -54 a 6 6 0 1 0 -0.01 0 z" />
<path class="H" d="M 50 43 l 1 -12 m -1 12 q -14 -9 -17 -21 m 17 21 q 12 -8 21 -19 m -21 19 l -1 11 q -4 20 -5 32 l -8 0 m 13 -32 q 0 4 -4 32 l 7 0 m -1 -55 a 6 6 0 1 0 -0.01 0 z" />
<path class="I" d="M 50 43 l 1 -12 m -1 12 q -14 -9 -17 -21 m 17 21 q 12 -8 21 -19 m -21 19 l -1 11 q -12 -2 -25 3 l 0 -8 m 25 5 q 0 4 -4 32 l 7 0 m -1 -55 a 6 6 0 1 0 -0.01 0 z" />
<path class="J" d="M 50 43 l 1 -12 m -1 12 q 0 0 0 0 m 0 0 q 12 -8 21 -19 m -21 19 l -1 11 q -25 -2 -11 18 l -9 4 m 20 -22 q 0 4 -4 32 l 7 0 m -1 -55 a 6 6 0 1 0 -0.01 0 z" />
<path class="K" d="M 50 4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0