CSS3圖片陰影製作效果解析

利用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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------