用最短的CSS樣式，勾勒大資料演示屏
阿新 • • 發佈：2019-02-11
效果預覽
↓↓↓ 動畫效果總覽：GIF 載入需要稍等一下 ↓↓↓
常用效果的實現（最精簡的程式碼）
再漂亮的設計，也可以拆解成基礎效果的組合，在這裡，我把一些常用的效果進行了羅列，並附加程式碼
優雅的呈現
蒙版文字
覆蓋一層蒙版，並在蒙版上書寫文字。需要2層，從低到上為圖片層、蒙版層(上面可寫字)
<div class='box' >
<div class='back'></div> <!--正文層-->
<div class='modal'></div> <!--模板層-->
</div>
<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 高斯模糊背景圖
電影介紹的時候，其背景色跟海報差不多，其實就是放大了海報的一個角落 + 高斯模糊 + 黑色半透明蒙版的效果
<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製作的光芒更好，低配版的光芒製作方法：
- 在ppt中建立一個三角，選擇線性過渡，頂部黃色，底部黃色透明
- 三角複製成兩份，做成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,