用最短的CSS樣式，勾勒大數據演示屏

先看案例效果，再看心得與總結

前段時間擼了一個演示平臺，輸入任一手機號，可追蹤其行跡，相似《人民的名義》追蹤丁義珍的效果，很明顯涉密了，所以特地克隆了一個，並把後端閹割了，目前查詢號碼寫死爲個人號碼，數據替換爲靜態的：

演示地址(閹割後端)

本文github地址,持續更新......

效果預覽

↓↓↓ 動畫效果總覽：GIF 加載須要稍等一下 ↓↓↓

經常使用效果的實現（最精簡的代碼）

再漂亮的設計，也能夠拆解成基礎效果的組合，在這裏，我把一些經常使用的效果進行了羅列，並附加代碼

優雅的呈現

蒙版文字

覆蓋一層蒙版，並在蒙版上書寫文字。須要2層，從低到上爲圖片層、蒙版層(上面可寫字)

<div class='box' >
	<div class='back'></div> <!--正文層-->
	<div class='modal'></div> <!--模板層-->
</div>
<style> .box{ position: relative; height: 200px; width: 300px } .back{ background-image: url(http://www.imaoda.com/s/img/github/21.jpg); height: 100%; width: 100%; } .modal, .desc{ position:absolute; height: 20%; width: 100%; bottom: 0; color: white } .modal{ background: rgba(0,0,0,.5) } </style>
複製代碼

毛玻璃蒙版

毛玻璃蒙版，本質上講是兩層圖，底層圖清晰完整，頂層圖模糊殘缺，而且二者位移徹底一致，所以疊加到一塊兒後像是一張圖。爲了確保位移一致，咱們用了 background : fixed ，他能使背景圖片相對於瀏覽器進行固定。

<div class='box'>
	<div class='blur-modal'></div>
	<div class='black-modal'> 描述文字 </div>
</div>
<style> .box{ position: relative; height:200px; width:300px; background: fixed url(http://www.imaoda.com/s/img/github/21.jpg); } .blur-modal{ position: absolute; height:50px; width:300px; top: 150px; background: fixed url(http://www.imaoda.com/s/img/github/21.jpg); filter:blur(1rem) } .black-modal{ position: absolute; height:50px; width:300px; top: 150px; background: rgba(0,0,0,.2); color: white } </style>
複製代碼

高斯模糊背景圖

電影介紹的時候，其背景色跟海報差很少，其實就是放大了海報的一個角落 + 高斯模糊 + 黑色半透明蒙版的效果

<div class='suit' >
	<div class='figure'></div>
	<div class='modal'>
		功夫熊貓
	</div>
</div>
<style> .suit{ position: relative } .figure{ background: url(http://www.imaoda.com/s/img/github/21.jpg); background-size: 200%; height: 200px; width: 400px; filter: blur(16px) } .modal{ position: absolute; height: 200px; width: 400px; top: 0px; left: 0px; background: rgba(0,0,0,.5); color: white; text-align: center } </style>
複製代碼

filter 的還有一個特效是能讓圖像在邊緣地帶跟背景很天然的過渡到一塊去

圖片邊框

過去作背景邊框，div嵌套，外層的背景用圖片，內層略小居中，但這種方法須要精準度量。更方便的方法是使用 border-image

<div class='back'><br> 運行狀態監控 </div>
<style> body{ background: #003366; } .back{ height: 180px;width: 400px; background: url(http://www.imaoda.com/s/img/tpl/content-frame1.png) no-repeat; background-size: contain; background-position: center; color: white; text-align: center; } </style>
複製代碼

科技感內發光邊框

邊框內發光能夠帶來一種 將來科技感（配上動畫效果更棒）

<div class='box'>
	數據總覽
</div>
<style> body{ background: black;padding: 10px } .box{ height: 20rem; width: 40rem; color:white; padding: 1rem; box-shadow: 0 0 3rem rgba(100,200,255,.5) inset; background: rgba(0,0,0,.3); } </style>
複製代碼

科技感圖片邊框

選用圖片邊框，能夠實現更多效果，固然代價就是須要先在PS裏設計一下

border-image 的 5% 決定了邊框的厚度

<div class='panel'>正常</div>
<br><br><br>
<div class='panel'>外發光</div>
<style> .panel{ height: 10rem; width: 20rem; color:rgba(255,255,255,.9); border: 20px solid transparent; border-image: url(http://www.imaoda.com/s/img/tpl/border.png) 5%; background:rgba(0,0,0,.3); } .panel:last-child{ box-shadow: 0 0 5rem rgb(0,110,150) } </style>
複製代碼

科技感圖片邊框2

這個有點像是遊戲中的邊框，效果偏重一些

<style> body{ background: rgb(22,22,22); padding:10rem } .box{ height: 10rem; width: 30rem; border: 1.5rem solid transparent; border-image: url(http://www.imaoda.com/s/img/tpl/border1.png) 15% 5%; } </style>
複製代碼

半透明面板

科幻片裏的將來科技，都是半透明的

主要利用透明度的漸變，少許的內發光可增長立體感

<div class='panel'>實時監控數據</div>
<style> .body{ background: url(http://www.imaoda.com/s/img/tpl/sky1.jpg); padding: 10rem } .panel{ height: 12rem; width: 24rem; color:rgba(60,240,250,1); font-size: 1.5rem; padding:1rem; border-radius: .5rem; border: 1px solid rgba(0,180,220,0.5); background: linear-gradient(180deg,rgba(0,180,220,0.3),rgba(0,180,220,0.1),rgba(0,180,220,0.1),rgba(0,180,220,0.3)); box-shadow: 0 0 2rem rgba(0,180,220,.1) inset } </style>
複製代碼

立體感面板-帶標題欄

• 面板頭採用上深下淺過渡，面板採用半透明黑
• 側滑彈出動畫效果更佳

<div class='panel'>
	<div class='panel-head'>用戶行爲分析</div>
	<div class='panel-body'></div>
</div>
<style> .panel{ display: flex; flex-flow: column nowrap; height: 23rem; width: 40rem; box-shadow: 0 0 1rem rgba(0,0,0,.5); } .panel-head{ flex: 0 0 3rem; font-size: 1.5rem; color: rgba(255,255,255,.7); line-height: 3rem; text-align: center; background: linear-gradient(rgb(0,20,30), rgb(0,40,70)); border: 2px solid rgba(0,90,120,.3); } .panel-body{ flex: 1 0 auto; background: rgba(0,0,0,.3); border: 2px solid rgba(0,90,120,.4); border-top:none } .panel:hover{ filter:brightness(1.2) } </style>
複製代碼

角標面板

• 角標與邊框同色
• 缺角矩形利用了 linear-gradient 透明效果

<div class='panel' data-corner='New'></div>
<style> body{ padding: 10rem;background: rgba(0,0,0,.9) } .panel{ height: 12rem; width: 24rem; border: 1px solid rgba(22,78,137,1); background: rgba(13,35,61,1); position: relative; } .panel::after{ content: attr(data-corner); display: block; position: absolute; top: 0; right: 0; width: 5rem; padding: 0 1rem; overflow: hidden; text-align: right; color: rgba(255,255,255,.9); background: linear-gradient(45deg,transparent 0% , transparent 30%, rgba(22,78,137,1) 30%, rgba(22,78,137,1) 100%) } </style>
複製代碼

弧面屏卡牌

用到內陰影凸顯卡牌的立體感和邊框感

<div class='box'>
	<div class='card'></div>
</div>
<style> .box{ height: 406px; width: 206px; background: linear-gradient(180deg,#116448,#116448); overflow: hidden; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 0 1px black } .card{ height: 400px; width: 200px; margin: 2px; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 0 15px black inset; background: #009966; } </style>
</style>
複製代碼

動態旋轉邊框

• 圖中兩個外圍的圓環採用 absolute 定位，background-position:center 居中，background-size 調整大小，並添加 animation 使其動起來
• 任務圖像靠外層的 flex 佈局實現居中

<div class='box'>
    <div class='ring-outer'></div>
    <div class='ring-inner'></div>
    <div class='avatar'></div>
</div>
<style> .box{ position: relative; width: 220px; height: 220px; display: flex; justify-content: center; align-items: center } .ring-inner{ height: 220px; width: 220px; position: absolute; background: url(http://www.imaoda.com/s/img/tpl/ring-inner.png) no-repeat; background-size: 90%; background-position: center; animation: clockwise 3s linear infinite; } .ring-outer{ height: 220px; width: 220px; position: absolute; background: url(http://www.imaoda.com/s/img/tpl/ring-outer.png) no-repeat; background-size: 100%; background-position: center; animation: anti-clockwise 3s linear infinite; } .avatar{ height: 160px; width: 160px; background: url(http://www.imaoda.com/s/img/lessons/92.jpg); background-size: cover; border-radius: 50% } @keyframes clockwise{ 100%{ transform: rotate(360deg) } } @keyframes anti-clockwise{ 0%{ transform: rotate(360deg) } } </style>
複製代碼

元素背景（框）

• 承載背景的外層，其長寬比和圖近似
• 背景圖片採用 background-position: center; background-size: contain; 實現自適應大小居中
• 內層用來承載內容，略小於外框，經過外框的flex實現居中
• 要讓文字清晰於各類背景：白色文字帶黑色發光，黑色文字帶白色發光

<ul>
	<li> <div class='content'> 第一名 </div> </li>
	<li> <div class='content'> 第二名 </div> </li>
	<li> <div class='content'> 第三名 </div> </li>
</ul>
<style> body{ background: linear-gradient(0deg,#006666,#003333) } ul{ margin: 20px 10px; display: flex } li{ list-style: none; margin: 10px; height: 150px; width: 200px; background: url(http://www.imaoda.com/s/img/github/31.png) no-repeat; background-position: center; background-size: 100%; color: white; text-shadow: 0 0 2px #222222; display: flex; justify-content: center; align-items: center } .content{ height: 80px; width: 120px; } </style>
複製代碼

漸變色邊框

雖然用到了border-image,可是實際傳遞的只是linear-gradient

.box{
	height: 400px; width: 400px;
	border: 30px solid transparent;
	border-image: linear-gradient(45deg,red,blue) 10%
}
複製代碼

上述方法沒法實現 border-radius，可採用雙層 div 的方式，底層漸變層，上層內容層。缺點是大小須要精確度量。

<div class='border'>
	<div class='content'></div>
</div>
<style> .border{ width: 300px; height: 600px; border-radius: 20px; background: linear-gradient(45deg,red,blue); overflow: hidden } .content{ width: 260px; height: 560px; background: white; margin: 20px; } </style>
複製代碼

水晶導航側欄

這裏主要作了一套左側的nav，涉及如下要點：

• 白色文字帶黑陰影，可避免背景過白顯示不清
• ul 統一帶右側 border （比按鈕最暗色rgb+10） 和右側 1px #222222 深灰色陰影
• li採用下暗上亮的方式；hover後採用更亮的左暗右亮
• 字體採用darkgray，hover後採用白色，帶上陰影
• hover 後也可採用 brightness 方案
• li 的過渡是爲了顯示出3d效果，所以過渡爲[暗，暗，亮]
• li:hover爲了凸顯，過渡效果爲[暗，亮，亮]

<style> body{ background: rgb(14,28,44) } ul { text-align: center; width: 6rem; color: darkgray; border-right:1px solid rgb(41,51,3); box-shadow: 1px 0 0px #222222 ; } li { list-style: none; font-size: 2rem; border-top:1px solid rgb(91,101,123); background: linear-gradient(180deg,rgb(51,61,83),rgb(31,41,63),rgb(31,41,63)); } li:hover{ background: linear-gradient(90deg,rgb(34,54,86),rgb(36,171,232) ,rgb(36,171,232)); color: white; text-shadow: 1px 1px 1px black } </style>
複製代碼

hover浮出導航側欄

內發光能給人凸起的感受，菜單高亮時也可採用該效果，不過，只要上下兩側發光（用漸變背景實現）

漸變採用180，亮暗暗亮，其中亮的部分三通道亮度加20便可

<style> li{ height: 3rem; width:10rem; line-height: 3rem; color: rgba(255,255,255,.8); cursor: pointer; list-style: none; padding-left: 1rem; background: rgb(8,21,37); border-bottom: 3px solid rgba(0,0,0,.5); transition: margin-left .5s; } li:last-child{ border: none } li:hover{ background: linear-gradient(180deg,rgb(28,41,57),rgb(8,21,37),rgb(8,21,37),rgb(28,41,57)); margin-left: 2rem; } </style>
複製代碼

立體按鈕按壓效果

按壓前，按鈕浮起，有陰影；按壓後，按鈕下去，陰影消失，體積縮小（離視野更遠）

.box{
	height: 100px; width: 300px; background: green; margin: 2rem;
	box-shadow: 0 0 1rem gray;
	cursor: pointer;
	transition: all .3s;
	border-radius: 50px;
}
.box:active{
	box-shadow: 0 0 0px gray; transform: scale(0.99)
}
複製代碼

金屬質感過渡

45度角，兩側深，中間淺

.box{
	height: 3rem; width: 5rem;
	border-radius: 1rem;
	background: linear-gradient(45deg, rgb(31,89,146),rgb(35,175,230),rgb(29,136,203) )
}
複製代碼

因此須要仔細斟酌按鈕過渡，按鈕按下時，可將外陰影改成內陰影，同時scale(0.95)。加上.1s的過渡，效果更佳

<style> .box{ height: 3rem; width: 3rem; line-height: 2.8rem; text-align: center; color: white; text-shadow: 1px 1px 5px black; font-weight: bold; font-size: 2rem; border-radius: .5rem; background: linear-gradient(225deg, rgb(31,89,146),rgb(31,89,146) 10% ,rgb(35,175,230) 60%,rgb(35,175,230) 70%,rgb(29,136,203) ); box-shadow: 0 0 5px black } .box:hover{ box-shadow: 0 0 5px gray inset; transform: scale(.95) } </style>
複製代碼

質感進度條

進度條要中間亮，兩邊暗，顯得圓鼓鼓的，進度條容器要有內陰影，顯示出凹進去的感受

<div class='box'>
	<div class='progress'></div>
</div>
<style> .box{ height: 2rem; width: 30rem; box-shadow: 0 0 5px white inset; border: 1px solid black; background:#003366 } .progress{ width: 1rem; height: 2rem; background: linear-gradient(180deg, #00CCCC,#00CCCC,#009999); transition: all 3s; box-shadow: 0 0px 5px white } .box:hover .progress{ width: 30rem } </style>
複製代碼

黃金色驚喜字體

.box{
	color: rgb(253,219,94); font-size: 3rem; 
	text-shadow: 1px 2px 2px black
}
複製代碼

分界線

有時候咱們的邊框，只須要一根分界線，並且顏色不能太顯眼。

• 能夠直接利用一側的 border
• 邊框顏色爲黑色，可是透明度只有 0.2 （以便溶於底色中）

<ul>
	<li> 第一名 </li>
	<li> 第二名 </li>
	<li> 第三名 </li>
</ul>
<style> body{ background: linear-gradient(0deg,#006666,#003333) } ul{ margin: 20px 10px; display: flex } li{ list-style: none; width: 100px; line-height: 40px; color: white; text-align: center; border-right: 2px solid rgba(255,255,255,.2); } </style>
複製代碼

列表前置短豎線

• 用僞類 before 爲 title 添加一個前置子元素
• 這個子元素採用 inline-block 佈局，尺寸用 em 度量

<div class='title'>
	用戶數據
</div>	
<style> body{ background: linear-gradient(0deg,#006666,#003333) } .title{ font-size: 2rem; line-height: 5rem; color: white } .title::before{ content: ''; display: inline-block; width: .2em; background: yellow; height: .8em; margin-right: .5em; } </style>
複製代碼

文字顏色

文字顏色用純白、純黑，太醒目突兀。一般咱們會選擇「不那麼白」或者「不那麼黑」的顏色，讓文字更柔和。若是嫌選顏色麻煩，能夠用純黑或者純白，加上透明度，融入背景中，顯得柔和不少。

rgba(255,255,255,.9)
複製代碼

提示效果

區域凸顯

讓區域高亮通常用於凸顯用戶選擇，經常使用方法以下：

• 修改 background 的 RGBA 顏色，適量調高每一個份量（或A份量調整背景透明度）|| 修改 filter: brightness 的值
• 可考慮用 transfrom: scale(1.1) 放大凸顯 && 增長陰影
• 加上極少許的 transition 增長過渡效果

區域暗淡

暗淡部分區域，下降用戶注意力，好比已完成，或者未解鎖的：

• 修改 background 的 RGBA 顏色，適量下降每一個份量 || 修改 filter: brightness
• 絕對定義一張黑色半透明蒙版(屏蔽點擊)置於其上，可用半透明+高斯模糊增強效果，經過after/before 僞類實現（attr）批量設置

旋轉光芒效果

若是有現成的PS製做的光芒更好，低配版的光芒製做方法：

1. 在ppt中建立一個三角，選擇線性過渡，頂部黃色，底部黃色透明
2. 三角複製成兩份，作成8子形狀，而後複製n個8，旋轉成光芒

旋轉光芒利用了2個要素，animation:my 5s linear 0s infinite ，transform:rotate(360deg)。動態修改動畫持續時間，如改爲2s，能夠實現旋轉加速

<div class='box'>
	<img class='light' src="http://www.imaoda.com/s/img/tpl/light.png" alt="">
	<div class='btn'>開始</div>
</div>
<style> body{ background: rgb(14,28,44) } .box{ position: relative; height: 400px; width: 400px; display: flex; justify-content: center; align-items: center; } .light{ width: 200px; height: 200px; filter: drop-shadow(0 0 5px yellow); animation: rotate linear 3s infinite; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding:3rem; background:green; color: white; border-radius: 50%; } @keyframes rotate{ 100%{ transform: rotate(360deg) } } 複製代碼

• 光芒元素用 static 定位，flex 居中，若是用 top/left+tranlate 居中，與旋轉 rotate 衝突
• 按鈕元素用 absolute 定位，top/left+tranlate 居中 （由於 absolute 元素不被 flex 控制）

聚光效果

一個外放光的圓形 border 逐漸縮小的動畫：

• 外層固定大小，採用flex佈局肯定內層絕對居中
• 對長寬進行動畫
• border-radius: 50% 百分比固定，保持圓形

<div class='box'>
	<div class='circle'></div>
	<div class='btn'>開始</div>
</div>
<style> .box{ position: relative; height: 300px; width: 300px; display: flex; justify-content: center; align-items: center; } .circle{ height: 200px; width: 200px; border-radius: 50%; border: 10px solid yellow; filter: drop-shadow(0 0 10px white); animation: shrink 1s infinite; } .btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding:3rem; background:green; color: white; border-radius: 50%; } @keyframes shrink{ 100%{ height: 10px; width: 10px; } } </style>
複製代碼

亮框提示

用戶點擊或者 hover 的時候，邊框高亮、發光，以起到提示做用

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
<style> li{ display: inline-block; height: 200px; width: 150px; background: url(http://www.imaoda.com/s/img/github/sgs.jpg); background-size: 100%; box-shadow: 0 2px 2px #222222; border: 2px solid transparent; border-radius: 5px; filter: brightness(.7); cursor: pointer; transition: all .2s } li:hover{ box-shadow: 0 0 30px yellow; border: 2px solid yellow; transform: translate(0,-10%); filter: brightness(1); } </style>
複製代碼

最後再鞏固一下其中的基礎知識

RGBA 顏色

能夠在常規 RGB 顏色後面，增長透明度 0 爲全完透明，1 爲徹底不透明。可用在：

• color
• background
• gradient
• box-shadow
• text-shadow

rgba(123,222,22,.5)
複製代碼

漸變

線性漸變：角度，顏色1，顏色2，...，顏色n。可後面追加%，若是省略，則均分

linear-gradient(45deg,rgba(0,0,255,.1) 0%,rgba(0,255,0,.1) 90%,rgba(255,0,0,.6) 100%)
複製代碼

輻射漸變：顏色1，顏色2，...，顏色n。可後面追加%，若是省略，則均分

linear-gradient(rgba(0,0,255,.1) 0%,rgba(0,255,0,.1) 90%,rgba(255,0,0,.6) 100%)
複製代碼

filter 濾鏡

filter 會對當前元素的所有內容（含子元素，含圖文邊框等）進行濾鏡。若是想只對圖片濾鏡，那麼須要使用 position 將文字元素定位到其上方。

<!--濾鏡能夠疊加：先模糊，再灰度-->
filter: blur(.1rem) grayscale(.5);
複製代碼

經常使用濾鏡包括：

• blur：失焦感的高斯模糊，默認0rem
• opacity：透明度，默認1，全透明0
• brightness：亮度，默認1，全黑0，曝光過分2+
• saturate：飽和度，默認1，灰色0，豔麗2+
• contrast：對比度，默認1，全灰0，黑白分明2+
• grayscale：疊加灰度，默認0，灰色1
• sepia：疊加褐色，默認0，褐色1
• invert：反色，默認0，全灰0.5，反色1
• drop-shadow：透明區域無陰影的 box-shadow

border-image 圖片邊框

之前要實現 border-image 的效果，須要用一個稍微大一圈的圖片打底

border: 30px solid transparent;
border-image: url(b.png) 10%; 
複製代碼

background-attachment 固定背景

若是是fixed，背景不跟隨scroll滾動

background-blend-mode

multiply 正片疊底

部分圓角矩形

border-radius 可針對左上、右上、右下、左下進行分別設置。所以能夠設定出部分圓角矩形

.box{
height: 400px; width: 400px; background: green;
border-radius: 0 2rem 0 2rem 
}
複製代碼

物質陰影/發光

box-shadow 可設置 右側陰影、下方陰影、高斯模糊、顏色。其中陰影是實色，層次感稍強，通常添加模糊便可。模糊會向四個方向進行擴散，與

.box{
height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
box-shadow: 0 0 1rem gray;
}
複製代碼

發光和陰影本質同樣，只不過顏色用淺色系(white/yellow等)，所處環境爲深色，加上 border-radius 效果更天然

內陰影，可以凸顯出凹陷的感受，只需在 box-shadow 的最後加上 inset 關鍵詞

字體發光/黑框

text-shadow，只需模糊便可，白光可以讓字體發光，黑光可以讓白色字體能適應圖片背景

.box{
	height: 400px; width: 400px; background: black; margin: 2rem; padding: 2rem; color: lightgreen; font-size: 28px;
	text-shadow: 0 0 .5rem yellow
}
複製代碼

本文github地址,持續更新......