如何使用纯CSS3实现一个3D泡沫

techbrood 发表于 2016-05-06 19:28:14

标签: css3, 3d, bubble

- +

要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。

我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。

我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。

泡沫首先是一个圆形元素
.bubble {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

上面圆角边框半径等于50%,定义了一个圆形元素的样式。

添加3D阴影

泡沫应该是有色彩梯度的,这可以通过线性渐变(linear-gradient)和径向渐变(radial-gradient)属性来实现。

也可以通过框阴影(box-shadow)来实现,本例使用内外box-shadow来实现:

box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),
    /* 淡灰色渐变背景,光源位于左上方 */
    
    inset 0px 0px 5px rgba(0, 0, 0, .5),
    /* 泡沫内部深灰色边界 */
    
    inset 0px 0px 55px rgba(255, 255, 255, .5),
    /* 泡沫内部白色渐变效果 */
    
    inset -3px -3px 5px rgba(0, 0, 0, .5),
    /* 颜色稍深的右下边缘阴影效果 */
    
    0 0 50px rgba(255, 255, 255, .75);
    /* 泡沫周围的白色发光效果,以更好地突显边缘 */

通过添加上面的阴影,圆形元素现在已经有了不错的色彩渐变效果。看起来像是一个3D对象了。

添加光斑效果

在光源照射下,泡沫的局部往往会出现特别亮眼的效果。通过添加光斑可以使得泡沫更加逼真和有趣。

.bubble:before {
    /* 在泡沫的左上角加上白色的亮点,形成光斑效果 */
    
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 25px;
    left: 25px;
    border-radius: 75px 25px;
    box-shadow: inset 10px 10px 50px rgba(255, 255, 255, .6);
}
添加泡沫内壁
.bubble:after {
    /* 使用:after伪元素构造泡沫内壁,形成薄薄的泡沫膜 */
    
    content: "";
    display: block;
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 190px;
    left: 5px;
    top: 5px;
    box-shadow: inset 0px -5px 5px rgba(0, 0, 0, .05);
}

我们使用伪元素:after构造一个半径小5px的内圆,并加上一点近乎透明的暗色阴影。这样就形成若隐若现的泡沫膜壁效果。

自己试试

你可以自己在线试试

possitive(2) negative(0) views4594 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章