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

NO.1
效果预览

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

适用场景:

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

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

img

NO.2
最初样式

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

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

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

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

<!-- 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);
}

添加了阴影的效果更立体

NO.6
设置炫光

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

<!-- 演示炫光 -->
<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;
}

到此冻结文字完成

NO.7
完整代码

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

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

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

NO.8
更换纹理图片

可以把冰冻纹理换成木纹

也可以换成火焰

还可以换成水波

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

NO.9
tips

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

END.