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

最新推荐文章于 2024-06-19 11:06:21 发布

周先森爱编程丶

最新推荐文章于 2024-06-19 11:06:21 发布

阅读量2.6w

点赞数 12

分类专栏： js 文章标签：电子相册 css html

本文链接：https://blog.csdn.net/qq_37796017/article/details/78003285

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

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

周先森爱编程丶

关注

12
点赞
踩
58

收藏

觉得还不错? 一键收藏
6
评论
用简单的css实现html网页动态电子相册的功能

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>相册</title> <style type="text/css"> img{width:420px;height:580px;} div{
复制链接

扫一扫