新学校网站建设成果,制作一个简单网站,做兼职网上哪个网站,辽阳专业网站建设品牌首先#xff0c;来看看完成之后的效果图#xff1a; 实现原理 ①曲线阴影实现#xff1a; 多个阴影重叠#xff0c;就是正常阴影曲线阴影 正常情况下#xff0c;有个矩形有正常的阴影#xff0c;作为主投影#xff0c;这时候再定义一个有一定弧度圆角的圆角矩形#xf… 首先来看看完成之后的效果图 实现原理 ①曲线阴影实现 多个阴影重叠就是正常阴影曲线阴影 正常情况下有个矩形有正常的阴影作为主投影这时候再定义一个有一定弧度圆角的圆角矩形然后放在正常矩形的下面并露出一点点底部有弧度的阴影这样的话就可以形成曲线投影的效果。例如下面这个样子 主要代码 html部分 div classeffect /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-radius100px/10px,表示的是水平方向的半径是100px垂直方向是10px。*/ } ②翘边阴影 原理利用:before和:after加上绝对定位的性质可以形成一个矩形这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形这个时候再和原来的矩形重叠则可产生翘边效果。 原理图 主要代码 html部分 ul classwrap liimg srcimg/12.jpg/li liimg srcimg/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/ 欢迎关注我的个人微信订阅号前端生活 转载请注明出处 转载于:https://www.cnblogs.com/LuckyWinty/p/5270030.html
