CSS3图片阴影效果解析

前端开发whqet,csdn,王海庆,whqet,前端开发专家

利用CSS3实现图片阴影效果，在线研究点这里，下载收藏点这里。

利用css3实现的图片投影系列效果使用以下知识点：

1.::before、::after伪对象

2.绝对定位和z-index

3.css3 transform（变换）

4.css3 shadow（阴影）

效果一

哦，来看第一个效果，效果如下图所示。

呐，html文件非常简单，我们要用到google fonts里的特殊字体，这里需要导入字体。

<link href='http://fonts.googleapis.com/css?family=Joti+One' rel='stylesheet' type='text/css'>
<div class="shadow effect1">
  <span>Effect1</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

<div class="shadow effect2">
  <span>Effect2</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

<div class="shadow effect3">
  <span>Effect3</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

<div class="shadow effect4">
  <span>Effect4</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

<div class="shadow effect5">
  <span>Effect5</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

<div class="shadow effect6">
  &