前语

在前端面试中，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