效果图:
注释:
ul * 表示ul下的所有样式都是这些。
改变代码中的ul *中的
<span style="font-size:18px;color:#cc33cc;">background-color: rgba(255, 100, 100, 0.5);</span>
即可改变魔方的颜色。
可以尝试通过改变perspective的值可以看下有什么效果。
代码:
<span style="font-size:18px;color:#3333ff;"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D魔方</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html
{
background: -webkit-radial-gradient(center, ellipse, #40E0D0 0%, #000000 100%);
background: radial-gradient(ellipse at center, #40E0D0 0%, #000000 100%);
height: 100%;
}
body
{
position: absolute;
width: 400px;
height: 400px;
left:40%;
top:20%;
-webkit-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
ul
{
-webkit-animation:run 6s linear infinite;
animation:run 6s linear infinite;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
ul *
{
background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(54, 226, 248, 0.5) 0%, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);
-webkit-background-size: 2.5em 2.5em, 2.5em 2.5em;
background-size: 2.5em 2.5em, 2.5em 2.5em;
background-color: rgba(255, 100, 100, 0.5);
border: 2px solid rgba(54, 226, 248, 0.5);
<span style="white-space:pre"> </span>-webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);
display: block;
position: absolute;
height: 400px;
width: 400px;
}
li
{
list-style:none;
}
li:nth-child(1)
{
-webkit-transform: rotateX(180deg) translateZ(200px);
-ms-transform: rotateX(180deg) translateZ(200px);
transform: rotateX(180deg) translateZ(200px);
}
li:nth-child(2)
{
-webkit-transform: rotateX(-90deg) translateZ(200px);
-ms-transform: rotateX(-90deg) translateZ(200px);
transform: rotateX(-90deg) translateZ(200px);
}
li:nth-child(3)
{
-webkit-transform: rotateY(0deg) translateZ(200px);
-ms-transform: rotateY(0deg) translateZ(200px);
transform: rotateY(0deg) translateZ(200px);
}
li:nth-child(4)
{
-webkit-transform: rotateY(-90deg) translateZ(200px);
-ms-transform: rotateY(-90deg) translateZ(200px);
transform: rotateY(-90deg) translateZ(200px);
}
li:nth-child(5)
{
-webkit-transform: rotateY(90deg) translateZ(200px);
-ms-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
li:nth-child(6)
{
-webkit-transform: rotateX(90deg) translateZ(200px);
-ms-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
@-webkit-keyframes run
{
from
{
-webkit-transform: translateZ(-200px) rotateX(0) rotateY(0deg);
transform: translateZ(-200px) rotateX(0) rotateY(0deg);
}
to
{
-webkit-transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
}
}
@keyframes run
{
from
{
-webkit-transform: translateZ(-200px) rotateX(0) rotateY(0deg);
transform: translateZ(-200px) rotateX(0) rotateY(0deg);
}
to
{
-webkit-transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
transform: translateZ(-200px) rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html></span>