如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。
我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。
我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。
泡沫首先是一个圆形元素
.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的内圆,并加上一点近乎透明的暗色阴影。这样就形成若隐若现的泡沫膜壁效果。
自己试试
你可以自己在线试试。


最新评论
- 相关文章
3D感知和建模关键硬件技术:双目、3D结构光和TOF
无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
2019年NodeJS框架Koa和Express选型比较
Koa和Express都是NodeJS的主流应用开发框架。
Express是一个完整的nodejs应用框架。Koa是由Express团队开发的,但是它有不同的关注点。Koa致力于核心中间件...OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
HTML5 And Canvas 2D Specs Are Now Feature Complete, First HTML 5.1 Working Draft Published
We’ve been writing about HTML5 for quite a while, but, until today, the actual HTML5 specs and standards were still moving targets. Now, however, the...
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
函数式JavaScript编程基础概念:Curry和Partial Application
本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...
NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
HTML5、Hybrid APP、Native APP对比和技术选型
HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...
如何使用WebGL创建一个逼真的下雨动画
之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
Three.js 开发基础知识 - 绘制3D对象
Three.js是一个用来简化WebGL开发的JavaScript库,比如绘制一个三维立方体,使用WebGL需要100多行,那Three.js只要10几行就能够完成。本文通过创建一个立方体来...
更多...