1200字范文 > css文字特效-冰冻文字(带炫光)

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

时间：2019-09-29 11:58:57

相关推荐

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

原文链接：/?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伪元素拿到当前的文字内容

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

<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><section class="frozen" data-heading="Frozen">Frozen</section></body></html>