3d相册音乐弹幕

最新推荐文章于 2024-10-06 06:13:14 发布
谢清林%
最新推荐文章于 2024-10-06 06:13:14 发布
阅读量116
点赞数
文章标签： html5 html css
本文链接：https://blog.csdn.net/weixin_42730613/article/details/126041324
版权
<!DOCTYPE html>
<html>

div>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="red" size="20px" >天增岁月人增寿，春满人间福满门</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="aqua" size="5px">爆竹一声除旧，桃符万象更新</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="aqua" size="20px">一夜连双岁，三更分两年。</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="pink" size="5px">冬天麦盖三层被，来年枕着馒头睡</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="red"size="20px" >喜居宝地千年旺，福照家门万事兴</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="greenyellow" size="5px">“见贤思齐焉，见不贤而内自省也。</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="pink" size="20px" >三人行，必有我师焉。择其善者而从之，其不善者而改之。</font> </marquee>
    <marquee behavior="scroll" direction="left" scrollamount="10"><font color="pink" size="5px">士不可以不弘毅，任重而道远。仁以为己任，不亦重乎？死而后已，不亦远乎？</font> </marquee>
 <marquee behavior="scroll" direction="left" scrollamount="10"><font color="aqua" size="20px">岁寒，然后知松柏之后凋也。</font> </marquee>
 <marquee behavior="scroll" direction="left" scrollamount="10"><font color="aqua" size="5px">有一言而可以终身行之者乎？”子曰：“其恕乎！己所不欲，勿施于人。</font> </marquee>
</div>

</body>

<embed src="https://www.vvvdj.com/play/233780.html"，
embed src="https://www.vvvdj.com/play/233836.html"，
embed src="https://www.vvvdj.com/play/233725.html"，
embed src="https://www.vvvdj.com/play/233947.html"，
embed src="https://www.vvvdj.com/play/233676.html"，
embed src="https://www.vvvdj.com/play/233724.html"，
embed src="https://www.vvvdj.com/play/233890.html"，
embed src="https://www.vvvdj.com/play/233779.html"，
embed src="https://www.vvvdj.com/play/233891.html".
autostart="true" loop="true" hidden="true"></embed>

<head lang="en">
    <meta charset="UTF-8">
    <link type="text/css"  href="3.css" rel="stylesheet ">
    <title>turn_pictures_wys</title>
 <style>
 <pre name="code" class="css">*{
    padding:0;
    margin:0;
}
body
    #react{
    width: 200px;
    height:200px;
    margin: -300px auto;
    transform-style:preserve-3d;
    animation:rotate 5s infinite;
    animation-timing-function: linear;
}
#react div{
    position:absolute;
    transition: all .10s;
}
div .out_pic{
    width:200px;
    height:200px;
    opacity:0.9;
}
div .in_pic{
    width:100px;
    height:100px;
}
#react span{
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
}
@keyframes rotate{
    from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(360deg) rotateY(360deg);}
}
 
 
.out_front{
    transform:translateZ(100px);
}
.out_back{
    transform:translateZ(-100px);
}
.out_left{
    transform:rotateY(90deg) translateZ(100px);
}
.out_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.out_top{
    transform:rotateX(90deg) translateZ(100px);
}
.out_bottom{
    transform: rotateX(-90deg) translateZ(100px);

}
.in_front{
    transform:translateZ(50px);
}
.in_back{
    transform:translateZ(-50px);
}
.in_left{
    transform:rotateY(90deg) translateZ(50px);
}
.in_right{
    transform: rotateY(-90deg) translateZ(50px);
}
.in_top{
    transform:rotateX(90deg) translateZ(50px);
}
.in_bottom{
    transform: rotateX(-90deg) translateZ(50px);
}
 
/*外面的图片散开*/
#react:hover .out_front{
    transform:translateZ(200px);
}
#react:hover .out_back{
    transform:translateZ(-200px);
}
#react:hover .out_left{
    transform:rotateY(90deg) translateZ(200px);
}
#react:hover .out_right{
    transform: rotateY(-90deg) translateZ(200px);
}
#react:hover .out_top{
    transform:rotateX(90deg) translateZ(200px);
}
#react:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(200px);
}
 
 
/*里面的图片散开*/
#react:hover .in_front{
    transform:translateZ(100px);
}
#react:hover .in_back{
    transform:translateZ(-100px);
}
#react:hover .in_left{
    transform:rotateY(90deg) translateZ(100px);
}
#react:hover .in_right{
    transform: rotateY(-90deg) translateZ(100px);
}
#react:hover .in_top{
    transform:rotateX(90deg) translateZ(100px);
}
#react:hover .in_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
 
 </style>
</head>


<body>
<div id="react">
    <div class="out_front">
        <img src=" https://p0.ssl.qhimgs1.com/sdr/400__/t01246a2468e2de93fa.jpg" class="out_pic">
    </div>
    <div class="out_back">
        <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01373b902fa4b913ae.jpg" class="out_pic">
    </div>
    <div class="out_left">
        <img src="https://p3.ssl.qhimgs1.com/sdr/400__/t01bc84655577580829.jpg" class="out_pic">
    </div>
    <div class="out_right">
        <img src="https://p5.ssl.qhimgs1.com/sdr/400__/t012b00dac47ac7a76f.jpg" class="out_pic">
    </div>
    <div class="out_top">
        <img src="https://p3.ssl.qhimgs1.com/sdr/400__/t010972906858ebc343.jpg" class="out_pic">
    </div>
    <div class="out_bottom">
        <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t01a969e8a316c786dc.jpg" class="out_pic">
    </div>
    <span class="in_front">
        <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01a69e3de74c2874f0.jpg" class="in_pic">
    </span>
    <span class="in_back">
        <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t01e350f2f63af168b2.jpg" class="in_pic">
    </span>
    <span class="in_left">
        <img src="https://p1.ssl.qhimgs1.com/sdr/400__/t01d715d5bac5be223b.jpg" class="in_pic">
    </span>
    <span class="in_right">
        <img src="https://p0.ssl.qhimgs1.com/sdr/400__/t01bf3d0ba21a970c14.jpg" class="in_pic">
    </span>
    <span class="in_top">
        <img src="https://p5.ssl.qhimgs1.com/sdr/400__/t0105f2c9e9a1a71925.jpg" class="in_pic">
    </span>
    <span class="in_bottom">
        <img src="https://img.zcool.cn/community/010a0259e469d7a80121ae0c074f0d.jpg@3000w_1l_0o_100sh.jpg" class="in_pic">
    </span>

</div>
</body>
</html>