PS设计教程网欢迎你！

使用CSS3来定位一个倾斜的图片(2)

文章来源于 ximumu.cn，感谢作者 夕木木 给我们带来经精彩的文章！
设计教程/前端设计/前端设计2009-11-13
第五步:现在要进入本教程的重点了.使用CSS3 box-shadow 这个属性给图片添加阴影.为了让图片的顺序排列好,我们要给图片加个类.还要加个相对属性. ul class=gallery li ahref=http://www.flickr.com/photos/claudio_a

第五步:现在要进入本教程的重点了.使用CSS3 box-shadow 这个属性给图片添加阴影.为了让图片的顺序排列好,我们要给图片加个类.还要加个"相对"属性.

<ul class="gallery">
 <li>< ahref="http://www.flickr.com/photos/claudio_ar/2214532638/" class="pic-1"><img src="images/1.jpg"  <li>< ahref="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="images/2.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="images/3.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="images/4.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2811295698/" class="pic-5"><img src="images/5.jpg"  <li>< ahref="http://www.flickr.com/photos/claudio_ar/2601700491/" class="pic-6"><img src="images/6.jpg" </ul>

第六步:现在要对每个类,加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);
}

 

使用CSS3来定位一个倾斜的图片

第七步:因为每张图片在位置上的不同,我们可以为其设置个性的风格.比如说:z-index 和 旋转 的属性.

第八步:现在图片差不多在背景上排列出来了.

ul.gallery li a:hover {
 z-index: 10;
 -moz-box-shadow: 3px 5px 15px #333;
}

第九步:添加 :hover 样式,给z-index加个更高的位置,当鼠标移入的时候可以跳到最上面.同时调整阴影,让图片感觉取消了屏幕.

使用CSS3来定位一个倾斜的图片

推荐文章
热门文章
关于我们广告服务联系方式免责声明
Copyright 2009-2021 www.MissYuan.net All rights reserved.
版权所有PS设计教程网公安备案：苏公网安备 32058302001023号工信部备案：沪ICP备09005587号
aaa