CSS3图片阴影效果解析

梦里梦外; 2022-08-26 11:29 268阅读 0赞

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

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

![SouthEast][]

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

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

2.绝对定位和z-index

3.css3 transform（变换）

4.css3 shadow（阴影）

### 效果一 ###

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

![SouthEast 1][]

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

我们给盒子加两个类，.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);
    }

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

![SouthEast 2][]

具体的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);
    }

### 效果二 ###

![SouthEast 3][]

效果二的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);
    }

### 效果三 ###

![SouthEast 4][]

效果三的代码如下

/*===========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);
    }

### 效果四 ###

![SouthEast 5][]

效果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;
    }

### 效果五 ###

![SouthEast 6][]

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

![SouthEast 7][]

效果五代码如下

/*===========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;
    }

### 效果六 ###

![SouthEast 8][]

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;
    }

### 效果七 ###

![SouthEast 9][]

这个同样是使用：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);
    }

### 效果八 ###

![8.jpg][]

效果八利用：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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/anjAE
[Link 2]: http://codepen.io/whqet/share/zip/anjAE/
[SouthEast]: /images/20220824/36ad544edf634f95ad9732bc728ca3fd.png
[SouthEast 1]: /images/20220824/35a448eeb10241a78ee92f80511eab53.png
[SouthEast 2]: /images/20220824/1bcc35cb7f1843b6a4335c40ba50912c.png
[SouthEast 3]: /images/20220824/6980a15a36694480ab333e0eedcdfcad.png
[SouthEast 4]: /images/20220824/10af840b6db44c23bc2ab05c076039e2.png
[SouthEast 5]: /images/20220824/fa1bab74544f4d918e428fd6d3326ea0.png
[SouthEast 6]: /images/20220824/35d6afac6e30487f81ccb4bff83abb23.png
[SouthEast 7]: /images/20220824/fd852a5c79e44b01922e769555779b12.png
[SouthEast 8]: /images/20220824/b9afb2ea9ad748dda6d738efb1f4c97d.png
[SouthEast 9]: /images/20220824/98acdc853d76455fb4113689805076ac.png
[8.jpg]: http://skx.zjipc.cn/blog/blog_20140409/8.jpg
[whqet]: http://blog.csdn.net/whqet