如何使用纯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的内圆,并加上一点近乎透明的暗色阴影。这样就形成若隐若现的泡沫膜壁效果。
自己试试
你可以自己在线试试。
最新评论
- 相关文章
微信公众号在线生成二维码带参数怎么搞?
带参数二维码是微信公众号渠道二维码的一种实现
微信的带参数二维码有两种,一种是临时二维码,一种是永久二维码,但是永久二维码的生成是有个数限制的,微...CentOS6 Apache2.2多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...使用HTML5 FileReader和Canvas压缩用户上传的图片
手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
使用requestAnimationFrame和Canvas给按钮添加绕边动画
要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...
使用CSS3实现流星雨动画教程
很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...