1.實現(xiàn)效果
GIF111.gif
2.實現(xiàn)步驟
2.1.寫一個h2標(biāo)簽
<h2 content="蘇蘇">蘇蘇</h2>
2.3.設(shè)置字體鏤空
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #222;
min-width: 1200px;
}
h2 {
color: #fff;
font-size: 8em;
color: transparent;
-webkit-text-stroke: 2px #00ffff;
position: relative;
}
如下圖效果：
在這里插入圖片描述
2.3text-stroke屬性
使用text-stroke文字的描邊屬性，color: transparent，實現(xiàn)字體鏤空的效果。
text-stroke是： text-stroke-width和text-stroke-color兩個屬性的簡寫寫法。
text-stroke-width ：設(shè)置或檢索對象中的文字的描邊厚度
text-stroke-color ：設(shè)置或檢索對象中的文字的描邊顏色
2.4 h2添加一個相同文字的偽元素
h2::before {
content: attr(content);
position: absolute;
top: 0;
left: 0;
color: #00ffff;
animation: a 4s ease-in-out infinite;
}
content設(shè)置偽元素的內(nèi)容，結(jié)合attr屬性獲取元素屬性內(nèi)容。
為其設(shè)置一個動畫效果
@keyframes a {
0%,
100% {
-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
}
}
2.5clip-path
clip-path創(chuàng)建一個只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。
clip-path的屬性值可以是以下幾種：
在這里插入圖片描述
這里用到的就是多變形，推薦一個clip-path在線網(wǎng)站，快速幫助我們繪畫出想要的形狀。
clip-path在線生成網(wǎng)站
在這里插入圖片描述
3.完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #222;
min-width: 1200px;
}
h2 {
color: #fff;
font-size: 8em;
color: transparent;
-webkit-text-stroke: 2px #00ffff;
position: relative;
}
h2::before {
content: attr(content);
position: absolute;
top: 0;
left: 0;
color: #00ffff;
animation: a 4s ease-in-out infinite;
}
@keyframes a {
0%,
100% {
-webkit-clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
clip-path: polygon(0 100%, 0 61%, 16% 77%, 29% 86%, 44% 90%, 62% 88%, 78% 81%, 89% 74%, 100% 62%, 100% 100%);
}
50% {
-webkit-clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
clip-path: polygon(0 100%, 0 25%, 16% 52%, 29% 65%, 43% 75%, 64% 76%, 77% 72%, 88% 62%, 100% 49%, 100% 100%);
}
}
</style>
<body>
<h2 content="蘇蘇">蘇蘇</h2>
</body>
</html>
