HTML+CSS 炫酷彩色立方體
2022-11-30由 TORLAN 發表于 林業
怎麼刪除程式碼
原始碼影片教程
開啟百度App
HTML+CSS 炫酷彩色立方體
HTML程式碼
<！DOCTYPE html>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
/>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
/>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
/>
<
title
>
TORLAN
title
>
<
link
rel
=
“stylesheet”
href
=
“style。css”
/>
head
>
<
body
>
<
div
class
=
“world”
>
<
div
class
=
“cube”
tabindex
=
“0”
>
<
div
class
=
“cube__front”
>
div
>
<
div
class
=
“cube__back”
>
div
>
<
div
class
=
“cube__left”
>
div
>
<
div
class
=
“cube__right”
>
div
>
<
div
class
=
“cube__top”
>
div
>
<
div
class
=
“cube__bottom”
>
div
>
div
>
div
>
body
>
html
>
CSS程式碼
body
{
margin
：
0
；
overflow
： hidden；
width
：
100vw
；
height
：
100vh
；
background
：
#222222
；
display
： flex；
flex-wrap
： wrap；
justify-content
： center；
align-items
： center；
}
。world
{
perspective
：
800px
；
width
：
100vh
；
height
：
100vh
；
display
： flex；
flex-wrap
： wrap；
justify-content
： center；
align-items
： center；
}
。cube
{
transform-style
： preserve-
3
d；
backface-visibility
： hidden；
width
：
50vh
；
height
：
50vh
；
position
： relative；
animation
： rotator
4。5s
linear infinite；
outline
：
0
；
}
。cube
* {
background
：
#000000
；
box-shadow
：
0
0
3vh
currentColor；
transition
： background
0。4s
ease-in-out， box-shadow
0。4s
ease-in-out；
}
。cube
：hover
* {
background
： currentColor；
box-shadow
：
0
0
20vh
currentColor；
}
。cube
。cube__front
{
color
： deeppink；
transform
：
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__right
{
color
： lightcoral；
transform
：
rotateY
（90deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
right
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__left
{
color
： skyblue；
transform
：
rotateY
（270deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__back
{
color
： seagreen；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
transform
：
rotateY
（180deg）
translateZ
（25vh）；
}
。cube
。cube__top
{
color
： mediumseagreen；
transform
：
rotateX
（90deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__bottom
{
color
： dodgerblue；
transform
：
rotateX
（270deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
@
keyframes
rotator {
0% {
transform
：
rotateX
（0deg）
rotateY
（0deg）；
}
100% {
transform
：
rotateX
（360deg）
rotateY
（360deg）；
}
}
完整程式碼
<！DOCTYPE html>
<
html
lang
=
“en”
>
<
head
>
<
meta
charset
=
“UTF-8”
/>
<
meta
http-equiv
=
“X-UA-Compatible”
content
=
“IE=edge”
/>
<
meta
name
=
“viewport”
content
=
“width=device-width， initial-scale=1。0”
/>
<
title
>
TORLAN
title
>
<
style
>
body
{
margin
：
0
；
overflow
： hidden；
width
：
100vw
；
height
：
100vh
；
background
：
#222
；
display
： -webkit-box；
display
： -ms-flexbox；
display
： flex；
-ms-flex-wrap
： wrap；
flex-wrap
： wrap；
-webkit-box-pack
： center；
-ms-flex-pack
： center；
justify-content
： center；
-webkit-box-align
： center；
-ms-flex-align
： center；
align-items
： center；
}
。world
{
-webkit-perspective
：
800px
；
perspective
：
800px
；
width
：
100vh
；
height
：
100vh
；
display
： -webkit-box；
display
： -ms-flexbox；
display
： flex；
-ms-flex-wrap
： wrap；
flex-wrap
： wrap；
-webkit-box-pack
： center；
-ms-flex-pack
： center；
justify-content
： center；
-webkit-box-align
： center；
-ms-flex-align
： center；
align-items
： center；
}
。cube
{
-webkit-transform-style
： preserve-
3
d；
transform-style
： preserve-
3
d；
-webkit-backface-visibility
： hidden；
backface-visibility
： hidden；
width
：
50vh
；
height
：
50vh
；
position
： relative；
-webkit-animation
： rotator
4。5s
linear infinite；
animation
： rotator
4。5s
linear infinite；
outline
：
0
；
}
。cube
* {
background
：
#000
；
box-shadow
：
0
0
3vh
currentColor；
-webkit-transition
： background
0。4s
ease-in-out，
box-shadow
0。4s
ease-in-out；
transition
： background
0。4s
ease-in-out， box-shadow
0。4s
ease-in-out；
}
。cube
：hover
* {
background
： currentColor；
box-shadow
：
0
0
20vh
currentColor；
}
。cube
。cube__front
{
color
： deeppink；
-webkit-transform
：
translateZ
（25vh）；
transform
：
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__right
{
color
： lightcoral；
-webkit-transform
：
rotateY
（90deg）
translateZ
（25vh）；
transform
：
rotateY
（90deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__left
{
color
： skyblue；
-webkit-transform
：
rotateY
（270deg）
translateZ
（25vh）；
transform
：
rotateY
（270deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__back
{
color
： seagreen；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
-webkit-transform
：
rotateY
（180deg）
translateZ
（25vh）；
transform
：
rotateY
（180deg）
translateZ
（25vh）；
}
。cube
。cube__top
{
color
： mediumseagreen；
-webkit-transform
：
rotateX
（90deg）
translateZ
（25vh）；
transform
：
rotateX
（90deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
。cube
。cube__bottom
{
color
： dodgerblue；
-webkit-transform
：
rotateX
（270deg）
translateZ
（25vh）；
transform
：
rotateX
（270deg）
translateZ
（25vh）；
position
： absolute；
top
：
0
；
left
：
0
；
width
：
100%
；
height
：
100%
；
}
@-
webkit
-
keyframes
rotator {
0% {
-webkit-transform
：
rotateX
（0deg）
rotateY
（0deg）；
transform
：
rotateX
（0deg）
rotateY
（0deg）；
}
100% {
-webkit-transform
：
rotateX
（360deg）
rotateY
（360deg）；
transform
：
rotateX
（360deg）
rotateY
（360deg）；
}
}
@
keyframes
rotator {
0% {
-webkit-transform
：
rotateX
（0deg）
rotateY
（0deg）；
transform
：
rotateX
（0deg）
rotateY
（0deg）；
}
100% {
-webkit-transform
：
rotateX
（360deg）
rotateY
（360deg）；
transform
：
rotateX
（360deg）
rotateY
（360deg）；
}
}
style
>
head
>
<
body
>
<
div
class
=
“world”
>
<
div
class
=
“cube”
tabindex
=
“0”
>
<
div
class
=
“cube__front”
>
div
>
<
div
class
=
“cube__back”
>
div
>
<
div
class
=
“cube__left”
>
div
>
<
div
class
=
“cube__right”
>
div
>
<
div
class
=
“cube__top”
>
div
>
<
div
class
=
“cube__bottom”
>
div
>
div
>
div
>
body
>
html
>
效果展示
效果
喜歡的朋友們關注我