文字效果集中营

马黑黑

马黑黑

41#代码：

<style>
.hxBox { margin: 50px auto 0; width: 180px; height: 180px; font-family: '楷体','微软雅黑'; font-size: 13px; }
.hxBox path { fill: none; }
.hxBox svg { display: block; overflow: visible; }
</style>

<div class="hxBox">
        <svg viewBox="0 0 100 100">
                <path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />
                <text>
                        <textPath xlink:href="#yuan">
                                君自故乡来，应知故乡事。来日绮窗前，寒梅著花未？
                        </textPath>
                </text>
        </svg>
</div>

马黑黑

41#说明：
svg 是一个全新的HTML5标签，所以另外开帖说明，不太难懂，感兴趣的朋友请移步：

https://www.huachaowang.com/foru ... 7692&extra=page%3D1

这里要说的有两点：

一、<svg viewBox="0 0 100 100">

svg 的 viewBox 属性有四个参数，min-x, min-y, w, h，参数可用空格或逗号隔开。min-x和min-y分别是最小x、y坐标值，w和h分别是宽度和高度。用 viewBox 属性的好处主要是 svg 图形的适应能力好，场景发生变化它也不会变形。而在专门开帖介绍相关svg的例子中，我都没用上viewBox属性，原因是能掌控所有尺寸就可以不用。

二、<path d="M 0, 50 a 50, 50 0 1, 1 0, 1 z" id="yuan" />

上一句，path标签的属性 d 用于编写路径参数，参数中，两两之间有的用逗号，有的用空格，看起来很混乱，但不影响执行，svg专业解析器（浏览器也集成有解析器）都认可。但严谨的写法应该是：

d="M 0 50 a 50 50 0 1 1 0 1 z"

或：d="M 0,50,a 50,50,0,1,1,0,1,z"

但 M 和 a 之后不能有逗号，不过可以在跟数子时也不要空格，M 0 50 或 M 0,50 可以写成 M0 50 或 M0,50

svg最初的设计不考虑普通人能否对它理解，svg代码是机器生成机制的代码，它有一套简洁但难懂的语法，但它的确简洁高效，已经陆续被人们使用。

红影

马黑黑 发表于 2022-3-10 22:03
嗯，现在需要的是想象力了

从黑黑的帖子里，看到了想象力的无边

红影

马黑黑 发表于 2022-3-10 22:04
这个，@keyframes的功劳

还能和动态结合起来用，真没想到

红影

马黑黑 发表于 2022-3-10 22:04
还行吧

发现文字用浅色系的，发光效果好。刚才试了个深色的，就差一些呢。
看起来颜色的搭配还是很有讲究的。

红影

马黑黑 发表于 2022-3-10 22:04
JS有时候可以很简洁

简洁高效，太厉害了。

红影

马黑黑 发表于 2022-3-11 08:08
本帖最后由 马黑黑 于 2022-3-11 08:11 编辑
.hxBox { margin: 50px auto 0; width: 180px; height: 180 ...

天啊，还能这样，以后写轱辘诗方便了

红影

马黑黑 发表于 2022-3-11 08:09
41#说明（占位）

等着看那些参数的含义和设定方法

马黑黑

红影 发表于 2022-3-11 11:19
等着看那些参数的含义和设定方法

我另外开帖子说明，已经发出一部分了，有空去看看

马黑黑

红影 发表于 2022-3-11 11:16
天啊，还能这样，以后写轱辘诗方便了

不过核心内容要理解一下才好在应用中懂得该修改哪些地方和值

马黑黑

红影 发表于 2022-3-11 11:15
简洁高效，太厉害了。

但是JS也可以让人头发都白了还不明就里

马黑黑

红影 发表于 2022-3-11 11:15
发现文字用浅色系的，发光效果好。刚才试了个深色的，就差一些呢。
看起来颜色的搭配还是很有讲究的。

当然，这方面的发现很重要

马黑黑

红影 发表于 2022-3-11 11:03
还能和动态结合起来用，真没想到

今后还将演示一些其他的 @keyframes 效果

马黑黑

红影 发表于 2022-3-11 11:03
从黑黑的帖子里，看到了想象力的无边

想象力某种程度上就是创造力，是生产力的一部分

马黑黑

君不見高堂明鏡悲白髮

马黑黑

56楼代码：

<style type="text/css">
.gg {
        font-family: '微软雅黑';
        font-weight: 900;
        font-size: 4rem;
        text-align: center;
        color: transparent;
        background-color: #e8a95b;
        background-clip: text;
        -webkit-background-clip: text;
        position: relative;
}
.gg::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine 5s infinite linear;
}
@keyframes shine {
        0% { background-position: 50% 0; }
        100% { background-position: -190% 0; }
}
</style>


<div style="margin: auto; width: 700px; height: 200px; background: #000; line-height: 200px;">
        <p class="gg" data-text="君不見高堂明鏡悲白髮">君不見高堂明鏡悲白髮</p>
</div>

马黑黑

57楼代码说明：

首先说说原理。这里，设置了一个类选择器和它的伪元素选择器，.gg，高光的意思。我们说过，伪元素是该元素的子元素，故此，二者都需要定义position属性，父元素relative，伪元素absolute。

父子元素都用上 background-clip: text 方法，即剪裁背景为 text，背景色为父元素所设定（background-color: #e8a95b;），这样，就只有文本能显示该背景色。然后伪元素略为复杂的线性背景渐变作为高光动画的元素，通过 @keyframes 动画 是shine 去改变背景的位置，达成动线性渐变背景来回游动的效果。

新知识点：伪元素的content值

代码中，我们不再像以前那样，content设置为空，我们给它一个值：

content: attr(data-text);

这个值是去读取父元素的 data-text 值，专门给它设计的。请看代码中的HTML部分，<p>标签除了有 class 属性，还以一个 data-text 属性，它的等号后面就是它的值，其值与p标签的内容是一模一样的。要呈现高亮渐变的动态文本效果，data-text 和 <p> 标签的内容必须有且应高度一致。

高亮文本<p>标签之外，我们还加了一个 div 标签，这个div的作用是给高亮文本一个背景，以增强或突出高亮文本特效。它定义 line-height 值是令文本垂直居中。

本例适用单行文本，字数不能太大，通常，logo、标题、欢迎语之类的场景可以用用。

马黑黑

56#的效果，我们把伪元素的left和top值改动一下下，比如 left 为 0，top 为 -1，不要变动太大，就有不同的效果：字发亮时会有向前突出的特效。原理，两个元素内容一致，原本无缝重叠在一起，现在将它们错开一点点，光影掠过时二者的些微错位就会照亮，字出现欠欠身子的模样。

你相信什麼你就成為什麼樣的人

马黑黑