效果图如下:
代码如下:
<!doctype html>
<html onselectstart = "return false"><!-- 能够控制页面不能被选择 -->
<head>
<meta charset="UTF-8">
<title>2</title>
<style type="text/css">
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #fff;}
body{background: #000;overflow: hidden;}
#content{width: 100px;height: 100px;position: absolute;top: 200px;left: 47%;transform-style: preserve-3d;animation: run 3s linear infinite;}
.d{font-size: 50px;background: -webkit-linear-gradient(top, #28343b 0%,#828c95 16%,#828c95 87%,#28343b 100%);width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;}
.d1{top: 100px;animation: runA 3s linear infinite;}
.d11{animation: runA 3s 1s linear infinite;opacity: 0;}
.d111{animation: runA 3s 2s linear infinite;opacity: 0;}
.d2{top: 0px;animation: runB 3s linear infinite;}
.d22{animation: runB 3s 1s linear infinite;opacity: 0;}
.d222{animation: runB 3s 2s linear infinite;opacity: 0;}
.d3{top: 50px;left: -50px;animation: runC 3s linear infinite;}
.d33{animation: runC 3s 1s linear infinite;opacity: 0;}
.d333{animation: runC 3s 2s linear infinite;opacity: 0;}
.d4{top: 50px;left: 50px;animation: runD 3s linear infinite;}
.d44{animation: runD 3s 1s linear infinite;opacity: 0;}
.d444{animation: runD 3s 2s linear infinite;opacity: 0;}
@keyframes runA{
from{transform:perspective(10px) rotateX(12.5deg) rotateZ(180deg) translateY(200px);opacity: 1;}
to{transform:perspective(10px) rotateX(12.5deg) rotateZ(180deg) translateY(-100px);opacity: 1;}
}
@keyframes runB{
from{transform:perspective(10px) rotateX(-12.5deg) translateY(200px);opacity: 1;}
to{transform:perspective(10px) rotateX(-12.5deg) translateY(-100px);opacity: 1;}
}
@keyframes runC{
from{transform:perspective(10px) rotateY(12.5deg) rotateZ(-90deg) translateY(200px);opacity: 1;}
to{transform:perspective(10px) rotateY(12.5deg) rotateZ(-90deg) translateY(-100px);opacity: 1;}
}
@keyframes runD{
from{transform:perspective(10px) rotateY(-12.5deg) rotateZ(90deg) translateY(200px);opacity: 1;}
to{transform:perspective(10px) rotateY(-12.5deg) rotateZ(90deg) translateY(-100px);opacity: 1;}
}
@keyframes run{
from{transform:rotateZ(0deg) scale(1);}
50%{transform:rotateZ(180deg) scale(3);}
to{transform:rotateZ(360deg) scale(1);}
}
</style>
</head>
<body>
<div id="content">
<div class="d d1">A</div>
<div class="d d1 d11">A</div>
<div class="d d1 d111">A</div>
<div class="d d2">B</div>
<div class="d d2 d22">B</div>
<div class="d d2 d222">B</div>
<div class="d d3">C</div>
<div class="d d3 d33">C</div>
<div class="d d3 d333">C</div>
<div class="d d4">D</div>
<div class="d d4 d44">D</div>
<div class="d d4 d444">D</div>
</div>
</body>
</html>