FE复习企划——4. CSS高级

最新推荐文章于 2025-11-17 19:30:58 发布

原创最新推荐文章于 2025-11-17 19:30:58 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

FE复习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS中的变换(CSSTransform)、过渡(CSSTransition)、动画(CSSAnimation)及其应用场景。从2D到3D的转换方法、过渡效果的设置和动画属性的配置都被逐一讲解。此外，还探讨了响应式设计的关键点，如设置viewport、图片尺寸调整、背景图片适应和媒体查询的使用，以及如何处理CSS的兼容性问题，确保在不同设备上的良好显示效果。

4.1 CSS Transform

none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

4.2 CSS Transition

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transition-property 指定应用过渡属性的名称。
transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。
transition-timing-function 属性用来建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。
transition-delay属性规定了在过渡效果开始作用之前需要等待的时间（延迟时间）。

4.3 CSS Animation

animation-name属性表示关键帧 @keyframes 的名字
animation-duration属性表示动画持续的。
animation-timing-function属性定义关键帧之间的过渡快慢。
animation-delay属性定义动画播放的延迟
animation-iteration-count属性定义动画重复的次数
animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。
animation-iteration-count CSS 属性定义动画在结束前运行的次数可以是1次无限循环.
animation-direction 属性定义动画播放的方向，正序播放、倒序播放、正反交替播放，

在这里插入图片描述

4.4 响应式设计

4.1设置viewport

视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts

在尺寸较大的设备中，在这些设备上，应用显示区域不一定是全屏的，viewport 是浏览器窗口的大小。
在大多数移动设备中，浏览器是全屏的，viewport 是整个屏幕的大小。
在全屏模式下，viewport 是设备屏幕的范围，窗口是浏览器窗口，浏览器窗口大小小于或等于视口的大小，并且文档是这个网站，文档的大小可比 viewport 长或宽。

4.2图片尺寸设置

max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

max-width 会覆盖width设置, 但 min-width设置会覆盖 max-width.

4.3背景图片设置

cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。
contain：缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。