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

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

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

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

泡沫首先是一个圆形元素

1 2 3 4 5

.bubble {      width :  200px ;      height :  200px ;      border-radius:  50% ; }

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

添加3D阴影

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

也可以通过框阴影（box-shadow）来实现，本例使用内外box-shadow来实现：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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对象了。

添加光斑效果

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

1 2 3 4 5 6 7 8 9 10 11 12 13

.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 ); }

添加泡沫内壁

1 2 3 4 5 6 7 8 9 10 11 12 13

.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的内圆，并加上一点近乎透明的暗色阴影。这样就形成若隐若现的泡沫膜壁效果。

自己试试

你可以自己在线试试。

原文来自TECHBROOD.COM。

by iefreer