键盘效果:
点击键盘效果:
文章图片
【css|css 拟态键盘】
文章图片
新拟态按钮
>
html,
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: var(--color-background);
}:root {
--color: #fff;
--color-background: #ebecf0;
--color-label: slategrey;
--color-light: rgba(121, 130, 160, .55);
--color-shadow: rgb(255, 255, 255);
--duration-ani: 50ms;
}.keyboard {
display: grid;
padding: 10px;
border-radius: 10px;
width: 1200px;
height: 380px;
background: var(--color-background);
box-shadow: 5px 5px 10px var(--color-light),
-5px -5px 10px var(--color-shadow);
transition: box-shadow var(--duration-ani) ease-out;
grid-template-columns: repeat(18, 1fr);
grid-template-rows: repeat(6, 1fr);
}
.keyboard:hover {
box-shadow: 0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(0, 0, 0, 0),
inset 5px 5px 10px var(--color-light),
inset -5px -5px 10px var(--color-shadow);
}.cell {
padding: 4px;
}.key {
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
width: 100%;
height: 100%;
background: linear-gradient(315deg, var(--color-light), var(--color-shadow));
box-shadow: -1px -1px 40px var(--color-light),
1px 1px 40px var(--color-shadow);
cursor: pointer;
user-select: none;
font-size: 13px;
transition: box-shadow var(--duration-ani) ease-out;
}.key:active {
background: linear-gradient(315deg, var(--color-shadow), var(--color-light));
text-shadow: 0 0 10px var(--color),0 0 20px var(--color),0 0 30px var(--color),0 0 40px var(--color);
font-weight: 700;
color: var(--color);
}.backspace {
grid-column: 14 / 16;
}.tab {
grid-column: 1 / 3;
}.caps {
grid-column: 1 / 3;
}.enter {
grid-column: 14 / 16;
}.shift-left {
grid-column: 1 / 4;
}.shift-right {
grid-column: 14 / 16;
}.space {
grid-column: 4 / 12;
}
Esc
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
SrcLk
Pause
~
1
2
3
4
5
6
7
8
9
0
-
=
Backspace
Ins
Home
PgUp
Tab
Q
W
E
R
T
Y
U
I
O
P
[{
]}
\|
Del
End
PgDn
Caps
A
S
D
F
G
H
J
K
L
;
:
'"
Enter
Shift
Z
X
C
V
B
N
M
,<
.>
/?
Shift
↑
Ctrl
Win
Alt
Alt
Win
Fn
Ctrl
←
↓
→
推荐阅读
- 青龙面板|青龙面板快手极速版教程
- 前端|【前端三剑客二】CSS手术刀剖析第一篇
- js|Dom模型之dataset属性/Html元素标签的data-*属性
- 前端_CSS3|bootstrap快速入门上手
- JavaWeb?|Bootstrap-30分钟就能上手的Bootstrap教程【史上最全】
- bootstrap|Bootstrap入门【人类的天堂】
- js面试题|前端总复习——html篇
- css|.113轮播图练习
- 前端|小练习1-文本练习