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

公众号：大师兄2016

效果预览

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

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

<!-- 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-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;}</style></head><body><!-- data-heading="Frozen" --><section class="frozen" data-heading="Frozen">Frozen</section><!-- 演示炫光 --><!-- <section class="glare">glare</section> --></body>
</html>

更换纹理图片

可以把冰冻纹理换成木纹

也可以换成火焰

还可以换成水波

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

tips

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

END.

css文字特效-冰冻文字(带炫光)相关推荐

html炫光字体代码,css文字特效-冰冻文字(带炫光)
NO.1 效果预览使用css制作冰冻文字(带炫光效果) 适用场景: 通常此类效果在视频片头特效出现较多博客上,适用影评内容,如<> NO.2 最初样式字号微微大一点,字体加粗,颜色随 ...
每天一个CSS小特效，文字闪烁——【钢铁侠：爱你三千遍】
文章目录前言效果图 HTML篇 CSS篇 1. 盒子模型设置 2. 动画设置完整代码前言我是前端小刘不怕牛牛,love you 3000,愿你能遇到值得的人. 今天分享一个唯美的文字闪烁CS ...
html文字破碎特效,AE怎么制作破碎文字特效? ae文字破碎效果的制作方法
本例主要讲解利用[碎片]特效制作破碎文字.我现在教你如何制作破碎文字. 1.打开Adobe After Effects CC 2015. 2.在弹出的"欢迎"使用Adobe Aft ...
分享111个JS文字特效，总有一款适合您
分享111个JS文字特效,总有一款适合您 111个JS文字特效下载链接:https://pan.baidu.com/s/1Ql-wGwfjovvu78bvpwD-8w?pwd=wqgg 提取码:wq ...
python设置字体_Python实现文字特效的方法
Python实现文字特效的方法发布时间:2020-06-24 10:00:12 来源:亿速云阅读:171 作者:清晨不懂Python实现文字特效的方法?其实想解决这个问题也不难,下面让小编带着大 ...
html5 火焰效果图,css3火焰文字特效
这是一款效果非常炫酷的css3火焰文字特效.该css3火焰文字特效仅用10行代码就可以实现,效果特别炫酷. 使用方法 HTML结构使用任意元素来包裹要实现火焰文字特效的文字. jQuery之家 CS ...
html5 制作书架展示 PHP,简单做出HTML5翻页效果文字特效
简单做出HTML5翻页效果文字特效之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的, ...
html显示和隐藏文字特效,14款震撼人心的HTML5文字特效
1.CSS3五彩文字特效文字带阴影效果这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...
18款js和jquery文字特效代码分享
18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码原生JS鼠标悬停文字球状放大显示效果代码原生js文字动画圆形 ...

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