CSS的力量:用一個DIV畫圖
這些圖片都是用一個DIV繪製出來的,其實原理並不複雜。
這些圖片都是由CSS繪製出來的,通過background-image疊加實現,
如蘑菇頭的實現,通過 radial-gradient 徑向漸變 , linear-gradient 線性漸變相互疊加實現,如:
div { width: 170px; height: 140px; background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%); border-radius: 140px 140px 80px 80px; }
線上演示:在此
同時有前後遮擋關係的通過:before和:after偽元素的background-image來實現。
PS: 此種手法對並不完全支援舊版IE
原文地址: 點此
相關文章
- 【譯】通過css,用一個div做一個芝士漢堡CSS
- 純CSS畫圖CSS
- 用html+css樣式,畫背景圖HTMLCSS
- 用 CSS 做畫素畫CSS
- 用CSS畫一個帶陰影的三角形CSS
- 如何用 css 畫一個心形CSS
- 用CSS Houdini畫一片星空CSS
- css兩個div在同一行排列CSS
- div+css背景圖片的定位取圖方法CSS
- css 畫圖形大全CSS
- CSS浮動一:divCSS
- 一個好用的畫圖工具 excalidraw
- DIV重疊 CSS讓DIV層疊 兩個DIV或多個DIV順序重疊加CSS
- css 圖片在div中垂直水平居中CSS
- 教你用 css 寫一個擬物化圖示CSS
- css3 box-shadow 利用一個div實現紅綠燈圖案CSSS3
- java繪圖基礎 : 用java程式碼畫一個房子Java繪圖
- javascript動態設定一個div圖層覆蓋住另一個div圖層,並設定成透明JavaScript
- css如何怎樣讓一個div永遠在底部CSS
- 用excel表畫一個樂高Excel
- css3實現一個寬高未知的div的slidedown動畫CSSS3IDE動畫
- 利用html5 canvas 畫圖的一個例子HTMLCanvas
- 推薦一個線上畫圖網站網站
- 一個實用的寶塔線的畫法
- 用 Canvas + WASM 畫一個迷宮CanvasASM
- 用canvas畫一個進度盤Canvas
- 用canvas畫一個七竅板Canvas
- CSS div居中CSS
- 最近解決的幾個DIV+CSS的問題CSS
- CSS 奇思妙想 | Single Div 繪圖技巧CSS繪圖
- 用div css模擬表格對角線CSS
- C 語言畫圖之畫個太極圖
- 用canvas實現一個簡單的畫板Canvas
- flutter 用 CustomPaint 畫一個自定義的 CircleProgressBar (一)FlutterAI
- CSS背景圖片集中在同一個圖片CSS
- 【安卓逆向】一個畫圖AI軟體的會員分析安卓AI
- 一個有意思的CSS圖片hover效果CSS
- CSS div居中效果CSS