如何实现平滑的“box-box—shadoww”动画效果

来源：蜘蛛抓取(WebSpider) 时间：2016-12-13 09:08 标签： box—shadow

一般在页面上的动画效果都是通過CSS里面的animation动画函数来完成的,然而通过一些简单的CSS属性也可以完成部分实用且美观的简易动画,例如：
左边盒子通过伪类hover以及盒子阴影box-box—shadoww的搭配设置,完成了一种简易的动画效果,当鼠标移动到盒子上方时,盒子底部会缓缓浮现一层半透明的阴影,给人一种盒子浮起来了的感觉搭配的玳码很简单:
…若有不足之处请各位多提些建议

我们先看一下将要实现的效果
第┅眼看到这种效果以为是div堆叠出来的,翻开源码发里面主要用的是css的box-box—shadoww 属性的方法

很少有人在box-box—shadoww后面使用多个值,下面的代码便是实现上面效果的关键 

 

 这些阴影作用在一个单独的元素上,因为只做生成阴影用,我们可以利用css的:before来优化代码
 
 

 ①的代码通过before添加的元素给主div一个底边框的效果,
②将阴影下移8px,阴影尺寸收缩3px,第一层立体效果,此时是没有底边框效果的
③给第一层阴影加一个底边框
④⑤的效果是同上,改变的只是阴影的位置
 
 

 最终代码如下,由于box-box—shadoww只支持IE9+,因此IE9+都是可以实现这种效果的

其中box-box—shadoww可以写一个或多个阴影（多个？是多少个我测了下，似乎随便写多少个都可以）如下面代码中我写了八个： 

 

 利用box-box—shadoww和css3动画我们可以实现各种酷炫动画效果。

我要回帖

更多关于 box—shadow 的文章

 

随机推荐