简介：css 实现图片倾斜展示
提醒：一些应用需要开启WebGL，才能看到效果，如何开启WebGL
很好玩儿的效果哦……感兴趣的一起来试试吧…………
工具/原料
- <P>相关软件</P>
- <P>图片 </P>
方法/步骤
- 1
写入以下代码来构建一个基本的框架,下载背影图.
body {background: #959796 url(images/wood-repeat.jpg);}
#container {width: 600px; margin: 40px auto;}
- 2
用ul来定义一列图片,然后再给每张图片定义li,别忘了给每一张图片添加它们的alt<ul class="gallery"><li>< a href="#"><img src="images/1.jpg"
alt="Photograph of a waterfall" /></li><li>< a href="#"><img src="images/2.jpg"
alt="Photograph of clouds and sunlight" /></li><li>< a href="#"><img src="images/3.jpg"
alt="Photograph of a lake scene at dusk" /></li><li>< a href="#"><img src="images/4.jpg"
alt="Photograph of a tree and green grass" /></li><li>< a href="#"><img src="images/5.jpg"
alt="Photograph of a beach sunset" /></li><li>< a href="#"><img src="images/6.jpg"
alt="Photograph of a flower and lake" /></li>< /ul>
- 3
现在我们来给UL添加CSS属性,首先我要得把列表默认的小圆点清除掉,使用一个简单的属性就可以清除: list-style:noneul.gallery li a {float: left;padding: 10px 10px 25px 10px;background: #eee;border: 1px solid #fff;｝
- 4
现在要给图片润润色.首先让它们左浮动.再给它们增加一点填充.给图片添加一个浅灰色的背景,最后再加一个象素的白色边框让图片更加靓丽.
ul.gallery li a {float: left;padding: 10px 10px 25px 10px;background: #eee;border: 1px solid #fff;-moz-box-shadow: 0px 2px 15px #333;position: relative;}
- 5
现在要进入本教程的重点了.使用CSS3
- 6
现在要对每个类,加CSS.因此在上面我们给每张图加个唯
一的类名.
ul.gallery li a.pic-1 {z-index: 1;-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);}ul.gallery li a.pic-2 {z-index: 5;-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);}ul.gallery li a.pic-3 {z-index: 3;-webkit-transform: rotate(4deg);-moz-transform: rotate(4deg);}
- 7
因为每张图片在位置上的不同,我们可以为其设置个性的
风格.比如说:z-index 和 旋转 的属性.现在图片差不多在背景上排列出来了.ul.gallery li a:hover {z-index: 10;-moz-box-shadow: 3px 5px 15px #333;}
- 8
添加 :hover 样式,给z-index加个更高的位置,当鼠标移
入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕
END
注意事项
实现倾斜的代码就是
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
ie低版本的浏览器暂不支持
一起来挥洒青春学习吧^_^