如何使用纯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) views5847 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • JavaScript事件模型图解

    在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
    event是用户操作网页时发生的交互动作,比如clic...

  • 如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效

    在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
    我们...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • 纹理基础知识和过滤模式详解

    1、 为什么在纹理采样时需要texture filter(纹理过滤)。
    我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...

  • Three.js入门教程1 - 基础知识和创建一个红色球体

    [ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
    Google的工程师Paul在网站aerotwist.com上...

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • HTML网页布局:静态、自适应、流式、响应式

    静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...

  • 使用CSS3实现流星雨动画教程

    很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...