原文链接:/?p=1410
公众号:大师兄
效果预览
使用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-/s.cdpn.io/209981/Ice%20kingdom%20-%20Bold%20-%20Por%20Kustren.woff");}
使用自定义字体
/* 使用自定义字体 */.frozen{font-family: "frozen", serif;}
设置文字背景
先设置背景图片,冰冻效果的纹理图片
后续若改变背景图片,则参考此处的图片内容
/* 设置背景图片 */.frozen{background: url(https://s3-us-west-/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-/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-/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 class="glare">glare</section> --></body></html>
更换纹理图片
可以把冰冻纹理换成木纹
也可以换成火焰
还可以换成水波
同样的原理,可以把文字的背景换成樱花,星空,黑板,墙壁等各种带有密集纹理的图片
tips
本文所使用效果,后续都将放入wordpress
插件中,一键即可使用
END.