午老虎 发表于 2022-12-2 08:44

可可托海的牧羊人

<!--两个四方体摆钟-->
<div class="cont-area">
<p align="center"><img src="http://pan.yinhuabbs.cn/view.php/80c0d8cab6ad459e0ee074f13bae7f93.jpg" style="width: 225px; height: 165px; display: none;" /></p>
<style type="text/css">.html{
        background:linear-gradient(#ff0 0%,#000080 80%);
box-shadow:0px 0px 0px 2px #ffffff, 0px 0px 10px 15px #800000;background:url(http://pan.yinhuabbs.cn/view.php/80c0d8cab6ad459e0ee074f13bae7f93.jpg);background-size:100% 100%;
   width: 1000px;
        height: 576px;margin-top:30px; margin-left:-62px;

}
/*最外层容器样式*/
.wrap{
        width: 250px;
        height: 250px;
        /*改变左右上下,图片方块移动*/
        margin: 0px 0px;
        position:absolute; margin-top:180px; margin-left:380px;
       
}
/*包裹所有容器样式*/
.cube{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        -webkit-animation: rotate 5s 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: 0.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: 350px;
}
.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: center;">&nbsp;<img class="pic" src="http://pan.yinhuabbs.cn/view.php/b1f4a88cd3425234ddd6b1b8642bb719.jpg" style="width: 200px; height: 200px;" /></div>

<div class="out_back"><img class="pic" src="http://pan.yinhuabbs.cn/view.php/7fcd67eea4f10735543f78b169bf0946.jpg" style="width: 200px; height: 200px;" /></div>
<div class="out_left"><img class="pic" src="http://pan.yinhuabbs.cn/view.php/9f6d25cf06864ad6643fc0e4cccac371.jpg" style="width: 200px; height: 200px;" /></div>
<div class="out_right"><img class="pic" src="http://pan.yinhuabbs.cn/view.php/a23c94a3afc1940a1f143099acf57ce9.jpg" style="width: 200px; height: 200px;" /></div>
<div class="out_top"><img class="pic" src="http://pan.yinhuabbs.cn/view.php/78bf7b5254b823ef311de89c42baf913.jpg" style="width: 200px; height: 200px;" /></div>
<div class="out_bottom"><img class="pic" src="http://pan.yinhuabbs.cn/view.php/117cd4f5d6eb2b3c8804798ab236eed5.jpg" style="width: 200px; height: 200px;" /></div>

<span class="in_front"><img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/c5d314d613c7dc36577e021c19c57b6f.jpg" /> </span> <span class="in_back"> <img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/5f2f4b6b1fe87ed5efbf0af01c83a2d2.jpg" /> </span> <span class="in_left"> <img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/23b2108521c32ff07fda9c1d06c08115.jpg" /> </span> <span class="in_right"> <img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/7a4a9960a67daa58d6af69c71e2c9b3c.jpg" /> </span> <span class="in_top"> <img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/b1f4a88cd3425234ddd6b1b8642bb719.jpg" /> </span> <span class="in_bottom"> <img class="in_pic" src="http://pan.yinhuabbs.cn/view.php/7fcd67eea4f10735543f78b169bf0946.jpg" /> </span></div>
</div>
</div>
<style type="text/css">.移{
        position: relative;
        width: 870px;
        height: 100px;
        margin-top:-120px;margin-LEFT: 80px;
        z-index: 100;
        animation: nm 5s linear infinite;}
@keyframes nm {100%{
                opacity: 1;transform:translate(0%,0%) scale(1.1);
            }
10%{opacity: 1;transform:translate(0%,0%) scale(1);filter: hue-rotate(2240deg)
            }
            0%{
                opacity: 0.5;transform:translate(0%,0%) scale(0.3);filter: hue-rotate(140deg)
            }
                  }
</style>

<div class="cont-area">

<div style="width: 100%;height: 150px;position: absolute;MARGIN-TOP: -180px;MARGIN-LEFT:-62px;transform: scale(1);"><iframe frameborder="0" height="200" marginheight="0" marginwidth="0" scrolling="no"
src="http://pan.yinhuabbs.cn/view.php/65f2a678f45a4671412bad7940701ac9.html" width="950"></iframe></div>
<div style="width: 100%;height: 230px;">&nbsp;</div>
</div>
</div></div>













相约爱晚亭 发表于 2022-12-2 10:24

欣赏音画佳作！

蓝魔 发表于 2022-12-2 21:37

欣赏一下，谢谢。

非常开心 发表于 2022-12-3 18:11

欣赏收藏老师新作好看又好听，点赞！

午老虎 发表于 2022-12-5 17:04

相约爱晚亭 发表于 2022-12-2 10:24
欣赏音画佳作！

谢谢老师的欣赏

午老虎 发表于 2022-12-5 17:04

非常开心 发表于 2022-12-3 18:11
欣赏收藏老师新作好看又好听，点赞！

谢谢老师的欣赏

午老虎 发表于 2022-12-5 17:04

蓝魔 发表于 2022-12-2 21:37
欣赏一下，谢谢。

谢谢老师的欣赏
页: [1]
查看完整版本: 可可托海的牧羊人