NO.1
效果预览
使用css制作冰冻文字(带炫光效果)
适用场景:
通常此类效果在视频片头特效出现较多
博客上,适用影评内容,如<>
NO.2
最初样式
字号微微大一点,字体加粗,颜色随意,默认为黑色
用下图的样式对比上图的效果,只是加了一点css,就能获得完全不一样的效果
Frozen
.frozen {
/* 最初字体样式 */
font-size: 300px;
font-weight: 900;
}
Frozen
NO.3
字体微调
默认的字体不够活泼,采用一些自定义字体会显得效果更贴切
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;
}
NO.4
设置文字背景
先设置背景图片,冰冻效果的纹理图片
后续若改变背景图片,则参考此处的图片内容
/* 设置背景图片 */
.frozen{
background: url(https://s3-us-west-/s.cdpn.io/209981/6963bbf342d87b3a2150bd8f59682b89.jpg);
}
然后设置文字透明且裁剪模式按文字背景区域裁剪
/* 设置文字透明且背景按文字区域裁剪 */
.frozen{
color: transparent;
-webkit-background-clip: text;
}
此时的效果图为
NO.5
设置文字阴影
先设置自定义属性,方便css伪元素拿到当前的文字内容
自定义的属性内容要和展示的文字内容保持一致
Frozen
设置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);
}
添加了阴影的效果更立体
NO.6
设置炫光
为了方便演示,这里新加一个演示元素
glare
设置一个初始区域,为了方便看到炫光效果
.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;
}
到此冻结文字完成
NO.7
完整代码
其中引用的第三方字体和图片资源随时会失效
具体内容可自定替换为自己喜欢的字体和图片
Frozen
/* 设置自定义字体 */
@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;
}
Frozen
NO.8
更换纹理图片
可以把冰冻纹理换成木纹
也可以换成火焰
还可以换成水波
同样的原理,可以把文字的背景换成樱花,星空,黑板,墙壁等各种带有密集纹理的图片
NO.9
tips
本文所使用效果,后续都将放入wordpress插件中,一键即可使用
END.
