要實現一個逼真的泡沫,涉及到比較複雜的光學/物理學知識。
我們這裏先簡化下問題,實現一個相對簡單而足夠實用的泡沫元素。
我們可以把基礎的泡沫元素應用在很多場景中,比如水景、泡咖啡、啤酒甚至火焰特效中。
泡沫首先是一個圓形元素
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