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-2.amazonaws.com/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-2.amazonaws.com/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-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;

}

Frozen

​

NO.8

更换纹理图片

可以把冰冻纹理换成木纹

也可以换成火焰

还可以换成水波

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

NO.9

tips

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

END.