ui效果图生成html,纯html加css的键盘UI效果图

先上效果图：

没有打字的功能，纯属是个界面图(一时无聊写的)

代码如下：

键盘ui

*{

margin: 0;

padding: 0;

font-family:"comic sans ms";

}

body{

text-align: center;

}

button{

width: 62px;

height: 59px;

background-color: white;

font-size: 14px;

text-align: center;

border: 2px solid black;

border-radius: 5px;

margin: 2px;

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

cursor:pointer;

}

button:hover{

box-shadow: 0px 4px 4px 4px rgba(79, 239, 239, 61),2px 4px 4px 0px rgba(0, 255, 255, 61);

border: 1px solid black;

}

.f_div{

position: relative;

background-color:#cccccc;

width: 1087px;

height: 342px;

margin: 100px 10%;

border-radius:10px;

display: flex;

}

#s_div{

position: absolute;

top: 10px;

}

~

1

2

3

4

5

6

7

8

9

0

-

+

delete

tab

q

w

e

r

t

y

u

i

o

p

[

]

\

capslk

a

s

d

f

g

h

j

k

l

;

'

enter

shift

z

x

c

v

b

n

m

,

.

/

shift

ctrl

window

alt

span

fn

ray

command

ctrl

代码简洁一眼就能看懂：

记录一下自己无聊的成果，后面如果给键盘添加了功能我就来更新一下子