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前端开发技术，分享网页相关资源。
---------------------------------------------------------------

CSS3图片阴影效果解析相关推荐

20个超棒的CSS3图片切换灯箱效果教程推荐
CSS3中增加了诸多新的特性,借助这些特性,可以实现不可思议的效果.本文带来20个教程,教你如何使用CSS3创建引人注目的图片切换效果和灯箱效果. 点击小标题可以直接看效果 1. 创建带3D灯箱动画 ...
图片阴影效果怎么设置html,css如何给图片加阴影？
css可以实现很多的图片效果,图片阴影效果就是其中之一,那么css如何给图片添加阴影效果?本篇文章就给大家介绍如何使用css给图片添加阴影,希望对你们有所助. 方法1:设置box-shadow属性通 ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
3_HEIF/heic格式图片文件解析（20190107）
3_HEIF/heic格式图片文件解析(20190107) HEIF/heic格式图片文件解析(20190107) 文章目录参考: https://zhuanlan.zhihu.com/p/3466 ...
分享8款简单大气的jQuery/CSS3图片特效
自从jQuery问世以后,网页上就流行很多漂亮的图片效果,像淡入淡出或者焦点图等,但是,现在jQuery结合CSS3,我们可以打造更美观更实用的图片特效.下面分享8款简单而又大气的jQuery/CSS ...
css3 图片放大缩小闪烁效果
直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
.png图片阴影效果（fliter:drop-shadow属性）案例
png图片阴影效果(fliter:drop-shadow属性)案例效果截图 · 示下: 重要代码如下: <img src="qiye.png" class="s ...

CSS3图片阴影效果解析

效果一

效果二

效果三

效果四

效果五

效果六

效果七

效果八

CSS3图片阴影效果解析相关推荐

最新文章

热门文章