CSS3實現圖形曲線陰形和翹邊陰影

首先，來看看完成以後的效果圖：

實現原理

①曲線陰影實現：

多個陰影重疊，就是正常陰影+曲線陰影

正常狀況下，有個矩形有正常的陰影，做爲主投影，這時候再定義一個有必定弧度圓角的圓角矩形，而後放在正常矩形的下面，並露出一點點底部有弧度的陰影，這樣的話就能夠造成曲線投影的效果。例以下面這個樣子：

主要代碼：

html部分：

<div class="effect">

</div>

css部分：

/*曲線陰影*/

.effect{

position: relative;

width:500px;

height:200px;

margin: 0 auto;

 

box-shadow:0 1px 10px rgba(0,120,215,0.7);

-webkit-box-shadow:0 1px 10px rgba(0,120,215,0.7);

-moz-box-shadow:0 1px 10px rgba(0,120,215,0.7);

-o-box-shadow:0 1px 10px rgba(0,120,215,0.7);

}

/*巧用:after和:before，加上絕對定位的特色，造成一個圓角矩形*/

.effect:after,.effect:before{

position: absolute;

content: "";

z-index:-1;

top:50%;

bottom:0;

left:10px;

right:10px;

box-shadow:0 0 20px rgba(0,120,215,0.9);

-webkit-box-shadow:0 0 20px rgba(0,120,215,0.9);

-moz-box-shadow:0 0 20px rgba(0,120,215,0.9);

-o-box-shadow:0 0 20px rgba(0,120,215,0.9);

border-radius: 100px/10px;

-webkit-border-radius: 100px/10px;

-moz-border-radius: 100px/10px;

-o-border-radius: 100px/10px;

/*border-radius：100px/10px,表示的是，水平方向的半徑是100px，垂直方向是10px。*/

}

②翹邊陰影

原理：利用:before和:after，加上絕對定位的性質，能夠造成一個矩形，這個時候結合CSS3的傾斜屬性skew和旋轉屬性rote。就能夠造成一個有旋轉角度的平行四邊形，這個時候再和原來的矩形重疊，則可產生翹邊效果。

原理圖：

主要代碼：

html部分：

<ul class="wrap">

<li><img src="img/12.jpg"></li>

<li><img src="img/21.jpg"></li>

</ul>

css部分：

/*翹邊陰影*/

.wrap li{

position: relative;

width:350px;

height:250px;

padding:10px;

background: #fff;

border:solid 1px #ccc;

box-shadow: 0 0 15px rgba(0,0,0,0.2);

-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);

-moz-box-shadow: 0 0 15px rgba(0,0,0,0.2);

-o-box-shadow: 0 0 15px rgba(0,0,0,0.2);

}

.wrap li img{

width:350px;

height:250px;

}

.wrap li:before{

position: absolute;

content: "";

z-index: -2;

width:325px;

height:220px;

left:22px;

bottom:13px;

background: transparent;

box-shadow: 0 5px 30px rgba(0,0,0,1);

-webkit-box-shadow: 0 5px 30px rgba(0,0,0,1);

-moz-box-shadow: 0 5px 30px rgba(0,0,0,1);

-o-box-shadow: 0 5px 30px rgba(0,0,0,1);

transform:skew(-15deg) rotate(-5deg);

-webkit-transform:skew(-15deg) rotate(-5deg);

-moz-transform:skew(-15deg) rotate(-5deg);

-o-transform:skew(-15deg) rotate(-5deg);

}

.wrap li:after{

position: absolute;

content: "";

z-index: -2;

width:325px;

height:220px;

left:22px;

bottom:13px;

-webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-moz-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-o-box-shadow: 0 5px 30px rgba(0,0,0,0.9);

box-shadow: 0 5px 30px rgba(0,0,0,0.9);

-moz-transform:skew(15deg) rotate(5deg);

-o-transform:skew(15deg) rotate(5deg);

-webkit-transform:skew(15deg) rotate(5deg);

transform:skew(15deg) rotate(5deg);

}

完整代碼已分享到：

http://git.oschina.net/LuckyWinty/CSS3Shadow

 

更多CSS3實現的動畫效果demo，參考http://git.oschina.net/LuckyWinty/CSS3demo/tree/master/

 

歡迎關注個人我的微信訂閱號：前端生活

轉載請註明出處！