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">
  <span>Effect6</span>
  <img src="http://gx.zptc.cn/whqet/img/5.jpg" alt="" />
</div>

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

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

我们给盒子加两个类，.shadow为统一设置，.effect1设置本效果单独样式。span用来显示效果提示文本。首先来看看.shadow统一设置。

/*===========.shadow统一设置================*/
.shadow{
  width: 640px;
  height:320px;
  margin:100px auto;
  position: relative;
  border: 2px solid #000;
}
.shadow img{
  position: relative;
  width:100%;
  z-index: 2;
}
.shadow span{
  color:#fff;
  font-size:48px;
  font-family: 'Joti One', cursive;
  position: absolute;
  top:30px;
  left:50px;
  z-index:3;
  text-shadow:2px 1px 3px rgba(0,0,0,.8);
}

然后就是效果一的实现了，利用下面的图我们来看下实现过程。

具体的css代码如下

/*===========effect1================*/
.effect1:before,.effect1:after{
  content:"";
  position: absolute;
  width: 50%;
  height: 35%;
  max-width: 300px;
  max-height: 50px;
  background-color: #000;
  z-index:1;
  box-shadow: 0 15px 10px rgba(0,0,0,.5);
}
.effect1:before{
  left:10px;
  bottom:10px;
  /*transform:rotate(-3deg);*/
  transform:skewY(-4deg);
}
.effect1:after{
  right:10px;
  bottom:10px;
  /*transform:rotate(3deg);*/
  transform:skewY(4deg);
}

效果二

效果二的css代码如下

/*===========effect2================*/
.effect2:before{
  content:"";
  position: absolute;
  width: 50%;
  height: 35%;
  max-width: 300px;
  max-height: 50px;
  background-color: #000;
  z-index:1;
  transform:rotate(-3deg);
  box-shadow: 0 15px 10px rgba(0,0,0,.5);

  left:10px;
  bottom:10px;
  transform:rotate(-3deg);
}

效果三

效果三的代码如下

/*===========effect3================*/
.effect3:after{
  content:"";
  position: absolute;
  width: 50%;
  height: 35%;
  max-width: 300px;
  max-height: 50px;
  background-color: #000;
  z-index:1;
  transform:rotate(-3deg);
  box-shadow: 0 15px 10px rgba(0,0,0,.5);

  right:10px;
  bottom:10px;
  transform:rotate(3deg);
}

效果四

效果4类同于效果1，只不过阴影的大小和旋转的角度进行了一些改变，代码如下。

.effect4:before, .effect4:after
{
  z-index: 1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  max-width:300px;
  top:85%;
  box-shadow: 0 35px 20px #777;
  transform: rotate(-8deg);
}
.effect4:after
{
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

效果五

效果五的实现原理、实现过程如下图所示。

效果五代码如下

/*===========effect5================*/
.effect5:before{
    	content:"";
    position:absolute; 
    z-index:1;
    box-shadow:0 0 30px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:150px / 50px;
}

效果六

CSS代码与效果效果5类似，只不过这里显示在水平方向。

/*===========effect6================*/
.effect6:before{
    	content:"";
    position:absolute; 
    z-index:1;
    box-shadow:0 0 30px #000;
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    border-radius:30px / 150px;
}

效果七

这个同样是使用：before伪对象来实现阴影，通过绝对定位、z-index实现定位，通过变换（transform里面的skew）实现变形。

/*===========effect7================*/
.effect7:before{
    content:" ";
    position:absolute;
    bottom:0;
    left:80px;
    z-index:1;
    width: 50%;
    height: 40%;
    max-width: 200px;
    max-height: 80px;
    box-shadow: -80px 0 8px rgba(0, 0, 0, 0.5);
    transform-origin: 0 100%;  
    transform:skew(45deg);
}

效果八

效果八利用：before和：after两个伪对象实现层叠效果，同样是使用z-index和变换（transform），代码如下

/*===========effect8================*/
.effect8{
    border: none;
}
.effect8:before,.effect8:after{
    content: '';
    width: 98%;
    height: 98%;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px rgba(0,0,0,0.3);
}
.effect8:before{
     z-index: 2;
     transform: skew(2deg,1deg) translate(-1px,0px);
}
.effect8:after{
    z-index: 1;
    transform: skew(2deg,1deg) translate(3px,3px);
}

完工，That's all，Thank you.

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------