用简单的css实现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>

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

你可能感兴趣的:(js,电子相册,css,html)