Shulou(Shulou.com)06/01 Report--

Editor to share with you how CSS3 makes Apple-style keyboard special effects, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

Html tag:

The code is as follows:

CSS3 KeyBoard

Q

W

E

R

T

Y

U

I

O

P

A

S

D

F

G

H

J

K

L

Return

Z

X

C

V

B

N

M

!

?.

.? 123

.? 123

CSS Code:

Copy the code

The code is as follows:

@ font-face {

Font-family: 'icomoon'

Src:url ('http://upimage-img.stor.sinaapp.com/icomoon.eot');

Src:url ('http://upimage-img.stor.sinaapp.com/icomoon.eot?#iefix') format (' embedded-opentype'))

Url ('http://upimage-img.stor.sinaapp.com/icomoon.woff') format (' woff'))

Url ('http://upimage-img.stor.sinaapp.com/icomoon.ttf') format (' truetype'))

Url ('http://upimage-img.stor.sinaapp.com/icomoon.svg#icomoon') format (' svg'))

Font-weight: normal

Font-style: normal

}

Body {

Background-color: # 000

}

Ul, li {

List-style: none

Margin: 0

Padding: 0

-webkit-user-select: none

-moz-user-select: none

-ms-user-select: none

User-select: none

}

Ul {

Width: 704px

Background: linear-gradient (60deg, rgba (158, 180, 185), rgba (222, 157, 193) 50%, rgba (169, 156, 173, 1) 100%)

Padding-left: 8px

Border-radius: 5px

Padding-top: 10px

}

Ul::after {

Content: ""

Display: table

Clear: both

}

Li {

Font-family: "Vrinda"

Width: 54px

Height: 50px

Line-height: 50px

Background-color: rgba (255pcm.9)

Border-radius: 5px

Float: left

Text-align: center

Font-size: 24px

Vertical-align: text-top

Margin-right: 10px

Margin-bottom: 10px

Box-shadow: 0 1px 0 rgba (0penny 0penny 0mem.5)

Cursor: pointer

Position: relative

}

Li:active {

Box-shadow: inset 0 1px 0 rgba (0penny 0penny 0mem.5)

Top:1px

}

.icon {

Font-family: "icomoon"

}

Li:nth-child (11), li:nth-child (21), li:nth-child (22)

Li:nth-child (32), li:nth-child (33), li:nth-child (35), li:nth-child (36) {

Background: rgba (188 and 188)

Font-size: 20px

}

Li:nth-child (12) {

Margin-left: 20px

}

Li:nth-child (21) {

Width: 98px

}

Li:nth-child (nasty 22) {

Width: 52px

}

Li:nth-child (32) {

Width: 74px

}

Li:nth-child (33) {

Width: 176px

}

Li:nth-child (34) {

Width: 362px

}

Li:nth-child (35) {

Width: 74px

}

Li:nth-child (31), li:nth-child (30) {

Box-sizing: border-box

Padding-top: 14px

}

Li:nth-child (31) span, li:nth-child (30) span {

Display: block

Line-height: 0.5

}

The above is all the content of the article "how to make Apple style Keyboard Special effects in CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.