css實(shí)現(xiàn)文字?jǐn)嗔研Ч氖纠a
發(fā)布時(shí)間：2022-04-20 16:37:44 作者：程序焱 
我要評(píng)論
我要評(píng)論本文主要介紹了css實(shí)現(xiàn)文字?jǐn)嗔研Ч氖纠a，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
clip-path屬性
創(chuàng)建一個(gè)只有元素的部分區(qū)域，可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。
<h1 data-text="Text Crack">
<span>Text Crack</span>
</h1>
使用元素的偽元素復(fù)制兩份文本，再使用 clip-path 將元素本身、元素的兩個(gè)偽元素分為3部分，分別對(duì)這3部分進(jìn)行控制
body, html
{
display: flex;
height: 100%;
width: 100%;
background-color: #000;
overflow: hidden;
font-family: sans-serif;
}
h1 {
position: relative;
margin: auto;
font-size: calc(20px + 5vw);
font-weight: bold;
color: #fff;
letter-spacing: 0.02em;
text-transform: uppercase;
text-shadow: 0 0 10px blue;
user-select: none;
white-space: nowrap;
filter: blur(0.007em);
animation: shake 2.5s linear forwards;
}
h1 span {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
clip-path: polygon(10% 0%, 44% 0%, 70% 100%, 55% 100%);
}
h1::before,
h1::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
h1::before {
animation: crack1 2.5s linear forwards;
clip-path: polygon(0% 0%, 10% 0%, 55% 100%, 0% 100%);
}
h1::after {
animation: crack2 2.5s linear forwards;
clip-path: polygon(44% 0%, 100% 0%, 100% 100%, 70% 100%);
}
@keyframes shake {
5%,
15%,
25%,
35%,
55%,
65%,
75%,
95% {
filter: blur(0.018em);
transform: translateY(0.018em) rotate(0deg);
}
10%,
30%,
40%,
50%,
70%,
80%,
90% {
filter: blur(0.01em);
transform: translateY(-0.018em) rotate(0deg);
}
20%,
60% {
filter: blur(0.03em);
transform: translate(-0.018em, 0.018em) rotate(0deg);
}
45%,
85% {
filter: blur(0.03em);
transform: translate(0.018em, -0.018em) rotate(0deg);
}
100% {
filter: blur(0.007em);
transform: translate(0) rotate(-0.5deg);
}
}
@keyframes crack1 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-51%, -48%);
}
}
@keyframes crack2 {
0%,
95% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-49%, -53%);
}
}
因?yàn)槭褂昧?clip-path 裁剪后的元素，只有元素的剪切區(qū)域才能被顯示，所以我們可以分別控制 3 個(gè)部分進(jìn)行動(dòng)畫(huà)
最終效果如下
到此這篇關(guān)于css實(shí)現(xiàn)文字?jǐn)嗔研Ч氖纠a的文章就介紹到這了,更多相關(guān)css 文字?jǐn)嗔褍?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了css文字動(dòng)畫(huà)效果如何實(shí)現(xiàn)，幫助大家更好的理解和學(xué)習(xí)使用css，感興趣的朋友可以了解下2021-04-06
詳解CSS 文字裝飾 text-decoration & text-emphasis
這篇文章主要介紹了詳解CSS 文字裝飾 text-decoration & text-emphasis,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋2021-04-06
原生CSS實(shí)現(xiàn)文字無(wú)限輪播的通用方法
這篇文章主要介紹了原生CSS實(shí)現(xiàn)文字無(wú)限輪播的通用方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-03-24- 這篇文章主要介紹了css文字陰影漸漸模糊效果的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-07
這篇文章主要介紹了css實(shí)現(xiàn)文字在背景圖片之上,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-21
純CSS實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的文字說(shuō)明(新手小白 必看)
這篇文章主要介紹了 純CSS實(shí)現(xiàn)鼠標(biāo)放上滑動(dòng)出半透明效果的文字說(shuō)明(新手小白 必看),代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-17
CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題
這篇文章主要介紹了CSS樣式 解決文字過(guò)長(zhǎng)顯示省略號(hào)問(wèn)題,本文通過(guò)實(shí)例代碼截圖給大家展示的非常詳細(xì)，需要的朋友可以參考下2019-12-17
css實(shí)現(xiàn)文字豎排的方式(小結(jié))
這篇文章主要介紹了css實(shí)現(xiàn)文字豎排的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-01
css實(shí)現(xiàn)文字居中兩邊橫線效果的示例代碼
這篇文章主要介紹了css實(shí)現(xiàn)文字居中兩邊橫線效果的示例代碼的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-19
