4件你不知道CSS可以做的事

àì夳堔傛蜴生んèń 2022-09-09 11:54 164阅读 0赞

![df5c99d3221d2e15c08eba6a36da8247.png][]

英文 | https://javascript.plainenglish.io/4-things-you-didnt-know-css-can-do-13b364296570

翻译 | 小爱

## **1、逐帧动画** ##

有时，我们需要使用元素上的原始 CSS 过渡属性很难实现动画。

例如，使用原始 CSS 属性实现进度指示器或移动图标可能是一项艰巨的任务。在这种情况下，基于图像的逐帧动画是一个完美的选择，你可以灵活地完成所有类型以及具有挑战性的任务。

> *注意：我们也可以在大多数情况下使用 GIF，但使用 GIF 有一定的限制。它们仅限于256 个调色板，而且它们不能具有alpha 透明度，当 GIF 下方有项目时，这会成为一个大问题。GIF 非常适合便携式任务，但不是实验的推荐选择。*

例如：

假设我们在一个 PNG 文件中拥有所有动画帧，如果我们应用一些基本的 CSS 动画属性，我们的结果可能如下所示。

![1240652a1fdf6bfd36af598a0f324c44.png][]

目前，你可以观察到当前结果，仅显示动画的第一帧，但是，如果我们添加不同的背景位置值，我们会注意到-100px 0为我们提供第二帧，-200px 0为第三帧，并且很快。

![eab1d8ae0076204dac2504b8cfc76a6a.png][]

然而，在我们的 CSS 中仍然缺少一些东西，为了获得最终结果，我们必须使用steps()计时函数，它将整个动画以帧为单位除以我们指定的数。

![26cabb8316cb80d0892816abece07ed8.png][]

请注意，在steps()计时函数中，我使用了用于动画的动画帧数 (7)。

## **2、连字符** ##

如果你希望你的网站具有更准确的排版，那么这个适合你。如果你想在应用程序中提供更高的可读性，CSS中的连字符是一项你应该了解的基本功能，因为连字符允许将单词分解为具有较少空格的音节，从而使文本看起来更自然。

> *注意：在 CSS 文本级别 3 中，引入了一个新属性：接受值的连字符：none、manual和auto。*

例如：

如果你简单地应用值为auto的hyphens属性，它对于连字符就足够了，但是，你需要通过lang HTML 属性声明一种语言。

![4bebc698279bf3a96196afee0c713a1b.png][]

## **3、粘性页脚** ##

你一定遇到过 Web 应用程序中页脚的问题，在这种情况下，具有任何块级样式的页脚在处理较长的内容时，可以正常工作，但在页面较短时会中断。

> *此问题出现在内容短于视口高度减去页脚高度的较短页面上。*

![a629ec90d234091b05e7e5afabde10ea.png][]

**使用 Flexbox 作为灵活的解决方案**

Flexbox 非常适合解决这种情况，你只需要几行 CSS 和一些 Flexbox开发经验即可。

例如：

首先，你需要将display: flex应用于<body>元素，因为它是所有其他主要块的父元素，以切换所有元素的弹性框布局。

此时，你的页面外观大致与之前的Flexbox内容相同，为了使我们的方法有效，我们需要在 <body> 上指定min-height为100vh ，这将至少占据视口的整个高度。

此时，效果还没有实现，因为<body>中每个盒子的高度仍然是内在确定的。为了解决这个问题，我们必须向<main>容器应用一个大于 0 （在我们的例子中为1）的flex值。

![7e9a29eef5c258bf32a358c1c3fb0aa5.png][]

## **4、自定义下划线** ##

CSS 一直是一项令人惊讶的学习技能，CSS能做的事情的数量是我们不知道的。在 CSS 中，你必须擅长文本属性，但是，当涉及到使用其他文本或更好的东西时，你可以以自己很酷的方式使用CSS。

例如：

文本中的下划线可以使用很少的 CSS 行来实现，但请确保你没有使用任何边框底部技巧。因为该解决方案不会遵循我们对文本所期望的一切。

![414f728aa5e78fc94ec79159d0f4357b.png][]

请注意，我们已经使用 text-shadow 属性来解决下划线（如 p、l、q 等）的问题了。

最后，感谢你的阅读，如果你觉得今天的内容对你有帮助，请记得分享给你身边的小伙伴，一起来学习进步。

**学习更多技能**

**请点击下方公众号**

![41aeb2afcb45c8fbcec77a128c4ad1dd.gif][]

![389dc625876cfdb2ee900faaa4ac06dd.png][]

![3e9155395a391776cbaaa7e4cc54aa52.png][]

[df5c99d3221d2e15c08eba6a36da8247.png]: /images/20220829/b3ba9d592055479fb52d69c3a86db695.png
[1240652a1fdf6bfd36af598a0f324c44.png]: /images/20220829/87e6fb21a69e49df8a2080fe97bf03d6.png
[eab1d8ae0076204dac2504b8cfc76a6a.png]: /images/20220829/d344681b643441ad8e4e153cf152660d.png
[26cabb8316cb80d0892816abece07ed8.png]: /images/20220829/e8621dd23fd04f40a6a3def9461c02dd.png
[4bebc698279bf3a96196afee0c713a1b.png]: /images/20220829/3addc6fe026545b4a1c6d54e2d3672bb.png
[a629ec90d234091b05e7e5afabde10ea.png]: /images/20220829/6dd32618d0d04b4eb3f30c802f114829.png
[7e9a29eef5c258bf32a358c1c3fb0aa5.png]: /images/20220829/3eda8acdcd0f4d8d972ea67ef5909c07.png
[414f728aa5e78fc94ec79159d0f4357b.png]: /images/20220829/cf8c2ce5d10849fe8524512fcda7d824.png
[41aeb2afcb45c8fbcec77a128c4ad1dd.gif]: /images/20220829/f751704b6b9a498e9f009c2d9fbbf478.png
[389dc625876cfdb2ee900faaa4ac06dd.png]: /images/20220829/80778e0beecd4b09a3daae8a6e961211.png
[3e9155395a391776cbaaa7e4cc54aa52.png]: /images/20220829/137e647fee90474da100ca26407c6941.png