文字折疊效果 CSS

文字折疊效果

人的志向通常和他們的能力成正比例。——約翰遜

實現效果

實現思路

建一個div盒子讓其旋轉一定角度，使其有一定的傾斜效果

通過雙偽元素建兩個相同的樣式，通過clip-path屬性分別截取上半部分和下半部分，并定位使其與原div盒子層疊

添加鼠標移入效果，通過一定的旋轉和傾斜來實現折疊時的效果

實現原理

一個div盒子在底層不動，讓偽元素變化從而達到效果

clip-path:使用裁剪方式創建元素的可顯示區域。區域內的部分顯示，區域外的隱藏。

該屬性下有很多的屬性值，這里用到的inset

inset()可以傳入5個參數，分別對應top,right,bottom,left的裁剪位置,round radius（可選，圓角）

-webkit-text-stroke:給文字添加邊框，2個屬性值，顏色和大小，ie有兼容性問題

skew:定義了一個元素在二維平面上的傾斜轉換，這種轉換是一種剪切映射(橫切)，它在水平和垂直方向上將單元內的每個點扭曲一定的角度。每個點的坐標根據指定的角度以及到原點的距離，進行成比例的值調整；因此，一個點離原點越遠，其增加的值就越大。

實現代碼

部分內容截自MDN文檔

本次的分享就到這結束了

CSS HTML JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。