html打照片墙的代码原理,使用html+css实现一个个人照片墙
今天我们来简单的实现一个个人照片墙
照片呈不规则的角度摆放，当鼠标放在照片上时，照片会放大；
鼠标离开照片时，照片回到原来的状态。
其实只要用CSS3的一些属性完全就可以实现这样的效果，无须一行js代码~~
代码分为两部分
HTML内容其实很简单，就是在一个div里面放上几个图片
人生就是搞事 每天睡觉的时候问自己：今天一天过得不错吧？梦想是不是更远了？
接下来就是CSS部分的代码
h1{color:#CFB53B;
font-family:方正清刻本悦宋;
text-align:center;
}
body{background:url(bg.jpg)top center no-repeat;
background-size:cover;
}
#ji{font-family:"Courier New", Courier, monospace;
font-size:24px;
text-align:center;
color:#6B4226;
}
.con{
width: 960px;
height: 500px;
margin:100px auto;
position: relative;
}
img{
position:absolute;
padding: 10px 10px 15px;
background:#fff;
border:1px solid #ddd;
cursor:pointer;
}
img:nth-of-type(1){transform:rotate(20deg);
z-index:2;
left:10%;
top:180px;
}
img:nth-of-type(2){transform:rotate(10deg);
z-index:4;
left:25%;
top:180px;
}
img:nth-of-type(3){transform:rotate(-10deg);
z-index:1;
left:40%;
top:180px;
}
img:nth-of-type(4){transform:rotate(5deg);
z-index:2;
left:55%;
top:180px;
}
img:nth-of-type(5){transform:rotate(10deg);
z-index:3;
left:70%;
top:180px;
}
img:nth-of-type(6){transform:rotate(-5deg);
z-index:1;
left:10%;
【html打照片墙的代码原理,使用html+css实现一个个人照片墙】top:500px;
}
img:nth-of-type(7){transform:rotate(10deg);
z-index:2;
left:25%;
top:500px;
}
img:nth-of-type(8){transform:rotate(20deg);
z-index:1;
left:40%;
top:500px;
}
img:nth-of-type(9){transform:rotate(10deg);
z-index:4;
left:55%;
top:500px;
}
img:nth-of-type(10){transform:rotate(-10deg);
z-index:1;
left:70%;
top:500px;
}
img:hover{
transform:scale(2,2);
transition:all 3s;
box-shadow: 10px 10px 15px #034663;
z-index:20
}
首先，为了照片墙美观一些，我们在主体部分加入了一张背景图片，使得整个界面不单调。
然后为照片墙的名称加一些特殊字体和颜色，并使文本内容居中。
接下来就是照片的布局和旋转特效了，首先我们为每一个图片设置一个position:absolute绝对定位
因为我们待会儿需要用到z-index来为图片设置缩放和堆叠的效果，如果没有绝对定位的话所有的图片都会层叠在一起
为了没个图片设置padding: 10px 10px 15px;
(上下左右四个内边距为10px)background设置白色，这样每个图片都
拥有了一个白色的边框，然后设置光标样式cursor，使cursor属性值为pointer，当鼠标放在图片上将显示手指样式。
然后使用nth-of-type(n)选择器来逐个选择图片，img:nth-of-type(1)代表选择第一个图片，以此类推，
使用transform:rotate()来为图片设置一个旋转角度，角度可以为负。
使用z-index:()来设置图片的堆叠属性，也就是z轴
使用left:();
top:()来为图片设置摆放位置，从代码可以看出，我们为前面五张图片设置高度180px使其呈一列摆放
图片间隔15%规律摆放，第二排图片高度设置为500px，当然这里的值并不固定，为了美观或者个性也可以将图片随
意摆放于视窗某处。
接下来就是设置当鼠标放在图片上图片放大的特效了，使用img:hover设置当鼠标悬停图片时
transform:scale(x,y);
图片进行缩放的比列x y可以不相等，我们这里设置了放大2倍
transition:all ns;
来规定完成这个动作所需要的时间，这里我们设置时间为3s
box-shadow来为图片设置阴影效果，其中水平阴影以及垂直阴影设置为必须，这里我们设置水平与垂直为10px
模糊距离为15px，因为我们设置了hover,所在阴影效果只会在图片放大之后才有效果
接下来依然设置z-index:()，这里的值要大于前面每张图片的值，这样当图片放大之后才会现在在屏幕前方
这样呢我们一个简单的照片墙就以及完成了
效果展示
推荐阅读
- 3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
- HTML至WordPress 3流程
- HTML表格垂直对齐文字
- 投稿|“全场6块6”，这生意火了，代理商手机被打爆
- 如何在特色图片后显示一些html（）
- 即将完结的奈学大厂高薪必备技能训练营一期正确的打开方式
- 如何打印wordpress帖子（）
- 如何通过点击锚链接打开子菜单（）
- Beyond Compare比较文件夹打开方式有哪些?
- Win8系统打开文件夹提示“拒绝访问”处理办法