焱鑫磊 发表于 2023-8-14 17:54

《泉水叮咚响》卞小贞

本帖最后由 焱鑫磊 于 2023-8-16 11:18 编辑 <br /><br /><div style="width: 1035px; height: 630px; text-align: center;border-radius: 10px; overflow: hidden; margin-top: 110px; margin-left: -220px; z-index: -127; box-shadow:0px 0px 1px 2px #B40404,0px 0px 0px 5px #ffffff,0px 0px 5px 13px #B40404; transform: rotate(0deg);">
<div class="HT">&nbsp;</div>

<div style="MARGIN-TOP: -27px; MARGIN-LEFT: 0px">
<div style="width:1035px; height:640px;
position:relative;overflow:hidden;margin:0px 0 0px 0px;transform:scale(1.0);">
<div id="ground3rd">
<div class="itemm">
<video autoplay="autoplay" height="635" loop="loop" muted="true" src="https://www.kumeiwp.com/sub/filestores/2023/08/14/df54379f9130d1f233f8cfc30607a200.mp4" style="width:1025px;height:635px; filter:contrast(110%);opacity:1.2;z-index: 15;transform: scale(1.4, 1.4)" width="1035">&nbsp;</video>
</div>
</div>
<marquee behavior="alternate" direction="up" scrollamount="0" style="position:absolute; left:-20px; top:-15px; width: 1035px; height: 640px;"> <marquee behavior="alternate" direction="right" scrollamount="0">
<div style="position:relative; width: 500px; height: 340px; overflow: hidden; border-radius: 50%; border: #B40404 0px solid"><iframe frameborder="0" scrolling="no" src="https://www.ixigua.com/iframe/7013224348836168222?autoplay=1" style="width:500px;height:340px;transform:scale(1.2);margin-left:0px;margin-top:0px;-webkit-mask-image: radial-gradient(black 39% ,transparent 62%);"></iframe></div>
</marquee> </marquee></div>
<br />
​
<p>
<audio autoplay="" loop="1" src="">&nbsp;</audio>
</p>
​​<br />
​<br />
​<br />
​
<div style="MARGIN-TOP: 725px; MARGIN-LEFT: 0px">&nbsp;</div>
</div>
​<br />
​<br />
​<br />
​</div>

<p style="text-align: center;">​</p>

<div style="position:absolute;top: 750px;left: 400px;">
<style type="text/css">.html{background:
width:250px;
height:250px;margin-top:30px; margin-left:0px; }

/*最外层容器样式*/
.wrap{
        width: 250px;
        height: 250px;
        /*改变左右上下,图片方块移动*/
        margin: 0px 0px;
        position:absolute; margin-top:260px; margin-left:380px;
}
/*包裹所有容器样式*/
.cube{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        -webkit-animation: rotate 7s infinite;
        /*匀速*/
        animation-timing-function: linear;
}
@-webkit-keyframes rotate{
        from{transform: rotateX(0deg) rotateY(0deg);}
        to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 1.80;
        transition: all .8s;
}
/*定义所有图片样式*/
.pic{
        width: 200px;
        height: 200px;
}
.cube .out_front{
        transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
        transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
        transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
        transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
        transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
        transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span{
        display: bloack;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
}
.cube .in_pic{
        width: 100px;
        height: 100px;
}
.cube .in_front{
        transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
        transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
        transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
        transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
        transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
        transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front{
        transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
        transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
        transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
        transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
        transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
        transform: rotateX(-90deg) translateZ(200px);
}
</style>
<div class="html">
<div class="wrap">
<div class="cube">
<div class="out_front" style="text-align: left;"><img class="pic" src="https://pic.imgdb.cn/item/64d9b20c1ddac507ccf90cc4.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_back"><img class="pic" src="https://pic.imgdb.cn/item/64d9b5571ddac507cc00dbd6.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_left"><img class="pic" src="https://pic.imgdb.cn/item/64d9b2341ddac507ccf96326.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_right"><img class="pic" src="https://pic.imgdb.cn/item/64d9b5721ddac507cc011f1e.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_top"><img class="pic" src="https://pic.imgdb.cn/item/64d9b2561ddac507ccf9b6dd.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_bottom"><img class="pic" src="https://pic.imgdb.cn/item/64d9b58f1ddac507cc016289.jpg" style="width: 200px; height: 200px;" /></div>
</div>

<div style="MARGIN-TOP: -140px; MARGIN-LEFT: -1000px">
<div style="box-sizing: border-box;margin: 0px auto;padding: -300px;">
<p style="text-align: center;">&nbsp;</p>

<div style="box-sizing: border-box;margin: 0px auto;padding: 0px;">
<style type="text/css">#动画{
background-image:url();}
#旋转木马 img{
width:40px;
height: 40px;
position: absolute;
left:0px;
top:25px;
border:6px Lime double;
border-radius: 150px;
}
#旋转木马 img:nth-child(1){
transform: rotateY(0deg) translateZ(50px);
}
#旋转木马 img:nth-child(4){
transform: rotateY(180deg) translatez(50px);
}
#旋转木马 img:nth-child(5){
transform: rotateY(240deg) translatez(50px);
}
#旋转木马 img:nth-child(6){
transform: rotateY(300deg) translatez(50px);
}
#旋转木马{
margin: 30px auto;/*让父元素居中*/
width: 40px;
height: 40px;
transform-style: preserve-3d;
animation-name: 起伏木马;
animation-duration: 10s; /*动画完成一个周期需用的秒数*/
animation-iteration-count: infinite; /*动画循环无限 */
animation-timing-function: linear;
position: relative;
}
@keyframes 起伏木马 {
100%{transform: rotateX(0deg) rotateY(0deg) ;}
100%{transform: rotateX(10deg) rotateY(180deg) ;}
100%{transform: rotateX(0deg) rotateY(360deg) ;}
100%{transform: rotateX(-10deg) rotateY(540deg) ;}
100%{transform: rotateX(0deg) rotateY(720deg) ;} }
</style>
<div id="动画">
<div id="img:">
<div id="旋转木马">&nbsp;</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

