code spliting_CSS和Spliting JS的可变字体动画

最新推荐文章于 2024-05-13 09:40:12 发布

cuotangu3718

最新推荐文章于 2024-05-13 09:40:12 发布

阅读量271

点赞数

文章标签： css java html python vue ViewUI

原文链接：https://css-irl.info/variable-font-animation-with-css-and-splitting-js/

版权

不久前，我在Codepen上制作了一个动画可变字体演示。在本文中，我将解释什么是可变字体，如何使用CSS设置字体的动画以及如何使用CSS和一点点Javascript产生呼吸效果。

演示地址

引入可变字体

可变字体是Web排版中令人兴奋的新发展。可变字体使我们可以从单个文件中加载所有变体，而不是使用多个字体文件来加载特定字体的不同变体。在大多数情况下，这是一个很大的性能提升（尽管文件本身往往比常规字体文件大，因此，如果实际需要，最好只使用可变字体）。

一种字体，多种变体

代替字体权重是唯一的在100的倍数的可用少数的（例如， font-weight: 600 ），可变的字体提供的值的范围中，所有从一个单一的文件。重量可以在该范围内的任何地方变化。因此， font-weight: 372是完全有效的！

变异轴

重量只是变化的轴之一（尽管可能是最常见的轴）。可变字体也可以带有不同的轴。有许多已注册的轴，它们对应于四个字母的标签：

重量（ wght ）
宽度（ wdth ）
斜体（ ital ）
倾斜（ slnt ）
光学尺寸（ opsz ）

这些对应于CSS属性和值：

font-weight
font-stretch
font-style
font-style
font-optical-sizing

并非所有可变字体都包含所有这些变化轴。许多只包含一两个。

也可以使用font-variation-settings属性访问它们。此属性使我们不仅可以调整标准轴，还可以调整自定义轴。因此，可以通过两种方式指定font-weight ：

font-weight: 372;

要么

font-variation-settings: 'wght' 372;

我们可以使用'font-weight'为不支持可变字体的浏览器提供后备功能。

自定义轴

自定义轴为类型设计师提供了无限的创造力！自定义变化轴实际上可以是任何东西–某些字体（例如x-height）对于字体来说可能很常见，但是还有更多的创造性可能性。

可以使用font-variation-settings属性访问自定义轴，但对于非标准轴，其四个字母的标记名称必须为大写。可变字体运动通过NM类型提供了一种定制的轴线称为空间，其控制字母形式的curvture。

font-variation-settings: 'wght' 200undefined 'SPAC' 118;

尝试在此演示中使用不同的轴：

演示地址

使用CSS为可变字体制作动画

font-variation-settings是可动画的，并且因为它涵盖了值的范围而不是100的增量，所以我们可以通过简单CSS过渡或关键帧动画获得一些非常好的效果。字体IBM Plex Sans具有两个变化轴：重量和宽度。以下代码设置两个轴的1s循环动画：

h1{
	font-variation-settings:'wght' 100 ,'wdth' 85 ;
	animation: breathe 4000ms infinite forwards ;
}

@keyframes breathe{
	60%{
		font-variation-settings:'wght' 700 ,'wdth' 100 ;
	}

	100%{
		font-variation-settings:'wght' 100 ,'wdth' 85 ;
	}
}

这使我们的文本呼吸呼入和呼出的效果！

演示地址

另外，这可能是一个很好的悬停效果，带有过渡效果而不是动画效果。

错开动画

而不是让整个文本以相同的速度动画，最好让我们的字母顺序按顺序进行动画处理。我们可以将文本的每个字母包装在<span>并在每个字母上设置animation-delay ：

< h1>
	< span> B </ span>
	< span> r </ span>
	< span> e </ span>
	< span> a </ span>
	< span> t </ span>
	< span> h </ span>
	< span> i </ span>
	< span> n </ span>
	< span> g </ span>
</ h1>

h1 span:nth-child(2){
	animation-delay: 400ms ;
}

h1 span:nth-child(3){
	animation-delay: 800ms ;
}

h1 span:nth-child(4){
	animation-delay: 1200ms ;
}
/* etc...*/

编写代码会很费力（尽管我们可以使用Sass来帮助我们），而且如果我们以后决定更改文本内容的话，也就很难维护。

但是，如果我们不介意只使用一点点Javascript，那么有个很棒的库Splitting.js非常适合此！

分裂

拆分的主要用例是为文本设置动画，尽管也可以拆分网格和布局以获得一些很酷的效果。要使用它，我们需要在我们的项目中包括该库，然后在我们要设置动画的元素上设置data-splitting属性：

< h1data-splitting> Breathing </ h1>

现在我们需要编写的JS非常简单：

Splitting()

然后拆分将文本元素拆分为一系列<span> ，每个<span>都有一个类，一个数据属性和一个带有字符索引值的自定义属性定义，然后我们可以在CSS中进行访问：

< spanclass=" word "data-word=" Breathing " style="--word-index: 0 ;">
	< spanclass=" char "data-char=" B " style="--char-index: 0 ;"> B </ span>
	< spanclass=" char "data-char=" r " style="--char-index: 1 ;"> r </ span>
	< spanclass=" char "data-char=" e " style="--char-index: 2 ;"> e </ span>
	< spanclass=" char "data-char=" a " style="--char-index: 3 ;"> a </ span>
	< spanclass=" char "data-char=" t " style="--char-index: 4 ;"> t </ span>
	< spanclass=" char "data-char=" h " style="--char-index: 5 ;"> h </ span>
	< spanclass=" char "data-char=" i " style="--char-index: 6 ;"> i </ span>
	< spanclass=" char "data-char=" n " style="--char-index: 7 ;"> n </ span>
	< spanclass=" char "data-char=" g " style="--char-index: 8 ;"> g </ span>
</ span>

为了创建顺序动画，我们可以使用calc()计算来自定制属性的每个字母的animation-delay值：

h1 .char{
	--delay:calc((var( --char-index ) + 1 ) * 400ms );
	animation: breathe 4000ms infinite both ;
	animation-delay:var( --delay );
}

这大大减少了我们需要编写CSS，这意味着我们可以稍后更改文本，并且仍然可以使动画完美地运行！

翻译自: https://css-irl.info/variable-font-animation-with-css-and-splitting-js/

cuotangu3718

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
code spliting_CSS和Spliting JS的可变字体动画

不久前，我在Codepen上制作了一个动画可变字体演示。在本文中，我将解释什么是可变字体，如何使用CSS设置字体的动画以及如何使用CSS和一点点Javascript产生呼吸效果。引入可变字体可变字体是Web排版中令人兴奋的新发展。可变字体使我们可以从单个文件中加载所有变体，而不是使用多个字体文件来加载特定字体的不同变体。在大多数情况下，这是一个很大的性能提升（尽管文件本身往往比...
复制链接

扫一扫