你不知道 CSS 可以做的 4 件事
1、逐幀動畫
我們經(jīng)常使用css3中的animation動畫，比如這樣：
.fadeIn{
animation: fadeIn .5s ease 1s both;
}
@keyframes fadeIn{
from{
opacity:0;
}
to{
opacity:1
}
}
這樣就實現(xiàn)了延時1s，一共0.5s的淡入動畫。其中ease是animation-timing-function的默認值。animation-timing-function使用了三次貝塞爾（Cubic Bezier）函數(shù)生成速度曲線，可以讓我們的動畫產(chǎn)生平滑的過渡。但是有的時候我們并不想要平滑的過渡，比如想要實現(xiàn)下面小人跑動的效果，該怎么實現(xiàn)呢？
我們可以將小人跑動的動作分解，拼成下面的雪碧圖：
通過設(shè)置不同的background-position設(shè)置不同時間小人不通的動作
@keyframes run {
0% {
background-position: 0 0
}
10%{
background-position: -100% 0
}
20%{
background-position: -200% 0
}
30%{
background-position: -300% 0
}
40%{
background-position: -400% 0
}
50%{
background-position: 0 -100%
}
60%{
background-position: -100% -100%
}
70%{
background-position: -200% -100%
}
80%{
background-position: -300% -100%
}
90%{
background-position: -400% -100%
}
100%{
background-position: 0 0
}
}
用animation讓動畫動起來吧，想讓動畫每幀動，而 不帶中間的過渡效果animation-timing-function要設(shè)置成steps函數(shù)
.people{
width: 100px;
height: 114px;
background: url(../images/people.png);
-webkit-animation:run 1s steps(1) 0s infinite both;
animation:run 1s steps(1) 0s infinite both;
}
或者更簡單，把雪碧圖拼成這樣：
.people{
width: 100px;
height: 114px;
background: url(../images/people.png);
-webkit-animation:run 1s steps(9) 0s infinite both;
animation:run 1s steps(9) 0s infinite both;
}
@-webkit-keyframes run {
to{
background-position: -900% 0
}
}
steps函數(shù)接受兩個參數(shù)，第一個參數(shù)會根據(jù)你指定的步進數(shù)量，把整個動畫切分為多幀，第二個可選的參數(shù)可以是 start 或 end(默認)。這個參數(shù)用于指定動畫在每個循環(huán)周期的什么位置發(fā)生幀的切換動作。還可以使用 step-start 和 step-end 這樣的簡寫屬性,它們分別等同于 steps(1, start) 和 steps(1, end)
?很多時候我們的gif動畫都可以直接用css效果實現(xiàn)，快來試試吧！
?
2、連字符
CSS 屬性 hyphens 告知瀏覽器在換行時如何使用連字符連接單詞。可以完全阻止使用連字符，也可以控制瀏覽器什么時候使用，或者讓瀏覽器決定什么時候使用。
例如：
如果你簡單地應(yīng)用值為auto的hyphens屬性，它對于連字符就足夠了，但是，你需要通過lang HTML 屬性聲明一種語言。
3、Sticky Footer
Sticky Footer是css的一種布局場景。頁腳footer永遠固定在頁面的底部，頁面內(nèi)容不夠長的時候頁腳黏在視窗底部，內(nèi)容足夠長時會被向下移動。老式門戶網(wǎng)站由于內(nèi)容過短常常版權(quán)頁腳前移，移動端特定布局也需要Sticky Footer來解決這些問題。
開發(fā)中我們一定遇到過 Web 應(yīng)用程序中頁腳的問題，在這種情況下，具有任何塊級樣式的頁腳在處理較長的內(nèi)容時，可以正常工作，但在頁面較短時時就不準確了。
?此問題出現(xiàn)在內(nèi)容短于視口高度減去頁腳高度的較短頁面上。
?
使用 Flexbox 作為靈活的解決方案
?底部不定高度，利用flex彈性布局實現(xiàn)效果，兼容性有限建議移動端使用
?
https://codepen.io/qietuniu/pen/EJeNYW
外部容器display設(shè)為flex彈性布局，flex-flow設(shè)置方向為column縱向并設(shè)置最小高度為100vh 主體內(nèi)容flex屬性設(shè)為1
DOM節(jié)點
<div class="container">
<div class="header"></div>
<div class="section">
</div>
<div class="footer">這是footer</div>
</div>
樣式代碼
.container {
display: flex;
flex-flow: column;
min-height: 100vh;
}
.section {
flex: 1
}
4、自定義下劃線
?在日常開發(fā)中，我們可能遇到過設(shè)計師要求我們做出更加完美的下劃線，可能要求我們修改下劃線的顏色，下劃線距離文本的距離，下劃線的線型等等，當我們拋棄下劃線的默認樣式，我們還能通過哪些方法做出滿足需求的文本下劃線呢~ 接下來我們通過案例一起看一下吧~
?
例如：
文本中的下劃線可以使用很少的 CSS 行來實現(xiàn)，但請確保你沒有使用任何邊框底部技巧。因為該解決方案不會遵循我們對文本所期望的一切。
?請注意，我們已經(jīng)使用text-shadow屬性來解決下劃線如何穿過字母（如p、l、q等）的下劃線的問題
?
參考文獻
https://segmentfault.com/a/1190000018961782 https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/ https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/