照片墙---

来源：互联网发布：羽生结弦知乎编辑：程序博客网时间：2024/06/09 17:02

*{background-color: black;}img{width:300px;height:400px;/*边框效果*/padding:10px;background-color:white;box-shadow: 100px 100px 100px rgba(50,50,50,0.99);position:absolute;/*绝对定位*//*利用left手动调整照片位置*/transition: all 1s ease-in;border-radius: 60px;}img:hover{box-shadow: 100px 100px 100px rgba(10,10,10,0.99);transform: rotate(0deg) scale(1.3);}div{width:80%;height:450px;background: black;}.pic1{left:400px;top:20px;}.pic2{left:900px;top:400px;transform: rotate(10deg);}.pic3{left:1400px;transform: rotate(-10deg);}.pic4{left:2000px;transform: rotate(30deg);}.pic5{left:2500px;transform: rotate(24deg);}.pic6{left:200px;top:600px;transform: rotate(14deg);}.pic7{left:800px;top:700px;transform: rotate(-13deg);}.pic8{left:1500px;top:650px;transform: rotate(24deg);}.pic9{left:2000px;top:700px;transform: rotate(40deg);}

网页版照片墙功能及APP安装，带背景音乐。效果如下：

插上USB接口线到手机。点击图示按钮，安装到手机，可在手机上运行。用手机搜索APP文件或直接用qq文件发送就可以找到HBuilder.app。于是可以分享给好友了。

开发环境：HBuilder。

index.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div><img src="img/1.jpg" class="pic1"/><img src="img/2.jpg" class="pic2"/><img src="img/3.jpg" class="pic3"/><img src="img/4.jpg" class="pic4"/><img src="img/5.jpg" class="pic5"/><img src="img/6.jpg" class="pic6"/><img src="img/7.jpg" class="pic7"/><img src="img/8.jpg" class="pic8"/><img src="img/9.jpg" class="pic9"/><img src="img/10.jpg" class="pic10"/><img src="img/11.jpg" class="pic11"/><embed src="周二珂-告白气球.mp3" left:800px top=1000px loop="true" autoplay="true"  hidden="false" style="width: 100%;"/></div></body></html>

style.css

阅读全文

0 0