《真心真意过一生》叶倩文

焱鑫磊 发表于 2023-6-10 08:16

本帖最后由焱鑫磊于 2023-6-28 11:49 编辑 <br /><br /><style type="text/css">/*容器*/
.container0 {width: 1024px;margin-top:100px; margin-left:-215px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
height: 600px;display: flex; background: #333 url('https://pic.imgdb.cn/item/648335091ddac507cc43ae0a.jpg') no-repeat center/cover;

perspective: 1000px;
}
/*piece盒子*/
.piece-box {
position: relative;
width: 200px;
height: 200px;
margin: 300px 150px;
perspective-origin: 50% 50%;

         transform-style: preserve-3d;
         animation: pieceRotate 10s;

}
/*为了实现第二个动画加的盒子*/
.piece-box2 {

         transform-style: preserve-3d;
         animation: boxRotate 5s 10s infinite;

}
/*piece通用样式*/
.piece {
position: absolute;
width: 200px;
height: 200px;

opacity: 0.9;

}
.piece-1 {
background: url(https://pic.imgdb.cn/item/6483357c1ddac507cc44532c.jpg)-70px 0/150% 100%;

         transform: rotateY(0deg) translateZ(173.2px);
         animation: piece1Rotate 5s 5s;

   animation-fill-mode: forwards;

}
.piece-2 {
background: url(https://pic.imgdb.cn/item/648335a11ddac507cc448625.jpg)-50px 0/150% 100%;

         transform: rotateY(60deg) translateZ(173.2px);
         animation: piece2Rotate 5s 5s;

   animation-fill-mode: forwards;
}
.piece-3 {
background: url(https://pic.imgdb.cn/item/648335c81ddac507cc44b7c6.jpg)-50px 0/150% 100%;

         transform: rotateY(120deg) translateZ(173.2px);
         animation: piece3Rotate 5s 5s;

   animation-fill-mode: forwards;
}
.piece-4 {
background: url(https://pic.imgdb.cn/item/648335f81ddac507cc44f817.jpg)-50px 0/150% 100%;

         transform: rotateY(180deg) translateZ(173.2px);
         animation: piece4Rotate 5s 5s;

   animation-fill-mode: forwards;
}
.piece-5 {
background: url(https://pic.imgdb.cn/item/6483361e1ddac507cc452cf8.jpg)-50px 0/150% 100%;

         transform: rotateY(240deg) translateZ(173.2px);
         animation: piece5Rotate 5s 5s;

   animation-fill-mode: forwards;
}
.piece-6 {
background: url(https://pic.imgdb.cn/item/648336401ddac507cc455e0f.jpg)-50px 0/150% 100%;

         transform: rotateY(300deg) translateZ(173.2px);
         animation: piece6Rotate 5s 5s;

   animation-fill-mode: forwards;
}

/*走马灯动画*/
@keyframes pieceRotate
   {
   0% {
            transform: rotatex(-5deg)rotateY(0deg);}
   100% {
            transform: rotatex(5deg)rotateY(360deg);}
   }

/*以下是走马灯转变为六面正方体的动画*/

/*front*/
   @keyframes piece1Rotate
   {
   0% {
         transform: rotateY(0deg) translateZ(173.2px);}
   100% {
transform:rotateY(0deg) translateZ(100px);}
   }

/*back*/
@keyframes piece2Rotate
   {
   0% {
         transform: rotateY(60deg) translateZ(173.2px);}
   100% {
transform:rotateY(0deg) translateZ(-100px);}
   }

/*left*/
@keyframes piece3Rotate
   {
   0% {
         transform: rotateY(120deg) translateZ(173.2px);}
   100% {
transform: translateX(-100px) rotateY(90deg);}
   }

/*right*/
@keyframes piece4Rotate
   {
   0% {
         transform: rotateY(180deg) translateZ(173.2px);}
   100% {
transform: translateX(100px) rotateY(90deg);}
   }

/*top*/
@keyframes piece5Rotate
   {
   0% {
         transform: rotateY(240deg) translateZ(173.2px);}
   100% {
transform: translateY(-100px) rotateX(90deg);}
   }

/*bottom*/
@keyframes piece6Rotate
   {
   0% {
         transform: rotateY(300deg) translateZ(173.2px);}
   100% {
transform: translateY(100px) rotateX(90deg);}
   }


/*正方体旋转动画*/
@keyframes boxRotate
   {
   0% {
         transform:rotateX(0deg) rotateY(-360deg););}
   100% {
transform: rotateX(-360deg) rotateY(360deg);}
   }
</style>
<div class="container0">
<div class="piece-box">
<div class="piece-box2">
<div class="piece piece-1"> </div>

<div class="piece piece-2"> </div>

<div class="piece piece-3"> </div>

<div class="piece piece-4"> </div>

<div class="piece piece-5"> </div>

<div class="piece piece-6"> </div>
</div>
</div>
</div>

<div style="position:relative;width: 1000px;height: 130px;overflow:hidden;top: -150px;left: -230px;">
<div style="left: 0px;position:absolute;top: 0px;"><iframe frameborder="0" height="130" marginheight="0" marginwidth="0" scrolling="no" src="https://i.mp3.wf/view.php/15a7dfca6d65ef0093311264e0f1baaf.html" width="1000"></iframe></div>
</div>

红影发表于 2023-6-10 11:12

这个能从转筒变成立方体，真漂亮的制作。欣赏焱鑫磊好帖{:4_199:}

红影发表于 2023-6-10 11:13

这个好像不是鼠标触发的，而是随时间变过去的{:4_173:}

焱鑫磊 发表于 2023-6-10 13:00

红影发表于 2023-6-10 11:12
这个能从转筒变成立方体，真漂亮的制作。欣赏焱鑫磊好帖

问候红影好！{:4_187:}

焱鑫磊 发表于 2023-6-10 13:01

红影发表于 2023-6-10 11:13
这个好像不是鼠标触发的，而是随时间变过去的

自然变动，不是鼠控。{:4_204:}

红影发表于 2023-6-10 13:49

焱鑫磊发表于 2023-6-10 13:00
问候红影好！

问好焱鑫磊，周六快乐{:4_204:}

红影发表于 2023-6-10 13:50

焱鑫磊发表于 2023-6-10 13:01
自然变动，不是鼠控。

饿呢，我也是看了一会才发现{:4_173:}

樵歌发表于 2023-6-10 18:37

简直成万花魔方了，好生了得！{:4_204:}

焱鑫磊 发表于 2023-6-10 18:49

樵歌发表于 2023-6-10 18:37
简直成万花魔方了，好生了得！

樵歌下午好！{:4_187:}

梦缘发表于 2023-6-11 17:32

真漂亮的制作，欣赏老师好帖！{:4_176:}

焱鑫磊 发表于 2023-6-11 18:56

梦缘发表于 2023-6-11 17:32
真漂亮的制作，欣赏老师好帖！

问候梦缘好！{:4_187:}

页: [1]

花潮论坛's Archiver

《真心真意过一生》叶倩文