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

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量2.8k 收藏 76
点赞数 17
分类专栏： 代码随笔 文章标签： css css3 js html es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37865166/article/details/109862750
版权

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

公众号：大师兄2016

效果预览

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

适用场景:

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

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

img

最初样式

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

用下图的样式对比上图的效果,只是加了一点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;
}

 

%E5%86%B0%E7%82%AB%E5%85%89.gif

到此冻结文字完成

完整代码

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

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

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

IT大师兄吖
关注
  • 17
    点赞
  • 踩
  • 76
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML喷雾炫光特效（追光者）.zip
09-11
分享一个HTML喷雾炫光特效。
gotdict：《冰与火之歌：权力游戏》 Kindle字典
02-17
GOTDict 一个社区根据的工作为Kindle制作了《冰与火之歌》字典。 尽管许多字符都有X射线条目，但该词典的目的是要扩展得多，以提供有关房屋，位置，船只，地图等的信息。 有关更多详细信息和安装说明，请参见 。 :floppy_disk: 获取字典 对master分支的每次提交都会创建一个构建。 最新版本可在此处下载： : 贡献 该项目需要帮助来提高条目的质量和数量。 请有关字典所有问题的。 请分叉并提交PR以直接捐款。 参赛指南即将起草。 该项目利用了主要来自公开许可内容，并使用了其许可 。 完整的源代码和构建脚本位于GitHub上，并且类似地公开许可。 项目结构 _definitions包含字典中的每个条目作为，每个条目都包含一些有关属性（例如标题）的题。 这些的列表如下所示 title ：定义的标题 terms ： terms列表，其他形式的书名将在书中得到认可 type ：记录类型 ch
Css文字闪烁的效果
Mozifei73的博客
02-04 497
【代码】Css文字闪烁的效果。
PHOTOSHOP炫光文字制作方法
06-21
介绍如何用PHOTOSHOP制作泫光文字效果，图文想间的介绍！其实做起来很简单的哦~
黑色炫光风格CSS模板-黑色 炫光 背景 web20 整体色 光.rar
02-20
黑色炫光风格CSS模板_黑色 炫光 背景 web20 整体色 光.rar
JavaScript实现Flash炫光波动特效
10-24
JavaScript写的炫光波动效果,看到一些Flash效果不错,用JS也模拟一下,还有很多不完善的地方,给各位参考参考。
肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-20 5万+
文章目录一、实现线性渐变的文字二、制作文字阴影效果三、制作文字模糊发散效果四、制作3D立体文字五、以两种不同颜色显示文字六、制作镂空文字七、实现文字的图案填充效果八、模拟古诗垂直显示文本九、实现文字的倾斜效果十、实现文字的荧光闪烁效果十一、实现文字的舞台灯光效果十二、制作发光文字十三、实现立体旋转的文字十四、文字翻转动画效果十五、实现火焰文字十六、实现文字的闪烁效果十七、上下摇摆的文字动画效果十八、制作跳跃的文字动画十九、实现文字水纹效果二十、实现文字水平往复循环滚动二十一、使用SVG创建空心虚线线条文字二
css特效文字
qq_21383977的博客
06-03 750
文字背后播放视频 mix-blend-mode。
CSS文字效果
wDeveloper的博客
05-07 3896
CSS文字效果前言默认效果阴影无模糊添加模糊不同方向叠加无模糊文字描边（text-shadow实现）不同方向叠加有模糊文字发光第一种3d效果特殊阴影沉浸式文字文字描边（-webkit-text-stroke）渐变文字常规渐变刚性渐变条纹文字另一种3d字体背景分割文字段落默认效果单行不换行竖排文字添加线一添加线二添加线三分栏字符间距行间距 前言 最近读诗，分享一句诗：“凭君莫话封侯事，一将功成万骨枯”。开始正文，今天实现的效果，如图： 以上主要用了text-shadow、background-clip，-
CSS几种常见的文字动态效果
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-29 6984
不啰嗦了,酷酷的字体，希望能够帮助到那个你！
每天一个CSS小特效，文字闪烁——【钢铁侠：爱你三千遍】
weixin_62542181的博客
06-08 1万+
CSS特效——文字闪烁，I love you 3000
冰与火之歌-大陆全景图地图.rar
03-13
权利的游戏，冰与火之歌-大陆全景图地图.rar 高清9000*6050，7.14MB
炫光特效，模拟迁徙效果的echarts
12-13
echarts最新的版本中这种炫酷的效果实现起来比较麻烦，这个资源里是html和js都有，直接点击index.html就可以看到效果，可以无缝对接到项目里。 炫光特效，模拟迁徙效果
《冰与火之歌_权力的游戏》高清图片-JPG&PNG&PSD素材下载.zip
12-28
《冰与火之歌：权力的游戏》高清图片-JPG&PNG&PSD素材下载 冰与火之歌、权力的游戏、电影海报素材、电视剧、美剧海报素材
autobeat_冰与火之舞_
10-01
通过自输入时间序列获取Autoplay效果
【CSS】grid 布局一行自动填充，每行最大限定px
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-23 271
【代码】【CSS】grid 布局一行自动填充，每行最大限定px。
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
开源服务指南
04-23 345
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 487
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【React】CSS 局部样式
最新发布
小秀的博客
04-26 122
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
用echarts生成图表插件炫光的分布地图动画特效
06-07
好的，您想了解有关使用echarts生成图表插件炫光的分布地图动画特效的相关信息，是吗？ 首先，您需要安装echarts。可以通过npm进行安装，命令如下： ``` npm install echarts --save ``` 然后，您可以使用echarts中的Map组件来绘制地图。Map组件支持各种地图类型，例如世界地图、中国地图、省级地图等。 接下来，您可以使用炫光特效来使地图更加生动。炫光特效可以通过在系列中添加effect属性来实现。例如： ```javascript series: [{ type: 'scatter', coordinateSystem: 'geo', data: [...], symbolSize: 12, label: { show: true, position: 'right' }, itemStyle: { color: '#ffeb7b' }, emphasis: { label: { show: true } }, // 添加炫光特效 rippleEffect: { brushType: 'stroke', period: 4, scale: 6 } }] ``` 最后，您可以使用动画特效来使炫光效果更加生动。可以通过在系列中添加animation属性来实现。例如： ```javascript series: [{ type: 'scatter', coordinateSystem: 'geo', data: [...], symbolSize: 12, label: { show: true, position: 'right' }, itemStyle: { color: '#ffeb7b' }, emphasis: { label: { show: true } }, rippleEffect: { brushType: 'stroke', period: 4, scale: 6 }, // 添加动画特效 animationDurationUpdate: 1000, animationEasingUpdate: 'quinticInOut' }] ``` 以上就是使用echarts生成图表插件炫光的分布地图动画特效的相关信息。希望能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值