How to make Apple style Keyboard Special effects with CSS3
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!
