CSS照片墙代码实现教程
程序员文章站
2023-02-28 13:54:39
CSS照片墙代码实现教程
...
CSS照片墙代码实现教程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style type="text/css">
body
{
background-color: #000000;
}
p ul li > img
{
width: 300px;
height: 180px;
border: 8px solid #ffffff;
}
p ul li
{
list-style-type: none;
float: left;
}
.main
{
position: relative;
top: 100px;
left: 400px;
margin: 0 auto;
}
#im1
{
transform-origin: 50% 100% ;
transform: rotate(-7deg);
position: absolute;
left: 10px;
transition: 0.7s;
}
#im2
{
position: absolute;
left: 30px;
}
#im3
{
transform: rotate(7deg);
position: absolute;
left: 50px;
transition: 0.7s;
}
.main:hover #im1
{
transform-origin: 50% 300% ;
transform: rotate(-30deg);
}
.main:hover #im3
{
transform-origin: 50% 300% ;
transform: rotate(30deg);
}
</style>
</head>
<body>
<p class="main">
<ul>
<li id="im3"><img src="images/3.jpeg"></li>
<li id="im2"><img src="images/2.jpeg"></li>
<li id="im1"><img src="images/1.jpeg"></li>
</ul>
</p>
</body>
</html>