使用css製作冰凍文字(帶炫光效果)
適用場景:
通常此類效果在視頻片頭特效出現較多
博客上,適用影評內容,如<<冰與火之歌等>>
字號微微大一點,字體加粗,顏色隨意,默認為黑色
用下圖的樣式對比上圖的效果,只是加了一點css,就能獲得完全不一樣的效果
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frozen</title>
<style> .frozen { /* 最初字體樣式 */ font-size: 300px; font-weight: 900; } </style>
</head>
<body>
<section class="frozen">Frozen</section>
</body>
</html>默認的字體不夠活潑,採用一些自定義字體會顯得效果更貼切
css3自定義字體
@font-face {
font-family: "frozen";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff");
}使用自定義字體
/* 使用自定義字體 */
.frozen{
font-family: "frozen", serif;
}先設置背景圖片,冰凍效果的紋理圖片
後續若改變背景圖片,則參考此處的圖片內容
/* 設置背景圖片 */
.frozen{
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
}然後設置文字透明且裁剪模式按文字背景區域裁剪
/* 設置文字透明且背景按文字區域裁剪 */
.frozen{
color: transparent;
-webkit-background-clip: text;
}此時的效果圖為
先設置自定義屬性,方便css偽元素拿到當前的文字內容
自定義的屬性內容要和展示的文字內容保持一致
<!-- data-heading="Frozen" -->
<section class="frozen" data-heading="Frozen">Frozen</section>設置css偽元素並設置其文字從父元素屬性中獲得,以及該文字與父元素位置重疊
.frozen::before {
/* 獲取自定義屬性文字 */
content: attr(data-heading);
/* 使其和父元素文字重疊 */
position: absolute;
left: 0;
top: 0;
width: 100%;
}此時父元素要加上相對定位,以便子元素定位生效
.frozen{
/* 為了子元素定位 */
position: relative;
}偽元素添加文字陰影,並和父元素顏色混合
.frozen::before {
/* 使用顏色混合模式 */
mix-blend-mode: screen;
/* 文字透明 */
color: transparent;
/* 設置文字陰影 */
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2),
-2px 2px 10px rgba(0, 0, 0, 0.2),
-2px -2px 10px rgba(0, 0, 0, 0.2);
}添加了陰影的效果更立體
為了方便演示,這裡新加一個演示元素
<!-- 演示炫光 -->
<section class="glare">glare</section>設置一個初始區域,為了方便看到炫光效果
.glare {
/* 初始樣式 */
width: 500px;
height: 300px;
border: 1px solid #333;
}設置漸變背景
此處為黑色,應該是白底
.glare {
/* 設置漸變背景 */
background: linear-gradient(
45deg,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.8) 50%,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0) 100%
);
background-size: 200%;
}設置背景圖動畫
/* 設置背景圖動畫 */
@keyframes glare {
0% {
background-position: -100%;
}
100% {
background-position: 100%;
}
}使用背景圖動畫
.glare {
/* 使用背景圖動畫 */
animation: glare 1s infinite;
}把同樣的效果添加到偽元素上,並且背景的炫光設置為白色
.glare {
/* 設置漸變背景 */
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 55%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200%;
/* 使用背景圖動畫 */
animation: glare 1s infinite;
}到此凍結文字完成
其中引用的第三方字體和圖片資源隨時會失效
具體內容可自定替換為自己喜歡的字體和圖片
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frozen</title>
<style> /* 設置自定義字體 */ @font-face { font-family: "frozen"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff"); } .frozen { /* 最初字體樣式 */ font-size: 300px; font-weight: 900; /* 使用自定義字體 */ font-family: "frozen", serif; /* 設置背景圖片 */ background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg); /* 設置文字透明且背景按文字區域裁剪 */ color: transparent; -webkit-background-clip: text; /* 為了子元素定位 */ position: relative; } .frozen::before { /* 獲取自定義屬性文字 */ content: attr(data-heading); /* 使其和父元素文字重疊 */ position: absolute; left: 0; top: 0; width: 100%; /* 使用顏色混合模式 */ mix-blend-mode: screen; /* 文字透明 */ color: transparent; /* 設置文字陰影 */ text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2), -2px 2px 10px rgba(0, 0, 0, 0.2), -2px -2px 10px rgba(0, 0, 0, 0.2); /* 設置漸變背景 */ background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 100% ); background-size: 200%; /* 使用背景圖動畫 */ animation: glare 1s infinite; } /* 設置背景圖動畫 */ @keyframes glare { 0% { background-position: -100%; } 100% { background-position: 100%; } } .glare { /* 初始樣式 */ width: 500px; height: 300px; border: 1px solid #333; /* 設置漸變背景 */ background: linear-gradient( 45deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100% ); background-size: 200%; /* 使用背景圖動畫 */ animation: glare 1s infinite; } </style>
</head>
<body>
<!-- data-heading="Frozen" -->
<section class="frozen" data-heading="Frozen">Frozen</section>
<!-- 演示炫光 -->
<!-- <section>glare</section> -->
</body>
</html>可以把冰凍紋理換成木紋
也可以換成火焰
還可以換成水波
同樣的原理,可以把文字的背景換成櫻花,星空,黑板,牆壁等各種帶有密集紋理的圖片
本文所使用效果,後續都將放入wordpress插件中,一鍵即可使用
END.