前言

css一直都是一個玄學語言，很簡單也很靈活複雜。

有些異常的效果，很多有經驗的開發者也搞不明白該怎麼解釋。今天就來盤點那些好用意想不到效果的樣式。

打字機動畫效果

經常在網頁首頁我們可以看到類似這種打字效果的樣式，可以用 js 來實現，但是用 css 更加優雅。

打字機效果

<！—— html程式碼 ——>

/* css程式碼 */ 。typing { height： 80vh； display： flex； align-items： center； justify-content： center； } 。effect { width： 35ch； white-space： nowrap； overflow： hidden； border-right： 3px solid； font-family： monospace； font-size： 2em； animation： typingAnimation 2s steps（22）， effect 。5s step-end infinite alternate； } @keyframes typingAnimation { from { width： 0； } } @keyframes effect { 50% { border-color： transparent； } }

給透明圖片陰影效果

對於png的圖片是帶有透明通道的（也就是

Alpha通道

），在這種情況下

你是否使用過

box-shadow

為圖片新增陰影？但是效果卻不是我們想要的，而正確的方式應該使用

drop-shadow

來為圖片新增陰影。

drop-shadow

的工作原理也很簡單，就是遵循給給定圖片的

Alpha

通道。因此陰影是基於圖片的內部形狀，而不是顯示在圖片外面的輪廓。

兩者屬性的效果

attr（） 展示 tooltip提示框

來實現這種提示框的效果我們第一反應可能就是使用 js 來實現彈框的效果，其實利用

attr（）

屬性更加的簡單。我們使用

tooltip

樣式類來展示顯示的文字樣式，利用

：before

和

：after

偽類的 content 屬性填充內容，內容的變數就是

tooltip-data

屬性的值

tooltip提示框效果

<！—— html程式碼 ——>

/* css程式碼 */ 。wrap { text-align： center； } 。tooltip { position： relative； border-bottom： 1px dotted black； } 。tooltip：before { content： attr（tooltip-data）； position： absolute； width： 250px； background-color： pink； color： #000； text-align： center； padding： 15px； font-size：16； line-height： 1。1； border-radius： 5px； z-index： 1； opacity： 0； transition： opacity 。5s； bottom： 125%； left： 50%； margin-left： -60px； } 。tooltip：after { content： “”； position： absolute； bottom： 75%； left： 50%； margin-left： -5px； border-width： 5px； border-style： solid； opacity： 0； transition： opacity 。5s； border-color： pink transparent transparent transparent； } 。tooltip：hover：before， 。tooltip：hover：after { opacity： 1； }