juejin.cn![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
是崔先森啊
web前端工程师
获得徽章 9
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
#每天一个知识点# 提⾼webpack构建速度的几种方法：
1、多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
2、通过 externals 配置来提取常⽤库
3、利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
4、使⽤ Happypack 实现多线程加速编译
5、使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
6、使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
1、多⼊⼝情况下，使⽤ CommonsChunkPlugin 来提取公共代码
2、通过 externals 配置来提取常⽤库
3、利⽤ DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引⽤但是绝对不会修改的npm包来进⾏预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。
4、使⽤ Happypack 实现多线程加速编译
5、使⽤ webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采⽤了多核并⾏压缩来提升压缩速度
6、使⽤ Tree-shaking 和 Scope Hoisting 来剔除多余代码
展开
2
1
#每天一个知识点# CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
典型的CDN系统由下面三个部分组成：
分发服务系统： 最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache设备的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本的指标。
负载均衡系统： 主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡（GSLB）和本地负载均衡（SLB）。全局负载均衡主要根据用户就近性原则，通过对每个服务节点进行“最优”判断，确定向用户提供服务的cache的物理位置。本地负载均衡主要负责节点内部的设备负载均衡
运营管理系统： 运营管理系统分为运营管理和网络管理子系统，负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作，包含客户管理、产品管理、计费管理、统计分析等功能。
典型的CDN系统由下面三个部分组成：
分发服务系统： 最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache设备的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本的指标。
负载均衡系统： 主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡（GSLB）和本地负载均衡（SLB）。全局负载均衡主要根据用户就近性原则，通过对每个服务节点进行“最优”判断，确定向用户提供服务的cache的物理位置。本地负载均衡主要负责节点内部的设备负载均衡
运营管理系统： 运营管理系统分为运营管理和网络管理子系统，负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作，包含客户管理、产品管理、计费管理、统计分析等功能。
展开
评论
点赞
#每天一个知识点# 媒体查询（media queries）是CSS3引入的一项功能，用于根据设备的特性和属性，针对不同的媒体类型或媒体特征，为页面提供不同的样式规则和布局设置。
基本语法：媒体查询使用@media规则来定义，可以将其放置在CSS文件的顶部或嵌套在其他样式规则内部，如下：
@media mediaType and (mediaFeature) {
/* 样式规则和布局设置 */
}
mediaType：指定媒体类型，如all（所有设备）、screen（屏幕设备）或print（打印设备）等。
mediaFeature：指定媒体特征，如width（视口宽度）、height（视口高度）或orientation（设备方向）等。
以下是一个示例的媒体查询：
@media screen and (max-width: 768px) {
/* 样式规则和布局设置 */
}
其意思是，当设备为屏幕设备并且视口宽度不超过768px时，应用其中的样式规则和布局设置。
媒体特征：用于指定媒体查询条件，以便针对不同的设备和特征进行样式调整。以下是一些常见的媒体特征：
width：视口宽度。
height：视口高度。
max-width：视口最大宽度。
min-width：视口最小宽度。
device-width：设备屏幕宽度。
device-height：设备屏幕高度。
orientation：设备方向（横向或纵向）。
示例代码：
/* 当视口宽度小于等于600px时应用样式 */
@media screen and (max-width: 600px) {
/* 样式规则和布局设置 */
}
/* 当设备宽度为360px且纵向排列时应用样式 */
@media all and (device-width: 360px) and (orientation: portrait) {
/* 样式规则和布局设置 */
}
媒体类型：用于指定不同的设备或输出介质类型
all：所有设备
screen：屏幕设备，如电脑、手机等
print：打印设备
speech：语音合成器
媒体查询使得我们可以根据设备的特性和属性来定制不同的页面样式和布局可以创建响应式设计。这有利于提供用户体验、增加页面的可访问性和提升网站的可维护性。
基本语法：媒体查询使用@media规则来定义，可以将其放置在CSS文件的顶部或嵌套在其他样式规则内部，如下：
@media mediaType and (mediaFeature) {
/* 样式规则和布局设置 */
}
mediaType：指定媒体类型，如all（所有设备）、screen（屏幕设备）或print（打印设备）等。
mediaFeature：指定媒体特征，如width（视口宽度）、height（视口高度）或orientation（设备方向）等。
以下是一个示例的媒体查询：
@media screen and (max-width: 768px) {
/* 样式规则和布局设置 */
}
其意思是，当设备为屏幕设备并且视口宽度不超过768px时，应用其中的样式规则和布局设置。
媒体特征：用于指定媒体查询条件，以便针对不同的设备和特征进行样式调整。以下是一些常见的媒体特征：
width：视口宽度。
height：视口高度。
max-width：视口最大宽度。
min-width：视口最小宽度。
device-width：设备屏幕宽度。
device-height：设备屏幕高度。
orientation：设备方向（横向或纵向）。
示例代码：
/* 当视口宽度小于等于600px时应用样式 */
@media screen and (max-width: 600px) {
/* 样式规则和布局设置 */
}
/* 当设备宽度为360px且纵向排列时应用样式 */
@media all and (device-width: 360px) and (orientation: portrait) {
/* 样式规则和布局设置 */
}
媒体类型：用于指定不同的设备或输出介质类型
all：所有设备
screen：屏幕设备，如电脑、手机等
print：打印设备
speech：语音合成器
媒体查询使得我们可以根据设备的特性和属性来定制不同的页面样式和布局可以创建响应式设计。这有利于提供用户体验、增加页面的可访问性和提升网站的可维护性。
展开
评论
2
#每天一个知识点# 3D转换是CSS3中的一项功能，用于对元素进行三维空间的变换操作，使得元素可以在页面中以立体的形式展示，并实现平移、旋转、缩放和倾斜等效果。
基本变换函数：CSS3提供了一些基本的3D变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate3D：平移元素，改变元素在三维空间的位置。
scale3D：缩放元素，改变元素在三维空间的尺寸。
rotate3D：旋转元素，改变元素在三维空间的方向。
skew3D：倾斜元素，改变元素在三维空间的形状。
这些变换函数可以单独应用，也可以组合使用。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate3D(50px, 50px, 0);
}
/* 缩放元素 */
div {
transform: scale3D(1.5, 1.5, 1.5);
}
/* 旋转元素 */
div {
transform: rotate3D(1, 1, 1, 45deg);
}
/* 倾斜元素 */
div {
transform: skew3D(30deg, 20deg, 0);
}
复合变换：通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的3D变换效果
div {
transform: translate3D(50px, 50px, 0) rotate3D(1, 1, 1, 45deg) scale3D(1.5, 1.5, 1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
透视效果：通过设置perspective属性，可以为元素创建三维场景，并影响其变换效果。
.container {
perspective: 1000px;
}
.element {
transform: rotateY(45deg);
}
以上示例中，通过给容器设置透视属性，使得元素在旋转时具有透视效果。
3D转换可以为网页元素创建逼真的三维效果。通过平移、旋转、缩放和倾斜等操作，我们可以在网页中实现令人惊叹的交互体验，使得用户界面更加生动、富有创意和吸引人。
基本变换函数：CSS3提供了一些基本的3D变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate3D：平移元素，改变元素在三维空间的位置。
scale3D：缩放元素，改变元素在三维空间的尺寸。
rotate3D：旋转元素，改变元素在三维空间的方向。
skew3D：倾斜元素，改变元素在三维空间的形状。
这些变换函数可以单独应用，也可以组合使用。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate3D(50px, 50px, 0);
}
/* 缩放元素 */
div {
transform: scale3D(1.5, 1.5, 1.5);
}
/* 旋转元素 */
div {
transform: rotate3D(1, 1, 1, 45deg);
}
/* 倾斜元素 */
div {
transform: skew3D(30deg, 20deg, 0);
}
复合变换：通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的3D变换效果
div {
transform: translate3D(50px, 50px, 0) rotate3D(1, 1, 1, 45deg) scale3D(1.5, 1.5, 1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
透视效果：通过设置perspective属性，可以为元素创建三维场景，并影响其变换效果。
.container {
perspective: 1000px;
}
.element {
transform: rotateY(45deg);
}
以上示例中，通过给容器设置透视属性，使得元素在旋转时具有透视效果。
3D转换可以为网页元素创建逼真的三维效果。通过平移、旋转、缩放和倾斜等操作，我们可以在网页中实现令人惊叹的交互体验，使得用户界面更加生动、富有创意和吸引人。
展开
1
1
#每天一个知识点# 2D转换（2D Transform）是CSS3中的一个功能，用于对元素进行平移、缩放、旋转和倾斜等二维变换操作，从而改变元素在页面上的位置、尺寸和方向等。
基本变换函数：
CSS3提供了一些基本的2D变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate：平移元素，改变元素的位置。
scale：缩放元素，改变元素的尺寸。
rotate：旋转元素，改变元素的方向。
skew：倾斜元素，改变元素的形状。
这些变换函数可以单独应用，也可以组合使用。
变换函数的一般语法如下：
transform: function(value);
其中，function为变换函数名称，value为对应函数的参数值。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate(50px, 50px);
}
/* 缩放元素 */
div {
transform: scale(1.5);
}
/* 旋转元素 */
div {
transform: rotate(45deg);
}
/* 倾斜元素 */
div {
transform: skew(30deg, 20deg);
}
复合变换：通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的变换效果。多个变换函数会按照从左到右的顺序依次应用。
div {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
变换原点：用于指定元素变换的参考点，默认情况下，变换的参考原点是元素的中心点。
可以使用transform-origin属性来定义变换原点的位置。
div {
transform-origin: 50% 50%;
}
上述示例代码将元素的变换原点设置为其中心点。
2D转换是一个强大的CSS功能，通过平移、缩放、旋转和倾斜等操作，可以实现丰富的2D变换效果。通过组合使用不同的变换函数，我们可以创建出各种复杂的变换效果，为网页添加动态和交互性。
基本变换函数：
CSS3提供了一些基本的2D变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate：平移元素，改变元素的位置。
scale：缩放元素，改变元素的尺寸。
rotate：旋转元素，改变元素的方向。
skew：倾斜元素，改变元素的形状。
这些变换函数可以单独应用，也可以组合使用。
变换函数的一般语法如下：
transform: function(value);
其中，function为变换函数名称，value为对应函数的参数值。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate(50px, 50px);
}
/* 缩放元素 */
div {
transform: scale(1.5);
}
/* 旋转元素 */
div {
transform: rotate(45deg);
}
/* 倾斜元素 */
div {
transform: skew(30deg, 20deg);
}
复合变换：通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的变换效果。多个变换函数会按照从左到右的顺序依次应用。
div {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
变换原点：用于指定元素变换的参考点，默认情况下，变换的参考原点是元素的中心点。
可以使用transform-origin属性来定义变换原点的位置。
div {
transform-origin: 50% 50%;
}
上述示例代码将元素的变换原点设置为其中心点。
2D转换是一个强大的CSS功能，通过平移、缩放、旋转和倾斜等操作，可以实现丰富的2D变换效果。通过组合使用不同的变换函数，我们可以创建出各种复杂的变换效果，为网页添加动态和交互性。
展开
评论
点赞
#每天一个知识点# 多列布局（columns）是CSS3中一种用于创建多列文本布局的功能。它可以将文本内容分割成多个列，使得文本在页面上以多列排布的形式展示，有效地利用页面空间，提升阅读体验。
基本语法：
columns: column-width column-count;
column-width：指定每列的宽度。可以使用具体的长度值（如px、em、rem）或百分比值来表示。
column-count：指定要创建的列数。可以使用一个正整数来表示，也可以使用关键词auto来根据父容器的宽度自动计算列数。
以下是一个示例的多列布局：
div {
columns: 200px 3;
}
该样式将创建一个多列布局，每列宽度为200px，共分为3列。
列间距：
可以使用column-gap属性来定义列与列之间的间距。
div {
column-gap: 20px;
}
上述示例代码将定义列间距为20px。
分割规则：
默认情况下，多列布局会对文本内容进行自动平衡分割，使得每列的内容长度尽可能相等。可以使用column-fill属性来调整分割规则。
column-fill: balance（默认值）：平衡分割，使每列内容尽可能均匀。
column-fill: auto：自动分割，每列的内容长度根据实际需要进行调整。
div {
column-fill: auto;
}
上述示例代码将使用自动分割规则。
除了上述基本属性外，多列布局还可以使用其他一些属性来进一步控制布局效果，例如：
column-rule：指定列之间的分隔线样式。
column-span：指定某个元素跨越多列。
break-before、break-after和break-inside：指定分页行为，控制列的换行和分页效果。
多列布局可以通过灵活配置列宽、列数和列间距来实现各种不同风格的多列文本布局，如报纸式排版、多栏导航等。它在更好地展示大量文本内容和提供更好的阅读体验方面具有重要作用。
基本语法：
columns: column-width column-count;
column-width：指定每列的宽度。可以使用具体的长度值（如px、em、rem）或百分比值来表示。
column-count：指定要创建的列数。可以使用一个正整数来表示，也可以使用关键词auto来根据父容器的宽度自动计算列数。
以下是一个示例的多列布局：
div {
columns: 200px 3;
}
该样式将创建一个多列布局，每列宽度为200px，共分为3列。
列间距：
可以使用column-gap属性来定义列与列之间的间距。
div {
column-gap: 20px;
}
上述示例代码将定义列间距为20px。
分割规则：
默认情况下，多列布局会对文本内容进行自动平衡分割，使得每列的内容长度尽可能相等。可以使用column-fill属性来调整分割规则。
column-fill: balance（默认值）：平衡分割，使每列内容尽可能均匀。
column-fill: auto：自动分割，每列的内容长度根据实际需要进行调整。
div {
column-fill: auto;
}
上述示例代码将使用自动分割规则。
除了上述基本属性外，多列布局还可以使用其他一些属性来进一步控制布局效果，例如：
column-rule：指定列之间的分隔线样式。
column-span：指定某个元素跨越多列。
break-before、break-after和break-inside：指定分页行为，控制列的换行和分页效果。
多列布局可以通过灵活配置列宽、列数和列间距来实现各种不同风格的多列文本布局，如报纸式排版、多栏导航等。它在更好地展示大量文本内容和提供更好的阅读体验方面具有重要作用。
展开
评论
点赞
#每天一个知识点# 变换（transform）是CSS3中的一个功能，用于对元素进行平移、缩放、旋转和倾斜等变换操作，从而改变元素在页面上的位置、尺寸、形状和方向等。
CSS3提供了一些基本的变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate：平移元素，改变元素的位置。
scale：缩放元素，改变元素的尺寸。
rotate：旋转元素，改变元素的方向。
skew：倾斜元素，改变元素的形状。
这些变换函数可以单独应用，也可以组合使用。
变换函数的一般语法如下：
transform: function(value);
其中，function为变换函数名称，value为对应函数的参数值。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate(50px, 50px);
}
/* 缩放元素 */
div {
transform: scale(1.5);
}
/* 旋转元素 */
div {
transform: rotate(45deg);
}
/* 倾斜元素 */
div {
transform: skew(30deg, 20deg);
}
复合变换：
通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的变换效果。多个变换函数会按照从左到右的顺序依次应用。
div {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
变换原点：
变换原点用于指定元素变换的参考点，默认情况下，变换的参考原点是元素的中心点。
可以使用transform-origin属性来定义变换原点的位置。
div {
transform-origin: 50% 50%;
}
上述示例代码将元素的变换原点设置为其中心点。
transform是一个强大的CSS功能，通过平移、缩放、旋转和倾斜等操作，可以使元素在页面中具有更多的自由度和动态效果。通过组合使用不同的变换函数，我们可以实现各种复杂的变换效果，创造出独特的用户体验。
CSS3提供了一些基本的变换函数，可以通过将这些函数应用于元素的transform属性来实现相应的变换效果。以下是一些常用的基本变换函数：
translate：平移元素，改变元素的位置。
scale：缩放元素，改变元素的尺寸。
rotate：旋转元素，改变元素的方向。
skew：倾斜元素，改变元素的形状。
这些变换函数可以单独应用，也可以组合使用。
变换函数的一般语法如下：
transform: function(value);
其中，function为变换函数名称，value为对应函数的参数值。
以下是一些示例用法：
/* 平移元素 */
div {
transform: translate(50px, 50px);
}
/* 缩放元素 */
div {
transform: scale(1.5);
}
/* 旋转元素 */
div {
transform: rotate(45deg);
}
/* 倾斜元素 */
div {
transform: skew(30deg, 20deg);
}
复合变换：
通过将多个变换函数连续应用于一个元素的transform属性，可以实现复杂的变换效果。多个变换函数会按照从左到右的顺序依次应用。
div {
transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
上述示例代码将对元素进行平移、旋转和缩放，首先平移元素，然后旋转元素，最后再对元素进行缩放。
变换原点：
变换原点用于指定元素变换的参考点，默认情况下，变换的参考原点是元素的中心点。
可以使用transform-origin属性来定义变换原点的位置。
div {
transform-origin: 50% 50%;
}
上述示例代码将元素的变换原点设置为其中心点。
transform是一个强大的CSS功能，通过平移、缩放、旋转和倾斜等操作，可以使元素在页面中具有更多的自由度和动态效果。通过组合使用不同的变换函数，我们可以实现各种复杂的变换效果，创造出独特的用户体验。
展开
评论
点赞
#每天一个知识点# CSS3的动画（animation）是一种用于在网页中创建可交互和动态效果的功能。通过CSS的动画属性和关键帧规则，我们可以定义元素的动态变化，比如移动、旋转、缩放等，并且可以设置动画的持续时间、循环次数以及时间函数等。
基本语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name：指定动画的名称，需要与关键帧规则中定义的名称相对应。
duration：指定动画的持续时间，可以使用秒（s）或毫秒（ms）作为单位。
timing-function：指定动画的时间函数，用于控制动画的速度曲线。常见的时间函数有：linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等。
delay：指定动画的延迟时间，即动画开始前的等待时间。
iteration-count：指定动画的循环次数，默认为1，可以使用关键词infinite表示无限循环。
direction：指定动画的播放方向，可以是normal（正常播放）、reverse（反向播放）或alternate（来回播放）。
fill-mode：指定动画在开始和结束时的样式状态，可以是none（无样式变化）、forwards（保持最后一帧的样式）、backwards（保持第一帧的样式）或both（同时应用forwards和backwards）。
play-state：指定动画的播放状态，可以是running（播放）或paused（暂停）。
关键帧规则：
关键帧规则用于定义动画开始、中间和结束时元素的样式状态。
@keyframes name {
from { /* 起始样式 */ }
to { /* 终止样式 */ }
/* 或者使用百分比表示时间点 */
0% { /* 开始样式 */ }
50% { /* 中间样式 */ }
100% { /* 结束样式 */ }
}
在关键帧规则中，我们可以使用from和to关键字或使用百分比来表示时间点，然后定义相应时间点的样式状态。
基本语法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name：指定动画的名称，需要与关键帧规则中定义的名称相对应。
duration：指定动画的持续时间，可以使用秒（s）或毫秒（ms）作为单位。
timing-function：指定动画的时间函数，用于控制动画的速度曲线。常见的时间函数有：linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等。
delay：指定动画的延迟时间，即动画开始前的等待时间。
iteration-count：指定动画的循环次数，默认为1，可以使用关键词infinite表示无限循环。
direction：指定动画的播放方向，可以是normal（正常播放）、reverse（反向播放）或alternate（来回播放）。
fill-mode：指定动画在开始和结束时的样式状态，可以是none（无样式变化）、forwards（保持最后一帧的样式）、backwards（保持第一帧的样式）或both（同时应用forwards和backwards）。
play-state：指定动画的播放状态，可以是running（播放）或paused（暂停）。
关键帧规则：
关键帧规则用于定义动画开始、中间和结束时元素的样式状态。
@keyframes name {
from { /* 起始样式 */ }
to { /* 终止样式 */ }
/* 或者使用百分比表示时间点 */
0% { /* 开始样式 */ }
50% { /* 中间样式 */ }
100% { /* 结束样式 */ }
}
在关键帧规则中，我们可以使用from和to关键字或使用百分比来表示时间点，然后定义相应时间点的样式状态。
展开
评论
点赞
#每天一个知识点# 渐变背景（linear-gradient和radial-gradient）是CSS3中用于创建平滑过渡色彩效果的功能。它可以根据指定的起点、终点和颜色停止点，将一个或多个颜色平滑地渐变到另一个颜色，从而创建出各种美丽的背景效果。
线性渐变（linear-gradient）：线性渐变是在两个点之间线性插值颜色的一种渐变方式。
线性渐变的语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：指定渐变的方向，可以使用角度（如90deg表示从上到下，0deg表示从左到右），也可以使用关键词（如to left表示从右到左）。
color-stop：控制颜色的停止点，在渐变中指定颜色和位置。可以使用具体的颜色值（如#ff0000）或预定义的关键词（如red）。
以下是一个示例的线性渐变背景：
div {
background: linear-gradient(to right, #ff0000, #00ff00);
}
该样式将创建一个从左到右的线性渐变背景，从红色（#ff0000）过渡到绿色（#00ff00）。
径向渐变（radial-gradient）：径向渐变是从一个中心点向外辐射状地渐变颜色的一种渐变方式。
径向渐变的语法如下：
background: radial-gradient(shape, start-color, ..., last-color);
shape：指定渐变的形状，可以是圆形（circle）或椭圆形（ellipse）。
start-color：径向渐变的起始颜色。
last-color：径向渐变的终止颜色。
以下是一个示例的径向渐变背景：
div {
background: radial-gradient(circle, #ff0000, #00ff00);
}
该样式将创建了一个圆形的径向渐变背景，从红色（#ff0000）过渡到绿色（#00ff00）。
通过调整起始颜色、终止颜色和颜色停止点，以及使用不同的渐变方向和形状，可以创建出各种丰富多彩的渐变背景效果。渐变背景在网页设计中经常用于提升页面的视觉吸引力和美感。
线性渐变（linear-gradient）：线性渐变是在两个点之间线性插值颜色的一种渐变方式。
线性渐变的语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：指定渐变的方向，可以使用角度（如90deg表示从上到下，0deg表示从左到右），也可以使用关键词（如to left表示从右到左）。
color-stop：控制颜色的停止点，在渐变中指定颜色和位置。可以使用具体的颜色值（如#ff0000）或预定义的关键词（如red）。
以下是一个示例的线性渐变背景：
div {
background: linear-gradient(to right, #ff0000, #00ff00);
}
该样式将创建一个从左到右的线性渐变背景，从红色（#ff0000）过渡到绿色（#00ff00）。
径向渐变（radial-gradient）：径向渐变是从一个中心点向外辐射状地渐变颜色的一种渐变方式。
径向渐变的语法如下：
background: radial-gradient(shape, start-color, ..., last-color);
shape：指定渐变的形状，可以是圆形（circle）或椭圆形（ellipse）。
start-color：径向渐变的起始颜色。
last-color：径向渐变的终止颜色。
以下是一个示例的径向渐变背景：
div {
background: radial-gradient(circle, #ff0000, #00ff00);
}
该样式将创建了一个圆形的径向渐变背景，从红色（#ff0000）过渡到绿色（#00ff00）。
通过调整起始颜色、终止颜色和颜色停止点，以及使用不同的渐变方向和形状，可以创建出各种丰富多彩的渐变背景效果。渐变背景在网页设计中经常用于提升页面的视觉吸引力和美感。
展开
评论
点赞