曲面阴影

讲了几次js的东西,换换口味了,讲讲css的东西吧,其实css写好了是非常有意思的,一些css的特效看起来非常炫酷,且流畅度要比js好得多。
一件好的作品,不仅要好用,还要带给用户视觉上以美的享受,许多东西把细微的东西做得好一些,能有非常棒的体验。
说是曲面阴影,其实应该还要加上翘边阴影的,这两个实现方法其实都差不多,都是用css的伪元素来实现的,说到:after和:before,其实css3中许多东西的动画都用到了这两兄弟,应用挺广泛的。

曲面阴影

曲面阴影的原理是将:after和:before定位到主体的一侧,且其z-index为负数,也就是在主体的下方,让后给其添加box-shadow属性即可,不过注意的是:after和:before的宽度一定要小于主体,主要是其两侧的box-shadow不要显示出来就行了,这样主体就只有一侧有阴影显示出来,造成了这一边是曲面的视觉差,看起来颇有立体感。

.box:after,.box:before{
    content: '';
    position: absolute;
    bottom: 0px;
    top: 50%;
    left: 20px;
    right: 20px;
    background: red;
    border-radius: 100px/10px;
    box-shadow: 0 0px 30px rgba(0,0,0,0.8);
    z-index: -10;
    transition: all 1s; 
}

翘边阴影

翘边阴影主要是将主体的四个边加上阴影,让主体看起来四边都是翘起来的一样,我们先将:after和:before的高度和宽度设置为主体的90%左右(根据具体情况细微调整),然后将其用css3的transform: skew 将其倾斜,rotate将其选择,其实就是把它变成平行四边形然后旋转角度,让主体完全覆盖住这个四边形就行了。

.imgbox:after,.imgbox:before{
    content:'';
    position:absolute;
        z-index:-1; 
    background:transparent;
    width:88%;
    height:90%;
    right:20px;
    bottom:15px;
        transition: all 1s;
}
.imgbox:after{
    transform:skew(-12deg) rotate(-5deg); 
    box-shadow:20px 20px 20px rgba(0,0,0,0.8);
}
.imgbox:before{
    transform:skew(12deg) rotate(5deg); 
    box-shadow:-20px 20px 20px rgba(0,0,0,0.8);
}

效果展示:

本文示例:链接
本文代码地址:链接

您也可能喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注