Home > Developer > Web Develop
Goal: Animate the photo wall layout and mouse over pictures
Knowledge points involved: CSS3 animation, transitions, Transformations (scaling), absolute positioning and relative positioning
Doubt: the effect of absolute positioning and relative positioning on the display hierarchy of page elements
Reference to the program of the Geek College preacher Iwen
Source code--
HTML section:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<link type= "Text/css" href= "Picwall.css" rel= "stylesheet" >
<body>
<div class= "Con" >
</div>
</body>
CSS Section (PICWALL.CSS):
*{
margin:0px;
}
body{
Background-color:gainsboro;
}
. con{
width:960px;
height:450px;
margin:50px Auto;
/*position:relative;*/
}
. pic{
width:130px;
padding:10px;
/*position:relative;*/
}
. Con img{
/*padding:10px 10px 15px; */
/*border:1px solid #aaaaaa;
/*box-shadow:2px 2px 2px Rgba (60,60,60,0.5); */
/*position:absolute;*/
Z-index:1;
Transition:all 0.6s ease-in;
}
. Con img:hover{
z-index:2;/* implementation of the mouse when the picture is placed on the top layer, but this requires that the IMG use absolute positioning
The corresponding position of each picture must also be modified */
Transform:rotate (0DEG) scale (1.2);
}
. pic25{
left:10px;
top:0px;
Transform:rotate ( -6DEG);
-webkit-transform:rotate ( -6deg);/*chrome Browser Adaptation */
}
. pic26{
Left: -2px;
top:10px;
Transform:rotate (0DEG);
/* This should be accompanied by a browser adaptation, default to Chrome browser testing, the same as the following */
}
. pic27{
left:2px;
top:0px;
Transform:rotate ( -16DEG);
}
. pic28{
Left: -2px;
top:0px;
Transform:rotate ( -6DEG);
}
. pic29{
left:10px;
top:20px;
Transform:rotate (20DEG);
}
. pic30{
left:10px;
top:0px;
Transform:rotate ( -6DEG);
}
. pic31{
left:10px;
top:0px;
Transform:rotate ( -6DEG);
}
. pic32{
left:10px;
Bottom: -7px;
Transform:rotate (16DEG);
}
. pic33{
left:10px;
top:0px;
Transform:rotate ( -6DEG);
}
. pic34{
left:3px;
top:10px;
Transform:rotate (3DEG);
}
. pic35{
left:10px;
top:0px;
Transform:rotate ( -16DEG);
}
. pic36{
left:20px;
top:0px;
Transform:rotate (10DEG);
}
CSS3 to realize the layout and animation effect of photo wall
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
