css文字特效冰冻文字(带炫光)

原文链接：https://dsx2016.com/?p=1410

公众号：大师兄2016

效果预览

使用css制作冰冻文字(带炫光效果)

适用场景:

通常此类效果在视频片头特效出现较多

博客上,适用影评内容,如<<冰与火之歌等>>

最初样式

字号微微大一点,字体加粗,颜色随意,默认为黑色

用下图的样式对比上图的效果,只是加了一点css,就能获得完全不一样的效果

字体微调

默认的字体不够活泼,采用一些自定义字体会显得效果更贴切

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伪元素拿到当前的文字内容

自定义的属性内容要和展示的文字内容保持一致

设置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);
}

添加了阴影的效果更立体

设置炫光

为了方便演示,这里新加一个演示元素

设置一个初始区域,为了方便看到炫光效果

.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;
}

到此冻结文字完成

完整代码

其中引用的第三方字体和图片资源随时会失效

具体内容可自定替换为自己喜欢的字体和图片

更换纹理图片

可以把冰冻纹理换成木纹

也可以换成火焰

还可以换成水波

同样的原理,可以把文字的背景换成樱花,星空,黑板,墙壁等各种带有密集纹理的图片

tips

本文所使用效果,后续都将放入wordpress插件中,一键即可使用

END.