<!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>
用简单的css实现html网页动态电子相册的功能
最新推荐文章于 2024-08-22 13:11:52 发布