CSS 世界博大精深，寫(xiě)過(guò) css 的都知道，很多時(shí)候總是出現(xiàn)一些莫民奇妙的狀況，你寫(xiě)的代碼最后實(shí)現(xiàn)出來(lái)跟你預(yù)想的完全不同，特別是有時(shí)在那里悲催地找原因找了一下午，最后才發(fā)現(xiàn)是某個(gè)變量某個(gè)字符寫(xiě)錯(cuò)而導(dǎo)致，真 skr 慘。今天介紹幾個(gè)有趣的 css 效果，是從書(shū)上看來(lái)的，有些可能你以前都沒(méi)想到這么實(shí)現(xiàn)過(guò)，可以學(xué)習(xí)下作者的思路，對(duì)你以后寫(xiě)出更好的 css 代碼會(huì)有幫助。
-
顯示/收縮效果
這個(gè)效果比較常用到，具體效果如下：
gif動(dòng)圖
/* HTML 代碼 */
<div class="demo">
<input type="checkbox" id="check" style="display:none">
<p>HTC 計(jì)劃在 10 月 22 日推出區(qū)塊鏈智能手機(jī)</p>
<div class="element">
<p>該公司一個(gè)有趣的發(fā)展方向就是決定推出名為 Exodus 的區(qū)塊鏈智能手機(jī) ... 該手機(jī)制造商在照片分享應(yīng)用 Instagram 上為這個(gè)即將推出的區(qū)塊鏈智能手機(jī)建造了一個(gè)新的頁(yè)面</p>
</div>
<label for="check" class="check-in">更多↓</label>
<label for="check" class="check-out">收起↑</label>
</div>
/* CSS 代碼 */
.demo{width: 200px;padding-left:100px;padding-top: 10px;}
.element{
width: 200px;
padding-top: 15px;
max-height: 0;
overflow: hidden;
transition: max-height .25s;
}
:checked ~ .element{
max-height: 666px;
}
:checked ~ .check-out{
display: block;
}
:checked ~ .check-in{
display: none;
}
.check-in,.check-out{
color: blue;
cursor: pointer;
margin-top: 15px;
}
.check-out{
display: none;
}
-
正在加載中動(dòng)畫(huà)
在加載網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)用到這個(gè)動(dòng)畫(huà)，為了緩解圖片文字資源未加載時(shí)用來(lái)過(guò)渡，極大地增強(qiáng)了用戶(hù)體驗(yàn)，效果大致如下：
正在加載中
/* HTML 代碼 */
正在加載中<dot>...</dot>
/* CSS 代碼 */
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
-
css 自行實(shí)現(xiàn)小圖標(biāo)
在日常開(kāi)發(fā)的過(guò)程中經(jīng)常會(huì)用到小圖標(biāo)，除了可以去 阿里圖標(biāo) 下載之外，一些較簡(jiǎn)單的圖標(biāo)可以自己用 css 實(shí)現(xiàn)，方法是利用 border 和 background 屬性，效果如下：
寬高擴(kuò)大了 10 倍顯示
/* HTML 代碼 */
<i class="icon-menu"></i>
<i class="icon-dot"></i>
/* CSS 代碼 */
.icon-menu{
display: inline-block;
width: 140px; height: 10px;
padding: 35px 0;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: currentColor;
background-clip: content-box;
margin: 50px 0 0 100px;
}
.icon-dot{
display: inline-block;
width: 100px; height: 100px;
padding: 10px;
border: 10px solid;
border-radius: 50%;
background-color: currentColor;
background-clip: content-box;
}
-
border 實(shí)現(xiàn)邊框
很多時(shí)候會(huì)遇到需要有一個(gè)上傳按鈕，點(diǎn)擊按鈕后上傳文件，如下面這樣的效果：
按鈕
此時(shí)可以用 a 標(biāo)簽來(lái)承載，在通過(guò) border 屬性來(lái)定義虛線框，利用偽元素來(lái)定位，使中間的 + 號(hào)能水平垂直居中。
/* HTML 代碼 */
<a href class="add" title="繼續(xù)上傳">添加圖片</a>
/* css 代碼 */
.add{
display: inline-block;
width: 76px; height: 76px;
color: #ccc;
border: 2px dashed;
text-indent: -12em;
transition: color .25s;
position: relative;
overflow: hidden;
margin: 50px 100px;
}
.add:before, .add:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.add:hover{
color: #34538b;
}
.add::before{
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.add::after{
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
-
純 css 實(shí)現(xiàn)自適應(yīng)的彈框
彈框，也就是 dialog ，經(jīng)常也是在網(wǎng)頁(yè)中看到，例如有些網(wǎng)頁(yè)點(diǎn)擊登錄注冊(cè)時(shí)就會(huì)跳出一個(gè)彈框來(lái)顯示登錄注冊(cè)頁(yè)面，而下面的效果是使用 css 完成的，并且可以自適應(yīng)，無(wú)論窗口的大小，始終能保持水平垂直居中，很好的一個(gè)實(shí)現(xiàn)方法。
水平垂直居中彈框
/* HTML 代碼 */
<div class="container">
<div class="dialog">
<div class="content">
我是內(nèi)容
</div>
</div>
</div>
/* css 代碼 */
.container{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.container:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}
這些 css 效果有些非常實(shí)用，建議收藏起來(lái)，沒(méi)準(zhǔn)以后會(huì)用到，另外，以上的完整代碼全都放在 GitHub 上了，點(diǎn)擊下方的「閱讀原文」可以進(jìn)去下載，覺(jué)得有用點(diǎn)個(gè)贊！
參考資料
張?chǎng)涡瘛?css 世界》
PS：最近 Chrome 70 正式發(fā)布了，不得不說(shuō)，谷歌這波更新的真快，不過(guò)我下載體驗(yàn)了一下，整體跟 69 版本沒(méi)什么大的變化，至于新增的那些畫(huà)中畫(huà)、拖拽 API 什么的目前也沒(méi)用得上什么，感興趣的直接去 官網(wǎng) 下載最新的版本就好，目前只有桌面版，移動(dòng)端版本的還要等些時(shí)間。
