CSS 大約有兩百個屬性。很多屬性都是相互關(guān)聯(lián)的睬涧,理清楚每一個屬性細節(jié)是不可能的舱权。所以矗晃,本文分享一些有用的 CSS 小技巧,方便開發(fā)者和設(shè)計師參考宴倍。
1. 打字效果
網(wǎng)頁設(shè)計變得越來越有創(chuàng)意张症。在 CSS 動畫的協(xié)調(diào)下,你的網(wǎng)頁會像活的一樣鸵贬。在這個例子中俗他,我們將使用 animation 和 @keyframes 屬性去實現(xiàn)打字效果。
具體來說阔逼,在這個演示中兆衅,我們通過 steps()
屬性來實現(xiàn)分割文本的效果。首先,你必須指定 step() 中傳入的數(shù)量羡亩,在這個例子中就是文本的長度摩疑。
接著,第二步畏铆,我們使用 @keyframes 去聲明什么時候開始執(zhí)行動畫雷袋。
如果你在文本 Typing effect for text 后面添加內(nèi)容,而不改變 step()
中的數(shù)字辞居,將不會產(chǎn)生這種效果楷怒。
這種效果并不是特別新鮮。然而速侈,很多開發(fā)者卻使用 JavaScript 庫去實現(xiàn)率寡,而不是使用 CSS。
<div class="typing"> <div class="typing-effect">Typing effect for text</div></div>
.typing {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.typing-effect {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: typing 2s steps(22), effect .5s step-end infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
}
@keyframes effect {
50% {
border-color: transparent;
}
}
2. 透明圖片陰影效果
你是否使用過 box-shadow 為透明的圖片添加陰影倚搬,卻讓其看起來像添加了一個邊框一樣冶共?然而解決方案是使用 drop-shadow。
drop-shadow 的工作方式是每界,其遵循給給定圖片的 Alpha 通道捅僵。因此陰影是基于圖片的內(nèi)部形狀,而不是顯示在圖片外面眨层。
<div class="transparent-shadow">
<div class="margin-right">
<div class="margin-bottom align-center">box-shadow</div>
<img class="box-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="box-shadow example (transparent)" />
</div>
<div>
<div class="margin-bottom align-center">drop-shadow</div>
<img class="drop-shadow" src="https://stackdiary.com/wp-content/uploads/2022/02/logo.png" alt="drop-shadow example (transparent)" />
</div>
</div>
.transparent-shadow {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.margin-right {
margin-right: 2em;
}
.margin-bottom {
margin-bottom: 1em;
}
.align-center {
text-align: center;
}
.box-shadow {
box-shadow: 2px 4px 8px #3723a1;
}
.drop-shadow {
filter: drop-shadow(2px 4px 8px #3723a1);
}
10. 使用 ::before 添加按鈕的圖標
每當我需要鏈接到外部其他資源的時候庙楚,我都會使用自定義的按鈕來實現(xiàn)。準確來說趴樱,是一個添加圖標的按鈕馒闷。簡單的谷歌搜索,你會發(fā)現(xiàn)很多 button generators 叁征,但是我對可以隨時使用的通用解決方案更感興趣纳账。
所以,為了實現(xiàn)這個目標捺疼,我為特定按鈕創(chuàng)建了一個 :before
偽元素疏虫。需要聲明的是,代碼片段中的 content:"\0000a0"
; 是
的 Unicode 轉(zhuǎn)義啤呼。
你可以通過寬高屬性來調(diào)整圖標的尺寸卧秘,以更好適應(yīng)按鈕樣式。
<div class="card">
<div class="card-body"><a href="" target="_blank" class="btn btn-docu" rel="noopener">Documentation</a></div>
</div>
.card .card-body .btn {
display: block;
width: 200px;
height: 48px;
line-height: 48px;
background-color: blue;
border-radius: 4px;
text-align: center;
color: #fff;
font-weight: 700;
}
.card .card-body .btn-docu:before {
content: '\0000a0';
display: inline-flex;
height: 24px;
width: 24px;
line-height: 24px;
margin: 0px 10px 0px 0px;
position: relative;
top: 0px;
left: 0px;
background: url(https://stackdiary.com/docu.svg) no-repeat left center transparent;
background-size: 100% 100%;
}