您的位置：首页 > Web前端 > CSS

html+css实现照片墙系统

2017-06-22 16:42 423 查看

实现的功能如下：具有动画和阴影效果

1.实现图片的散乱布局，并且具有一定的倾角。

2.照片改为圆角，具有阴影效果，边缘效果。

3.当鼠标移动到图片时，图片自动旋转放大。

同时可以以手机APP的形式在手机端运行，需要打开开发者模式以及允许安装未知应用。

静态图片布局效果如下：

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 >

<embed src="heartbeats.mp3"
hidden="true" autostart="true" loop="true" >

<div>
<img src="1.jpg" class="pic1"/>
<img src="2.jpg" class="pic2"/>
<img src="3.jpg" class="pic3"/>
<img src="4.jpg" class="pic4"/>
<img src="5.jpg" class="pic5"/>
<img src="6.jpg" class="pic6"/>
<img src="7.jpg" class="pic7"/>
<img src="8.jpg" class="pic8"/>
<img src="9.jpg" class="pic9"/>
<img src="10.jpg" class="pic10"/>
<img src="11.jpg" class="pic11"/>

</div>
</body>
</html>

style.css
*{
background-color:black;
}

img{
border-radius: 60px;
width: 160px;
height: 160px;
padding: 10px;
background-color: white;
box-shadow: 15px 15px 15px rgba(50,50,50,0.99);
position: absolute;
/*绝对定位--利用Left可以手动调整照片位置*/
/*加入动画效果*/
transition: all 1s ease-in;
}

img:hover{
box-shadow: 35px 35px 35px rgba(50,50,50,0.8);
transform: rotate(0deg) scale(1.5);
z-index: 1;/*代表图片层级，将其设置为最上面的图层*/
}
div{
width: 80%;
height: 450px;
}

.pic1{
transform: rotate(30deg);
top:40px;
left:100px;
}
.pic2{
transform: rotate(-20deg);
top:50px;
left:350px;
}
.pic3{
transform: rotate(-40deg);
top:40px;
left:500px;
}
.pic4{
transform: rotate(60deg);
top:50px;
left:750px;
}
.pic5{
transform: rotate(60deg);
top:250px;
left:50px;
}
.pic6{
transform: rotate(60deg);
top:250px;
left:250px;
}
.pic7{
transform: rotate(60deg);
top:250px;
left:500px;
}
.pic8{
transform: rotate(20deg);
top:450px;
left:50px;
}
.pic9{
transform: rotate(-10deg);
top:450px;
left:250px;
}
.pic10{
transform: rotate(30deg);
top:450px;
left:450px;
}
.pic11{
transform: rotate(-15deg);
top:450px;
left:600px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航