随笔- 7 文章- 1 评论- 0 阅读- 2326

H5动画相册

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <title>
        </title>
        <!-- <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="./MoJy.css"> 
        <!-- <embed src="./music.mp3" autostart="true" loop="true" hidden="true"></embed> -->
        <!-- <audio autoplay="true" loop="true"> <source src="./music.mp3"></audio> -->
        <!-- <bgsound src="./music.mp3" autostart=true loop=infinite> -->
        <!-- <audio src="./music.mp3" id="aud" autoplay="autoplay" controls="controls" preload="auto"></audio> -->
        <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52  src="./music.mp3" hidden="true"></iframe> -->
        
    </head>
    <body>
        <bgsound src="./music.mp3" autostart=true loop=infinite>
        <div id="1">
        <div class="show">
            <div class="box">
                <img src="./微信图片_20220605172213.jpg" class="img1">
                <img src="./b69bad931e914e14a25a0aeb2b94782.jpg" class="img2">
                <img src="./微信图片_20220605172225.jpg" class="img3">
                <img src="./952ebdde075be2622dc98346957082c.jpg" class="img4">
                <img src="./微信图片_20220605172459.jpg" class="img5">
                <img src="./微信图片_20220605163819.jpg" class="img6">
                <img src="./微信图片_20220605163906.jpg" class="img7">
                <img src="./微信图片_20220605163922.jpg" class="img8">
                <img src="./微信图片_20220605172231.jpg" class="img9">
                <img src="./微信图片_20220605172237.jpg" class="img10">
                
                
            </div>
        </div>
    </body>
</html>

CSS代码

body {
    /* background:url(./b69bad931e914e14a25a0aeb2b94782.jpg)  no-repeat center center ; */
       background-size:cover;
       background-attachment:fixed;
    background:#ffaaff;
    perspective:5000px;
    opacity:1;
    /* width: 650px;
    height: 899px;
     */
}
h1{color: bisque;
text-align: center;
font-size: 24px;
background-color: aquamarine;}


.show {
    perspective:5000px;
    -webkit-transform:rotateX(-45deg);
    -moz-transform:rotateX(-45deg);
    transform:rotateX(-45deg);
    transform-style:preserve-3d;
}
.box {
    position:relative;
    width:150px;
    height:250px;
    border:1px solid red;
    margin:300px auto;
    transform-style:preserve-3d;
    -webkit-animation:rotate1 10s linear infinite;
    -moz-animation:rotate1 10s linear infinite;
    animation:rotate1 10s linear infinite;
}
.box img {
    width:150px;
    height:250px;
    border:1px solid #ccc;
    position:absolute;
    left:0;
    top:0;
    -webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));
}
.img1 {
    -webkit-transform:translateZ(300px);
    -moz-transform:translateZ(300px);
    transform:translateZ(300px);
}
.img2 {
    -webkit-transform:rotateY(36deg) translateZ(300px);
    -moz-transform:rotateY(36deg) translateZ(300px);
    transform:rotateY(36deg) translateZ(300px);
}
.img3 {
    -webkit-transform:rotateY(72deg) translateZ(300px);
    -moz-transform:rotateY(72deg)g) translateZ(300px);
    transform:rotateY(72deg) (300px);
}
.img4 {
    -webkit-transform:rotateY(108deg) translateZ(300px);
    -moz-transform:rotateY(108deg) translateZ(300px);
    transform:rotateY(108deg) translateZ(300px);
}
.img5 {
    -webkit-transform:rotateY(144deg) translateZ(300px);
    -moz-transform:rotateY(144deg) translateZ(300px);
    transform:rotateY(144deg) translateZ(300px);
}
.img6 {
    -webkit-transform:rotateY(180deg) translateZ(300px);
    -moz-transform:rotateY(180deg) translateZ(300px);
    transform:rotateY(180deg) translateZ(300px);
}
.img7 {
    -webkit-transform:rotateY(216deg) translateZ(300px);
    -moz-transform:rotateY(216deg) translateZ(300px);
    transform:rotateY(216deg) translateZ(300px);
}
.img8 {
    -webkit-transform:rotateY(252deg) translateZ(300px);
    -moz-transform:rotateY(252deg) translateZ(300px);
    transform:rotateY(252deg) translateZ(300px);
}
.img9 {
    -webkit-transform:rotateY(288deg) translateZ(300px);
    -moz-transform:rotateY(288deg) translateZ(300px);
    transform:rotateY(288deg) translateZ(300px);
}
.img10 {
    -webkit-transform:rotateY(324deg) translateZ(300px);
    -moz-transform:rotateY(324deg) translateZ(300px);
    transform:rotateY(324deg) translateZ(300px);
}
@-moz-keyframes rotate1 {
    0% {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    transform:rotateY(0deg);
}
100% {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
}@-webkit-keyframes rotate1 {
    0% {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    transform:rotateY(0deg);
}
100% {
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
}