2. 程式人生 > >如何使用CSS3實現一個3D泡沫圖形

如何使用CSS3實現一個3D泡沫圖形

阿新 • • 發佈：2019-02-11

要實現一個逼真的泡沫，涉及到比較複雜的光學/物理學知識。

我們這裡先簡化下問題，實現一個相對簡單而足夠實用的泡沫元素。

我們可以把基礎的泡沫元素應用在很多場景中，比如水景、泡咖啡、啤酒甚至火焰特效中。

泡沫首先是一個圓形元素
12345.bubble {width: 200px;height: 200px;border-radius: 50%;}

上面圓角邊框半徑等於50%，定義了一個圓形元素的樣式。

新增3D陰影

泡沫應該是有色彩梯度的，這可以通過線性漸變（linear-gradient）和徑向漸變（radial-gradient）屬性來實現。

也可以通過框陰影（box-shadow）來實現，本例使用內外box-shadow來實現：

1234567891011121314box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),/* 淡灰色漸變背景，光源位於左上方 */inset 0px 0px 5px rgba(0, 0, 0, .5

相關推薦

如何使用CSS3實現一個3D泡沫圖形

要實現一個逼真的泡沫，涉及到比較複雜的光學/物理學知識。我們這裡先簡化下問題，實現一個相對簡單而足夠實用的泡沫元素。我們可以把基礎的泡沫元素應用在很多場景中，比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一個圓形元素12345.bubble {width: 200px;he

使用純CSS3實現一個3D旋轉的書本

tom data -m 過去 截取 ood post clas kit 有一些前沿的電商站點已經開始使用3D模型來展示商品並支持在線定制，而當中圖書的展示是最為簡單的一種，無需復雜的建模過程，使用圖片和CSS3的一些變換就可

純CSS3實現一個旋轉的3D立方體盒子

簡介 上網易前端微專業課程，裡面有一個課外作業是實現一個3D旋轉立方體，花了點時間做了下，還有點意思，寫個簡單教程，供大家學習。 先放上最終要實現的效果 注：程式碼在chrome 43.0.2357.124 m正常，其他瀏覽器未測試 步驟 1.

css3實現圖片3d翻轉效果

@charset: "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } ul, ol { list-style: none; } img { border: none; } body {

CSS3實現文字3D效果

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="sty

DirectX11--實現一個3D魔方(2)

前言 上一章我們主要講述了魔方的構造和初始化、紋理的準備工作。目前我還沒有打算講Direct3D 11關於底層繪圖的實現，因此接下來這一章的重點是魔方的旋轉。因為我們要的是能玩的魔方遊戲，而不是一個觀賞品。所以對旋轉這一步的處理就顯得尤其重要、精細，甚至可以展開很大的篇幅來講述。現在光是為了實現旋轉的這個動

DirectX11--實現一個3D魔方(3)

前言 (2019/1/9 09:23)上一章我們主要講述了魔方的旋轉，這個旋轉真是有毒啊，搞完這個部分搭鍵鼠操作不到半天應該就可以搭完了吧... (2019/1/9 21:25)啊，真香 有人發這張圖片問我寫魔方的目的是不是這個。。。噗 現在光是鍵鼠相關的程式碼也搭了400行左右。。其中鍵盤相關的呼

jQuery——實現一個3D動態輪播圖

先看效果圖(挺好看的小妹妹，製作完gif圖就這麼醜了)：css程式碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

在沒有圖片的情況下用css3實現一個圓形

        最近研究學習css3發現它的確用很大的用途，以前圓形大部分都是用圖片來實現的，今天用css3實現了一個圓形， html程式碼如下：             <div>藍楓 </div> css程式碼如下：         *

如何使用純CSS3實現一個沙漏動畫

要實現一個沙漏動畫，我們首先需要實現一個漏斗的幾何形狀。漏斗圖形我們接著把漏斗拆分成3個簡單圖形：一個三角形，一個倒置三角形和中間的管道（垂直線）。那麼問題就簡化為實現三角形和直線。要實現三角形很簡單，有模式可套用。即使用零寬高的元素，設定1條邊帶顏色，相交的2條邊為透明。這

css3中的3d屬性實現一個星空效果

在css3新增屬性的學習中，有關3d的知識，下面是利用transform屬性的3d效果做的一個星空中星球圍繞太陽旋轉，實現了自轉和公轉效果；話不多說，直接code： HTML： <!DOCTYPE html> <html> <head>

css3 實現鼠標放到一個div上顯示出另一個隱藏的div

webkit body charset font ans round size posit test <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u

CSS3實現軸心為x軸的3D數字圓環

str 頁面 rotate 屬性設置 pad box strong splay block 當做混合開發時，總有各種意想不到的酷炫效果的需求等著你。不過這個還好，先備著方便以後用。 先上效果圖： 總結一下：此效果的完成基於以下幾個關鍵點： 1.DOM結構，為每個D

CSS3中的3D動畫實現(鐘擺、魔方)--實現代碼

等待 比例 需要 時間 span bottom translate abs ase CSS3中的3D動畫實現(鐘擺、魔方) CSS3的2D變形----傳統的transform變形效果 transform ： translate、scale、rotate、skew… tran

Java 圖形化實現一個驗證電話號碼是否合法的程式

package com.wxj; import java.awt.EventQueue; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton;

css3實現3d焦點圖

css3實現3d焦點圖 在之前寫的焦點圖的基礎上新增3d效果 要點：1、perspective新增透視效果 2、計算滑鼠位置 <div class="border-3d-wrap"> <div class="wrap" onclick=

WebGIS簡單實現一個區域炫酷的3D立體地圖效果

1.別人的效果         作為一個GIS專業的，做一個高大上的GIS系統一直是我的夢想，雖然至今為止還沒有做出一個理想中的系統，但是偶爾看看別人做的，學習下別人的技術還是很有必要的。眼睛是最容易誤導我們的，有時候看著炫酷的效果，可能只是因為一點視覺誤差，本文用一個別人的系統介面來解析如何實現一個小區域

CSS3實現3d、過渡、變化案例

一開始盒子狀態：  過渡過程： 最終形式： 大盒子旋轉180deg，小盒子跟著大盒子旋轉然後展開。 程式碼實現  body模組： <body> <div class="stage"> <div clas

CSS3實現3D透明立體盒子

想要利用CSS3實現透明3D立體盒子 就要清楚立方體是由六個面組成，分上下左右和前後，考慮這些可以幫助我們更好的融入CSS3的程式碼 因此我設定了6個div，作為立方體的6個面 因為定位的原因，一開始所有的盒子都是面對著螢幕這面的，因此要賦予每個面不一樣的值，即不一樣的

手把手教你實現一個視覺化爬蟲監控系統，酷炫的圖形化介面

1. 前言 本文並不是講解爬蟲的相關技術實現的，而是從實用性的角度，將抓取並存入 MongoDB 的資料 用 InfluxDB 進行處理，而後又通過 Grafana 將爬蟲抓取資料情況通過酷炫的圖形化介面展示出來。 在開始之前，先對 Grafana 和 InfluxDB 做一下簡要的介紹：