效果演示:
代码目录:
主要代码实现:
部分CSS样式:
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
background-color: black;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
perspective: 16em;
}
.scene {
position: relative;
-webkit-animation: sceneRotate 30s infinite linear;
animation: sceneRotate 30s infinite linear;
}
@-webkit-keyframes sceneRotate {
to {
transform: rotateY(360deg);
}
}
@keyframes sceneRotate {
to {
transform: rotateY(360deg);
}
}
.cube {
position: absolute;
width: 2em;
height: 2em;
-webkit-animation: cubeBounce 4s infinite ease-out, cubeLeft 4s infinite linear, cubeHeight 4s infinite ease-out;
animation: cubeBounce 4s infinite ease-out, cubeLeft 4s infinite linear, cubeHeight 4s infinite ease-out;
}
.cube:nth-child(2) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.cube:nth-child(2)>* {
background-color: lightgreen;
}
@-webkit-keyframes cubeBounce {
0%,
40% {
bottom: calc(-3em + 2px);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
70% {
bottom: 1em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
bottom: calc(-3em + 2px);
transform: rotateX(90deg) rotateY(180deg) rotateZ(180deg);
}
}
@keyframes cubeBounce {
0%,
40% {
bottom: calc(-3em + 2px);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
70% {
bottom: 1em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
bottom: calc(-3em + 2px);
transform: rotateX(90deg) rotateY(180deg) rotateZ(180deg);
}
}
@-webkit-keyframes cubeHeight {
0%,
10%,
30%,
40%,
100% {
height: 2em;
}
5%,
35% {
height: 1.5em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes cubeHeight {
0%,
10%,
30%,
40%,
100% {
height: 2em;
}
5%,
35% {
height: 1.5em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@-webkit-keyframes cubeLeft {
0%,
100% {
left: -4em;
}
40% {
left: 2em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes cubeLeft {
0%,
100% {
left: -4em;
}
40% {
left: 2em;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.cube>* {
position: absolute;
width: 100%;
height: 100%;
background-color: lightblue;
opacity: 0.9;
box-shadow: 0 0 1em #000 inset;
}
.cube .front {
transform: translateZ(1em);
}
.cube .right {
transform: rotateY(90deg) translateZ(1em);
}
.cube .back {
transform: rotateY(180deg) translateZ(1em);
}
.cube .left {
transform: rotateY(270deg) translateZ(1em);
}
.cube .top {
width: 2em;
height: 2em;
background-image: linear-gradient(90deg, #0000, #0009 25% 75%, #0000);
background-size: 4em 2em;
background-repeat: no-repeat;
transform: rotateX(90deg) translateZ(1em);
-webkit-animation: topShadow 4s infinite linear;
animation: topShadow 4s infinite linear;
-webkit-animation-delay: inherit;
animation-delay: inherit;
}
@-webkit-keyframes topShadow {
0%,
10% {
background-position-x: 2em;
}
40%,
100% {
background-position-x: -6em;
}
}
@keyframes topShadow {
0%,
10% {
background-position-x: 2em;
}
40%,
100% {
background-position-x: -6em;
}
}
.cube .bottom {
width: 2em;
height: 2em;
bottom: 0;
transform: rotateX(270deg) translateZ(1em);
}
.cubeShadow {
position: absolute;
top: 50%;
width: 2em;
height: 2em;
background-color: #0007;
box-shadow: 0 0 1em #000;
-webkit-animation: cubeShadow 4s infinite ease-out, shadowLeft 4s infinite linear;
animation: cubeShadow 4s infinite ease-out, shadowLeft 4s infinite linear;
}
.cubeShadow:nth-child(2) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
@-webkit-keyframes cubeShadow {
0%,
40% {
opacity: 0.8;
transform: translateY(-50%) rotate(90deg) translateZ(1px) scale(1);
}
70% {
opacity: 0.3;
transform: translateY(-50%) rotate(30deg) translateZ(1px) scale(2);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
HTML代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tikal Demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="scene">
<!-- <div class="ball"></div> -->
<div class="cube">
<div class="top"></div>
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
<div class="cube">
<div class="top"></div>
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
<div class="left"></div>
<div class="bottom"></div>
</div>
<div class="floor">
<!-- <div class="ballShadow"></div> -->
<div class="cubeShadow"></div>
<div class="cubeShadow"></div>
</div>
</div>
</body>
</html>
源码获取
查看博主主页或私信博主获取
打卡 文章 更新 40 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!