前言
在前端面试中，CSS是一个非常重要的考察点，因为它是构建网页界面和用户交互的关键技术之一。年也算过完了，又到了春招的时候，这是一个检验成果的阶段，接下来我会陆续分享一下我在面试时所遇到的与CSS有关的问题。祝大家在接下来的春招中取得一个好成绩！
css3中常见的动画有哪些？怎么实现？
1. transition : 当其他属性值发生变更时，控制该值变更所花费的时间以及变更曲线
2. transform ： 用于做容器的旋转，平移，缩放，倾斜等动画
3. animation ： 控制容器动画的关键帧
举例
1.Transition（过渡动画） ：
- Transition 允许在元素属性值变化时平滑地过渡到新值。这些属性包括但不限于颜色、大小、位置等。
- 它控制变化的时间以及变化的曲线（如匀速、加速、减速等），从而实现流畅的动画效果。
- 语法示例：
.box { transition: width 1s ease-in-out; } .box:hover { width: 200px; }
当鼠标悬停在类为 "box" 的元素上时，宽度从原来的值过渡到200px，变化时间为1秒，采用缓入缓出的速度曲线。
2.Transform（变换动画） ：
- Transform 提供了一组方法来对元素进行旋转、缩放、平移和倾斜等变换，可以创建各种独特的动画效果。
- 它可以通过 CSS 的 transform 属性实现，并可以与过渡动画结合使用。
- 语法示例：
.box { transform: rotate(45deg) scale(1.5); transition: transform 1s ease-in-out; } .box:hover { transform: rotate(90deg) scale(2); }
当鼠标悬停在类为 "box" 的元素上时，元素将以45度的角度旋转并放大1.5倍，变化时间为1秒，采用缓入缓出的速度曲线。
3.Animation（关键帧动画） ：
- Animation 允许您定义一系列的关键帧，以控制动画的每一步。您可以定义动画的持续时间、速度曲线、循环次数等。
- 通过 @keyframes 规则，可以定义动画的具体变化过程。
- 语法示例：
@keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(100px); } } .box { animation: slide 2s ease-in-out infinite alternate; }
- 上述动画在2秒内，元素从初始位置向右平移100像素，然后反向返回，无限循环。速度曲线为缓入缓出。
如何显示一个小于10像素的文字
浏览器默认的文字大小是16px,我们如何显示一个小于10像素的文字呢？在最新版的谷歌浏览器中，我们是可以任意设置文字的大小的，可以使文字大小小于10，而在大部分浏览器中，是不能设置文字的大小小于10像素的，最多被设置为10像素，当面试官问到我们这个问题时，该如何解决呢？
<div class="box">Hello World</div>
1.Zoom（缩放） ：
zoom是一种非标准的 CSS 属性，仅在部分浏览器中有效（如 IE 和 Edge）。- 它可以用来缩放元素的尺寸，包括文字的尺寸。
- 语法示例：
.box { font-size: 20px; zoom: 0.25; /* 缩放文字为原来的25%大小 */ }
- 通过设置
zoom属性为小于1的值，可以使文字变小。
2.Transform：Scale（变换：缩放） ：
transform: scale(xxx);是 CSS3 中的属性，适用于现代浏览器。- 它通过缩放元素的比例来改变其大小，同样可以用于文字。
- 语法示例：
.box { font-size: 20px; transform: scale(0.25); /* 缩放文字为原来的25%大小 */ }
- 通过设置
scale值为小于1的值，可以使文字变小。
两者的区别在于，zoom 是应用于元素的全局缩放，包括尺寸、内边距、外边距等，而 transform: scale() 仅应用于元素的视觉表现，不会影响布局。
无论您选择哪种方法，都可以通过设置合适的值来显示小于10像素的文字。例如，通过将 zoom 或 transform: scale() 的值设置为0.25，可以将文字缩小到原来的25%大小。
我们可以通过使用这两种方法，将20px缩小为5px
