用最短的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地址,持續更新......