The life of software has been ups and downs for ten years, and Xianjian has passed for more than ten years. I have known Hu Ge for so long. Today, I am happy to hear the news that my friend Hu Ge has a baby. I am surprised to use css3 to create an animation photo wall template for Hu Ge’s baby. Effect.
Table of contents
3. Select the template material to layout the image elements
5. Zoom-in animation when the mouse moves up
1. Implementation ideas
First, by setting a div element, set the width and height as the background wall;
And set the positioning of the background wall to relative, so that the internal photos can be rotated and positioned;
For internal photos, you can find some materials, and then set the positioning to absolute, and here you need to add the rotation attribute of css3 for layout;
Finally, when the mouse moves up to each photo, there needs to be a zoom-in effect, in order to better display each photo.
2. Realization of the wall
It is necessary to set a div element, add the class attribute of wall, and in order to locate the internal photos, the positioning attribute adopts position:relative, and the color value can be set to be more festive. Here it is set as a background effect of #ccc, the code is as follows :
// css部分
.wall {
position: relative;
width: 800px;
height: 400px;
background: #CCC;
}
<!-- html部分 -->
<div class="wall">
</div>3. Select the template material to layout the image elements
You can go to the Internet to select some baby photo materials to make templates, just select a few, and then because each picture needs special positioning, so for each picture (each img element adds its own clsss class), the code is as follows:
<div class="wall">
<img src="./111.png" class="img1" />
<img src="./222.png" class="img2" />
<img src="./333.png" class="img3" />
<img src="./444.png" class="img4" />
<img src="./555.png" class="img5" />
<img src="./666.png" class="img6" />
<img src="./777.png" class="img7" />
</div>4. css3 rotation positioning
The next step is the important part, which is to give each photo a unique positioning. The positioning includes the setting of top left width height. Because the photo wall wants to be more realistic, it will have a certain occlusion effect, and through the setting of position:absolute This effect can be achieved just by setting. If you want a certain one to be displayed on the top, you can set it again through z-index. The code is as follows:
.img1 {
position: absolute;
top: 20px;
left: 60px;
width: 110px;
height: 86px;
transform: rotate(20deg);
}
.img2 {
position: absolute;
top: 20px;
left: 222px;
width: 143px;
height: 118px;
transform: rotate(-27deg);
}
.img3 {
position: absolute;
top: 78px;
left: 430px;
width: 190px;
height: 148px;
transform: rotate(58deg);
}
.img4 {
position: absolute;
top: 99px;
left: 273px;
width: 280px;
height: 221px;
transform: rotate(58deg);
}
.img5 {
position: absolute;
top: 174px;
left: 73px;
width: 237px;
height: 210px;
transform: rotate(135deg);
}
.img6 {
position: absolute;
top: 174px;
left: 574px;
width: 192px;
height: 195px;
transform: rotate(225deg);
}
.img7 {
position: absolute;
top: 39px;
left: 618px;
width: 134px;
height: 133px;
transform: rotate(10deg);
}5. Zoom-in animation when the mouse moves up
Since it is a HTML + CSS3 dynamic photo wall, it is best to have a zoom-in effect. In fact, there are many effects that can be done, such as rotating, or fading in and out from a certain place, making it like a video , what is done here is the effect of moving the mouse up and zooming in, the code is as follows:
img:hover {
transform: scale(2);
}6. Complete source code
The above are all code snippets. In order to let everyone get the code and have a good effect, you can get the source code below, put it directly in your own notepad, and then change the txt suffix of the notepad to html, and then Open it with a browser to see the effect. The source code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
* {
margin: 0;
padding: 0;
}
.wall {
position: relative;
width: 800px;
height: 400px;
background: #CCC;
}
.img1 {
position: absolute;
top: 20px;
left: 60px;
width: 110px;
height: 86px;
transform: rotate(20deg);
}
.img2 {
position: absolute;
top: 20px;
left: 222px;
width: 143px;
height: 118px;
transform: rotate(-27deg);
}
.img3 {
position: absolute;
top: 78px;
left: 430px;
width: 190px;
height: 148px;
transform: rotate(58deg);
}
.img4 {
position: absolute;
top: 99px;
left: 273px;
width: 280px;
height: 221px;
transform: rotate(58deg);
}
.img5 {
position: absolute;
top: 174px;
left: 73px;
width: 237px;
height: 210px;
transform: rotate(135deg);
}
.img6 {
position: absolute;
top: 174px;
left: 574px;
width: 192px;
height: 195px;
transform: rotate(225deg);
}
.img7 {
position: absolute;
top: 39px;
left: 618px;
width: 134px;
height: 133px;
transform: rotate(10deg);
}
img:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="wall">
<img src="./111.png" class="img1" />
<img src="./222.png" class="img2" />
<img src="./333.png" class="img3" />
<img src="./444.png" class="img4" />
<img src="./555.png" class="img5" />
<img src="./666.png" class="img6" />
<img src="./777.png" class="img7" />
</div>
</body>
7. Finally
Finally, congratulations to Hu Ge again, he has brought us so many excellent works, I am very happy for him, I hope the little baby can grow up happily.