毕设2921709778,收费定制;已经退出csdn 掘金地址https://juejin.cn/user/3206589365619767
html
<body>
<div class="box">`
<div class="boxs">
<img src="./img/wz01.png" alt="" class="img img1">
<img src="./img/wz02.png" alt="" class="img img2">
<img src="./img/wz03.png" alt="" class="img img3">
<img src="./img/wz04.png" alt="" class="img img4">
<img src="./img/wz05.png" alt="" class="img img5">
<img src="./img/wz06.png" alt="" class="img img6">
<img src="./img/wz07.png" alt="" class="img img7">
<img src="./img/wz08.png" alt="" class="img img8">
<img src="./img/wz09.png" alt="" class="img img9">
<img src="./img/wz10.png" alt="" class="img img10">
<img src="./img/wz11.png" alt="" class="img img11">
<img src="./img/wz12.png" alt="" class="img img12">
</div>
</div>
</body>
css
* {
margin: 0;
padding: 0;
}
body {
background-color: cadetblue;
}
.box {
position: absolute;
display: flex;
justify-content: center;
top: 0vh;
width: 100%;
perspective: 800;
animation: xy 2s 3s linear forwards;
}
.boxs {
transform: rotateX(-30deg);
position: absolute;
width: 200px;
height: 100px;
/* background-color: aquamarine; */
transform-style: preserve-3d;
animation: xz1 5s linear forwards, boxs 1s 5s linear forwards, xuanzhuan 15s 6s linear infinite;
}
@keyframes boxs {
0% {
transform: rotateX(-30deg);
height: 100px;
}
100% {
transform: rotateX(0deg);
height: 200px;
}
}
img {
transform-style: preserve-3d;
border-radius: 20px;
width: 100%;
height: 100%;
position: absolute;
animation: img 1s 5s linear forwards;
}
@keyframes img {
0% {
height: 100px;
}
100% {
height: 200px;
}
}
.img1 {
transform: rotateY(0deg) translateZ(300px);
animation: img1 linear 3s 5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img1 {
0% {
transform: rotateY(0deg) translateZ(300px);
}
100% {
transform: rotateX(90deg) translateZ(-150px);
}
}
.img2 {
transform: rotateY(40deg) translateZ(300px);
animation: img2 linear 3s 5.5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img2 {
0% {
transform: rotateY(40deg) translateZ(300px);
}
100% {
transform: rotateX(90deg) translateZ(150px);
}
}
.img3 {
transform: rotateY(80deg) translateZ(300px);
animation: img3 linear 3s 6s forwards, touming1 2s 12s linear forwards;
}
@keyframes img3 {
0% {
transform: rotateY(80deg) translateZ(300px);
}
100% {
transform: rotateY(90deg) translateZ(-150px);
}
}
.img4 {
transform: rotateY(120deg) translateZ(300px);
animation: img4 linear 3s 6.5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img4 {
0% {
transform: rotateY(120deg) translateZ(300px);
}
100% {
transform: translateX(150px) rotateY(90deg);
}
}
.img5 {
transform: rotateY(160deg) translateZ(300px);
animation: img5 linear 3s 7s forwards, touming1 2s 12s linear forwards;
}
@keyframes img5 {
0% {
transform: rotateY(160deg) translateZ(300px);
}
100% {
transform: rotateZ(90deg) translateZ(-150px);
}
}
.img6 {
transform: rotateY(200deg) translateZ(300px);
animation: img6 linear 3s 7.5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img6 {
0% {
transform: rotateY(200deg) translateZ(300px);
}
100% {
transform: rotateZ(90deg) translateZ(150px);
}
}
.img7 {
transform: rotateY(240deg) translateZ(300px);
animation: img7 linear 3s 8s forwards, touming1 2s 12s linear forwards;
}
@keyframes img7 {
0% {
transform: rotateY(240deg) translateZ(300px) scale(1);
}
100% {
transform: rotateX(90deg) translateZ(-60px) scale(0.6);
}
}
.img8 {
transform: rotateY(280deg) translateZ(300px);
animation: img8 linear 3s 8.5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img8 {
0% {
transform: rotateY(280deg) translateZ(300px) scale(1);
}
100% {
transform: rotateX(90deg) translateZ(60px) scale(0.6);
}
}
.img9 {
transform: rotateY(320deg) translateZ(300px);
animation: img9 linear 3s 9s forwards, touming1 2s 12s linear forwards;
}
@keyframes img9 {
0% {
transform: rotateY(320deg) translateZ(300px) scale(1);
}
100% {
transform: rotateY(90deg) translateZ(-60px) scale(0.6);
}
}
.img10 {
transform: rotateY(0deg) translateZ(0px);
animation: img10 linear 3s 10s forwards, touming1 2s 12s linear forwards;
}
@keyframes img10 {
0% {
transform: rotateY(0deg) translateZ(0px) scale(1);
}
100% {
transform: rotateY(90deg) translateZ(60px) scale(0.6);
}
}
.img11 {
transform: rotateY(0deg) translateZ(0px);
animation: img11 linear 3s 10.5s forwards, touming1 2s 12s linear forwards;
}
@keyframes img11 {
0% {
transform: rotateY(0deg) translateZ(0px) scale(1);
}
100% {
transform: rotateZ(90deg) translateZ(-60px) scale(0.6);
}
}
.img12 {
transform: rotateY(0deg) translateZ(0px);
animation: img12 linear 3s 11s forwards, touming1 2s 12s linear forwards;
}
@keyframes img12 {
0% {
transform: rotateY(0deg) translateZ(0px) scale(1);
}
100% {
transform: rotateZ(90deg) translateZ(60px) scale(0.6);
}
}
@keyframes xz1 {
0% {
transform: rotateX(-20deg) rotateY(0deg);
}
10% {
transform: rotateX(-20deg) rotateY(36deg);
}
20% {
transform: rotateX(-20deg) rotateY(72deg);
}
30% {
transform: rotateX(-20deg) rotateY(108deg);
}
40% {
transform: rotateX(-20deg) rotateY(144deg);
}
50% {
transform: rotateX(-20deg) rotateY(180deg);
}
60% {
transform: rotateX(-20deg) rotateY(216deg);
}
70% {
transform: rotateX(-20deg) rotateY(252deg);
}
80% {
transform: rotateX(-20deg) rotateY(288deg);
}
90% {
transform: rotateX(-20deg) rotateY(324deg);
}
100% {
transform: rotateX(-20deg) rotateY(360deg);
}
}
@keyframes xy {
0% {
top: 0vh;
}
50% {
top: 60vh;
}
100% {
top: 40vh;
}
}
@keyframes xuanzhuan {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes touming1 {
0% {
opacity: 1;
}
100% {
opacity: 0.8;
}
}