如何使用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
如何使用CSS3实现一个3D泡沫图形相关推荐
- 使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换即可实现更好的展示效果,简洁而实用. 书本的3D模 ...
- CSS3做一个3D展示相册
先来康康效果 (录不好,就只能是图片了) 原作者是油管上的Online Tutorials 现在就来实现它 1.准备知识 transform-style: preserve-3d;对3D变换有空间概念 ...
- css3实现一个3d楼梯动画
背景
- java3D实现空间立方体,纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- 用JavaScript写一个3D图形
可以使用 JavaScript 来创建 3D 图形.有许多方法可以实现这一目标,其中一种方法是使用 WebGL. WebGL(Web Graphics Library)是一种浏览器中的 3D 绘图技术 ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- CSS3 做一个旋转的立体3D正方形 动效核心【前端就业课 第二阶段】CSS 零基础到实战(07)
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 一.transform-origin transform-o ...
- 计算器算贝塞尔公式_【3D与图形计算器的相遇】论一个3d画图软件的在计算器上的诞生...
论我要在HP39GS计算器上弄3D图像程序的动机:无聊. 在一个无聊的下午,我在刷视频的时候偶然看见了有关讲述透视投影的原理.我看了看公式,又看了看我的计算器,我一个大胆的念头油然而生:我是不是可以在 ...
- CSS3中的3D变换与简易立方体的制作
大家好,这里是demo软件园,今天为大家分享的是css3中的3d变换. 我们首先要知道在浏览器中,X轴是从左到右,Y轴是从上到下,Z轴是从里到外.CSS的3d变换中,有以下属性: A.3D旋转: CS ...
最新文章
- .net获取ip地址
- 企业联合体的形式_鼓掌!费县新增6家市级农业产业化联合体
- 黑马lavarel教程---9、缓存操作
- http访问不到服务器_HTTP及会话技术解析:大魏Java记4
- SQL中PIVOT 行列转换
- ObjC学习7-C语言特性
- python框架优化方法_Python 遗传算法框架 GAFT 优化小记
- JACK——PaintRobot Exercise6
- samba配置问题一则及配置详解
- 淘宝客APP源码导购APP源码代理淘客APP源码
- 单片机1到十五c语言,手把手教你学单片机的C语言程序设计(十五).pdf
- 2022-2028年中国电子政务行业投资策略探讨及市场规模预测报告
- 计算机word2003界面,Word2003工作界面简介
- 解决无法删除文件夹的情况:文件夹正在使用,操作无法完成,因为其中的文件,或文件夹已在另一个程序中打开...
- 迅雷软件一直出现崩溃问题的常见解决方法
- 基于STM32的无损压缩算法miniLZO移植,压缩率很高,20KB随机数压缩到638字节,耗时275us
- 堆内存和栈内存的区别(通俗版)
- 解析两周期货投机过程中的心理端倪
- CDMA与OFDMA的比较
- 无人机在抢险救灾的优化运用---2017年中国研究生数学建模竞赛A题 (试题+优秀论文)