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

⽤简单的css实现html⽹页动态电⼦相册的功能
<!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>
2012全国百强县
<body bgcolor="#808080">
<div>
wap模拟器<img src="../img/img1.jpg"alt="" />
<img src="../img/xiaohai.jpg"alt="" />
<img src="../img/img3.jpg"alt="" />
<img src="../img/img4.jpg"alt="" />
aex公共广播
<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>
把⾃⼰的英⽂相册照⽚和背景⾳乐加在相应位置就⾏了,注意⾳乐不能以中⽂开头,最好是英⽂

本文发布于:2024-09-20 20:20:36,感谢您对本站的认可!

本文链接:https://www.17tex.com/xueshu/395126.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:相册   不能   相应
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议