使用 纯html+css+js 制作一个八卦图炫酷旋转效果
效果如下:
八卦图炫酷动态效果制作
完整代码如下:
<!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>卜卦</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 10vh;
overflow: hidden;
background-color: rgba(230, 215, 203, 0.3);
}
div {
box-sizing: border-box;
}
.box {
width: 100%;
padding-bottom: 100%;
background-size: 100% 100%;
}
.one_rotae {
animation: oneTurn 20s linear infinite forwards !important;
}
.two_rotae {
animation: oneTurn 30s linear infinite forwards !important;
}
.three_rotae {
animation: twoTurn 35s linear infinite forwards !important;
}
@keyframes oneTurn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes twoTurn {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.box_w {
position: fixed;
left: 50%;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
max-width: 450px;
width: 100vw;
height: 100vw;
z-index: 10;
transform: translate(-50%, -50%) scale(1.5);
animation: mins 0.4s linear forwards !important;
transition: 0.7s all;
}
@keyframes mins {
0% {
transform: translate(-50%, -50%) scale(1.2);
}
50% {
transform: translate(-50%, -50%) scale(1.4);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
.box_w1 {
z-index: 9;
}
.box_w2 {
z-index: 8;
}
.box_w3 {
z-index: 7;
}
.box_w4 {
z-index: 6;
}
.box0 {
background: url(./image/bg_000/1.png) no-repeat;
background-size: 100% 100%;
}
.box1 {
background: url(./image/bg_000/2.png) no-repeat;
background-size: 100% 100%;
}
.box2 {
background: url(./image/bg_000/3.png) no-repeat;
background-size: 100% 100%;
}
.box3 {
background: url(./image/bg_000/4.png) no-repeat;
background-size: 100% 100%;
}
.box4 {
background: url(./image/bg_000/5.png) no-repeat;
background-size: 100% 100%;
}
.box5 {
background: url(./image/bg_000/6.png) no-repeat;
background-size: 100% 100%;
}
.box6 {
background: url(./image/bg_000/7.png) no-repeat;
background-size: 100% 100%;
}
.box7 {
background: url(./image/bg_000/8.png) no-repeat;
background-size: 100% 100%;
}
.box8 {
background: url(./image/bg_000/9.png) no-repeat;
background-size: 100% 100%;
}
.max9 {
transform: translate(-50%, -50%) scale(1);
animation: max9 1s linear forwards !important;
}
@keyframes max9 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.9);
}
}
.max8 {
transform: translate(-50%, -50%) scale(1);
animation: max8 1s linear forwards !important;
}
@keyframes max8 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.8);
}
}
.max7 {
transform: translate(-50%, -50%) scale(1);
animation: max7 1s linear forwards !important;
}
@keyframes max7 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.7);
}
}
.max6 {
transform: translate(-50%, -50%) scale(1);
animation: max6 1s linear forwards !important;
}
@keyframes max6 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.6);
}
}
.max5 {
transform: translate(-50%, -50%) scale(1);
animation: max5 1s linear forwards !important;
}
@keyframes max5 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.5);
}
}
.max4 {
transform: translate(-50%, -50%) scale(1);
animation: max4 1s linear forwards !important;
}
@keyframes max4 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.4);
}
}
.max3 {
transform: translate(-50%, -50%) scale(1);
animation: max3 1s linear forwards !important;
}
@keyframes max3 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.3);
}
}
.max2 {
transform: translate(-50%, -50%) scale(1);
animation: max2 1s linear forwards !important;
}
@keyframes max2 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.2);
}
}
.max1 {
transform: translate(-50%, -50%) scale(1);
animation: max1 1s linear forwards !important;
}
@keyframes max1 {
0% {
transform: translate(-50%, -50%) scale(1);
}
100% {
transform: translate(-50%, -50%) scale(1.1);
}
}
.max {
transform: scale(1);
animation: max 10s linear forwards !important;
}
@keyframes max {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(50) rotate(10000deg);
}
}
</style>
</head>
<body>
<div class="boxs"></div>
<script>
let boxs = document.querySelector(".boxs");
for (let i = 0; i <= 8; i++) {
setTimeout(function timer() {
let box_item = document.createElement("div");
box_item.setAttribute("class", `box_w box_w${i + 1}`);
box_item.innerHTML = `<div class="box${i} box"></div>`;
boxs.appendChild(box_item);
}, i * 500);
setTimeout(() => {
if (i == 0) {
document.querySelector(`.box${i}`).classList.add("one_rotae");
} else if (i % 2 == 0) {
document.querySelector(`.box${i}`).classList.add("two_rotae");
} else {
document.querySelector(`.box${i}`).classList.add("three_rotae");
}
document.querySelector(
`.box${i}`
).style.transform = `translate(-50%, -50%) scale(${2})`;
}, i * 500 + 500);
}
setTimeout(() => {
let m = 10;
for (let j = 9; j >= 1; j--) {
m--;
document.querySelector(`.box_w${m}`).classList.add(`max${m}`);
}
}, 5000);
</script>
</body>
</html>
