用简单的css实现html网页动态电子相册的功能

来源：互联网发布：js 替换特殊字符编辑：程序博客网时间：2024/05/21 14:56

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>相册</title>        <style type="text/css">            img{width:420px;height:580px;}            div{                    width:420px;                height:580px;                position:absolute;                left:0;top:0;right:0;bottom:0;                margin:auto;                transform-style: preserve-3d;                transition: all 12s;                background:url(../img/img2.jpg);                background-size: 100% 100%;            }            div img{                position: absolute;            }            div img:nth-child(1){transform: translateZ(500px);}            div img:nth-child(2){transform: rotateY(60deg) translateZ(500px) ;}            div img:nth-child(3){transform: rotateY(120deg) translateZ(500px) ;}            div img:nth-child(4){transform: rotateY(180deg) translateZ(500px) ;}            div img:nth-child(5){transform: rotateY(240deg) translateZ(500px) ;}            div img:nth-child(6){transform: rotateY(300deg) translateZ(500px) ;}            div:hover{                transform: rotateY(720deg) rotateX(45deg);            }        </style>    </head>    <body bgcolor="#808080">        <div>            <img src="../img/img1.jpg" alt="" />            <img src="../img/xiaohai.jpg" alt="" />            <img src="../img/img3.jpg" alt="" />            <img src="../img/img4.jpg" alt="" />            <img src="../img/img5.jpg" alt="" />            <img src="../img/img6.jpg" alt="" />        </div>        <audio src="../img/gaobaiqiqiu.mp3" autoplay="autoplay" loop="loop"></audio>    </body></html>

把自己的英文相册照片和背景音乐加在相应位置就行了，注意音乐不能以中文开头，最好是英文

阅读全文

1 0

用简单的css实现html网页动态电子相册的功能

把自己的英文相册照片 和 背景音乐加在相应位置就行了，注意音乐不能以中文开头，最好是英文

把自己的英文相册照片和背景音乐加在相应位置就行了，注意音乐不能以中文开头，最好是英文