红影 发表于 2023-8-14 19:25

小视频里是原唱的场景吧。漂亮的制作{:4_199:}

红影 发表于 2023-8-14 19:28

鼠标滑过还能让六面体散开来，很奇妙的效果。欣赏焱鑫磊好帖{:4_199:}

梦油 发表于 2023-8-14 20:07

焱鑫磊朋友的制作真漂亮，而且这支歌曲也是我很喜欢的，不过我更喜欢于淑珍的演唱。

小辣椒 发表于 2023-8-14 20:18

这个我要电脑可以欣赏，回家再看，这个旋转效果，手机是在界面外面的，不晓得是不是我手机原因

小辣椒 发表于 2023-8-14 20:18

制作辛苦了，谢谢分享{:4_171:}

焱鑫磊 发表于 2023-8-16 11:19

红影 发表于 2023-8-14 19:25
小视频里是原唱的场景吧。漂亮的制作

是原唱视频。

焱鑫磊 发表于 2023-8-16 11:25

红影 发表于 2023-8-14 19:28
鼠标滑过还能让六面体散开来，很奇妙的效果。欣赏焱鑫磊好帖

是这种效果。

焱鑫磊 发表于 2023-8-16 11:26

梦油 发表于 2023-8-14 20:07
焱鑫磊朋友的制作真漂亮，而且这支歌曲也是我很喜欢的，不过我更喜欢于淑珍的演唱。

问好梦油！{:4_187:}

焱鑫磊 发表于 2023-8-16 11:28

小辣椒 发表于 2023-8-14 20:18
这个我要电脑可以欣赏，回家再看，这个旋转效果，手机是在界面外面的，不晓得是不是我手机原因

电脑看六面体效果可以的，手机看为什么跑边框外了呢。

焱鑫磊 发表于 2023-8-16 11:28

小辣椒 发表于 2023-8-14 20:18
制作辛苦了，谢谢分享

问好小辣椒！{:4_187:}

梦油 发表于 2023-8-16 14:38

焱鑫磊 发表于 2023-8-16 11:26
问好梦油！

焱鑫磊朋友不客气。

红影 发表于 2023-8-16 15:44

焱鑫磊 发表于 2023-8-16 11:19
是原唱视频。

用得真好，非常漂亮{:4_187:}

红影 发表于 2023-8-16 15:45

焱鑫磊 发表于 2023-8-16 11:25
是这种效果。

这个效果太奇妙了{:4_199:}

小辣椒 发表于 2023-8-16 21:37

焱鑫磊 发表于 2023-8-16 11:28
电脑看六面体效果可以的，手机看为什么跑边框外了呢。

这个好奇怪啊，你代码修改过没有，我现在是电脑看 六面体在中间的

小辣椒 发表于 2023-8-16 21:38

焱鑫磊 发表于 2023-8-16 11:28
问好小辣椒！

焱鑫磊晚上好{:4_204:}
页: [1]
查看完整版本: 《泉水叮咚响》卞小贞