如何使用img标签和picture标签的srcset/sizes属性 用响应式图片优化图片显示响应式图片是一种 HTML 技术，它定义了如何在响应式网站上处理图片。通过使用 HTML 的“响应式图片”，您只需使用 HTML 标签即可提供针对查看设备定制的图片。1.您可以仅使用 HTML 处理响应式图片，而无需使用 CSS 或 JavaScript。2.根据设备的不同，图片可以以最佳“尺寸”显示。3.您可以根据设备以最佳“外观”整理图片。显示不同尺寸图片的问题在响应式网站上显示图片时，您需要准备适合所有设备宽度和分辨率的图片，例如智能手机、平板电脑、笔记本电脑和台式电脑。如何创建不同尺寸的图片并显示不同的图片？响应式图像中的图像分离要在响应式图像中执行上述图像排序过程，img请在 HTML 标记中写入三条信息。图像文件路径图像文件宽度网页显示图片时的宽度HTML 代码如下。需要注意的是img标签中指定的srcset属性和属性sizes。<img srcset="images/small.jpg 320w, images/medium.jpg 640w, images/large.jpg 1280w" src="images/large.jpg" sizes="(max-width:1280px) 100vw, 1280px">图片文件路径和宽度是srcset属性图像文件的路径和宽度写入img标签属性中。请注意，“图像文件的宽度”不是“图像在网页上显示时的宽度” 。srcset srcset="images/small.jpg 320w, images/medium.jpg 640w, images/large.jpg 1280w"在路径和宽度之间插入半角空格。宽度单位是（宽度描述符）px而不是w。这告诉浏览器small.jpg这是一个 320px 图像、medium.jpg一个 640px 图像和一个 1280px 图像。large.jpg显示图像时的宽度是sizes一个属性sizes属性中描述了要显示的图像的宽度。可以结合媒体查询指定多个宽度。如果要在显示器为 1280px 或以下时以屏幕宽度显示图像，否则以 1280px 显示图像，如下。sizes="(max-width:1280px) 100vw, 1280px"vw表示与视口宽度的比例。100vw表示 100% 的视口宽度。如果指定sizes该属性100vw，图像大小通常会根据窗口宽度的变化而变化。然而，100vw即使你只指定Safari，它也不会随着窗口宽度而改变。如果您想根据包括 Safari 在内的所有浏览器的窗口宽度更改图像大小，最好在 CSSwidth属性中指定它。%浏览器将为您选择最好的图像传统的图像响应能力，开发者需要根据环境来决定显示哪张图像，比如当屏幕宽度为1280px以上时large.jpg，以及当屏幕宽度小于1280px且设备像素比为2时对于响应式图像，由浏览器决定显示哪个图像。medium.jpg根据“图像文件路径/宽度和所需图像宽度”信息，根据客户端环境显示最佳图像。开发人员不再需要担心哪个屏幕宽度应该显示哪个图像。需要注意的是，“根据环境确定最佳图像”的机制因浏览器而异。例如，行为如下。Chrome：如果缓存了大图片文件，即使屏幕宽度变窄也不会加载小图片。Firefox：每次屏幕宽度发生变化时，加载适合屏幕宽度尺寸的图像。Safari：根据首次打开屏幕的宽度缓存图像文件，即使屏幕宽度改变也不会重新加载图像。当简单地使用不同尺寸的图像时，该方法没有任何特殊问题，但是当例如您想要为手机显示不同的裁剪图像时，则不能使用该方法。控制图像显示方式的最佳视图如果显示器足够宽，这就是最佳视图，但如果显示器很窄，则不是最佳视图。在像这样的主视觉中，主题是兔子的脸。对于窄显示屏，最好显示仅裁剪脸部的图像。每个设备看起来不同的图像进行排序并选择最佳的图像呈现方式的方法。如上所述，单独使用srcset属性和属性sizes来强制显示每个设备宽度的图像是不可能的。picture元素可以作为在一定条件下强制切换图像的一种方法。使用picture的元素标签展示最佳图片picture使用元素，开发人员可以根据屏幕分辨率、屏幕宽度、图像格式等分发任意图像。picture我将向您展示如何编写元素。<picture> <source media="(max-width:400px)" srcset="sp.jpg 400w" sizes="100vw"> <source media="(max-width:600px)" srcset="tab.jpg 600w" sizes="100vw"> <img src="pc.jpg"> </picture>picture标签由多个source标签和一个标签组成。为标签指定三个属性。imgsourcemedia属性（媒体查询）srcset属性sizes属性浏览器评估每个source标签的属性，如果找到匹配项，则显示该属性指定的图像。如果未找到匹配项或浏览器不支持该元素，则显示标签图像。需要指定标签。media srcset picture imgpicture示例520px当图像小于屏幕宽度时cropped.jpg显示裁剪图像 ()。如果大于屏幕宽度，则将其重写为标签，520px同时重用之前的处理。<picture> <source media="(max-width:520px)" srcset="images/cropped.jpg 640w" sizes="100vw"> <source srcset="images/medium.jpg 640w, images/large.jpg 1280w" sizes="(max-width:1280px) 100vw, 1280px"> <img src="images/large.jpg" alt=""> </picture>

使用Vite构建现代化、快速的开发环境 Vite是 2020 年推出的新前端构建工具。因为开发者是 Evan You，Vue.js 的创建者，所以有时会被误解为它是一个 Vue.js 工具，但有很多流行的工具可用，从纯 JavaScript (vanilla JS) 到 Vue.js、React 和Svelte 是一个多功能工具，可以在各种环境中使用.Vite特点及基本机制在Web开发中，手动编写所有JavaScript文件并从HTML文件中一一读取它们已经变得不那么常见了。您可能会使用某种工具进行“构建”，它组合并压缩划分的模块。使用需要编译（转译）的语言也变得很常见，例如 TypeScript 和 Sass。Vite是本次构建中使用的工具。我们简单介绍一下它的特点。① 使用现代浏览器提供的机制（ES modules和 Dynamic import/ES模块和动态导入）可以快速启动/更新Vite最大的优点是速度。运行时，webpack 等传统工具会编译并组合项目中的所有文件以创建一个称为捆绑包的程序。虽然有效率化的机制，但一般来说，项目越大，处理时间就越长。另一方面，Vite采用了一种称为“ES modules”的模块划分机制，在必要时只编译必要的文件并将其发送到浏览器。这种机制甚至允许大型项目立即启动和更新（大多数情况下几百毫秒）。ES 模块可用于 IE11 以外的大多数浏览器。通过使用标准函数，您可以提高速度，而无需引入复杂的机制。② TypeScript、Vue/React等库无需配置即可立即使用Vite的主要理念是“开箱即用”。 Vite 对于大多数一般开发来说不需要任何麻烦的设置。您可以在几乎相同的时间内使用 Vue.js 和 TypeScript 开始开发一切内容，从简单的纯 JavaScript 网页到成熟的 Web 应用程序。另外它支持热重载（开发过程中文件更改时检测差异并重新加载浏览器的功能）。基本用法Vite 非常容易使用。大部分时候都是创建项目时引入使用（Vite + TypeScript + Vue / Vite + TypeScript + Vue），也可以不使用框架构建项目.参考 Vite 自定义设置Vite的理念是“开箱即用”。您只需选择模板即可获得完全实用的开发环境。但在实际的产品开发和业务使用中，往往需要进行设置的定制。在这种情况下，您可以通过在项目的根目录中创建文件来自定义设置vite.config.js（如果是 TypeScript 项目）。vite.config.tsvite.config.ts import { defineConfig } from 'vite' export default defineConfig({ // 其他配置增加 })可配置的项目在官方的 《配置Vite 》中列出。由于设置比较多，我们先介绍一些常用的基本设置。server.port：开发时避免端口号冲突Vite的开发服务器3000默认使用端口号。如果一个端口正在使用，则会自动使用另一个空闲端口，但为了避免不必要的混乱，如果您同时处理多个项目，最好确定端口号。import { defineConfig } from 'vite' export default defineConfig({ server: { port: 8080 } })如果您只想暂时更改它，npm run dev -- --port 1111也可以使用命令行选项指定它。配置文件相对路径Vite/在加载脚本、图片等资源时使用绝对URL开头。如果部署目标不是 Web 服务器的根目录，会导致路径错误可以指定任何 URL，但base像下面的示例中那样./指定会更好、更灵活。import { defineConfig } from 'vite' export default defineConfig({ base: './' })resolve.alias：允许您使用导入路径@components/中的别名使用 Vue CLI 创建的项目能够使用以 开头的路径import HelloWorld from '@/components/HelloWorld.vue'，例如默认情况下。@/要在 Vite 中使用相同的功能，resolve.alias您需要配置设置。在vue-ts模板创建的项目的vite.config.ts中添加别名设置import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@/': path.join(__dirname, './src/') } } })

JS 动画库介绍 在 HTML 中实现动画的机会有很多，例如网站交互和 UI 行为。许多人可能使用 CSS Transition 来实现 HTML 元素的简单动画。但在WebGL、Canvas、SVG等以JavaScript为主要实现的制作工作中，存在无法使用CSS Transition而需要动画库的情况。JavaScript 动画库有很多种，因此很难决定使用哪一个。在本文中，我们将介绍 HTML JavaScript 库。本次介绍的七个JS库GSAP v3.12Popmotion v11.0Tween24.js v1.4Anime.js v3.2.1TweenJS (CreateJS) v1.0.0jQuery v3.7.0Velocity.js v1.5.2Tween.js v21.0Web Animations APIGSAPgsap.to(".rect", { duration: 3, // 秒指定 x: 700, rotate: 360, repeat: -1, ease: Cubic.easeInOut });虽然GSAP的容量有点大，为65KB，但是可以加载模块。与其他库相比，与包管理器 npm 和 TypeScript 的使用也领先一步。PopmotionPopmotion是一个轻量级 JS 库，于 2015 年左右出现。其特点是API底层，JS库容量较小，只有15KB。缓动共有三种类型： easeIn、easeOut、 。easeInOut提供的API并不多，需要自己控制DOM操作之类的东西，而且文档也不全面const element = document.querySelector('.rect') popmotion.animate({ from: { x: 0, rotate: 0, }, to: { x: 800, rotate: 360, }, onUpdate(param) { element.style.transform = `translateX(${param.x}px) rotate(${param.rotate}deg)`; }, duration: 3000, repeat: Infinity, ease: popmotion.easeInOut });Tween24.js“ Tween24.js ”是一个补间库，其特点是使用方法链编写。许多动画库使用对象类型来指定属性，这往往需要大量输入，但通过方法链，您可以使用编辑器的代码完成功能顺利编写。const target = document.querySelector(".rect"); Tween24.loop(0, Tween24.serial( Tween24.tween(target, 3, Ease24._3_CubicInOut) .x(700) .rotation(360), Tween24.prop(target) .x(0) .rotation(0) ) ).play();Tween24.js 为 103KB。还提供了包管理器 npm 和 TypeScript 的类型定义。Anime.js - 轻量级且 API 丰富的库Anime.js是一个2016年出现的JS库。其特点是可以通过简单的指定直观地指定动画。anime({ targets: ".rect", translateX: 800, rotate: 360, duration: 3000, loop: true, easing: "easeInOutCubic" });它的并发执行性能不如GSAP和TweenJS，因此不适合移动很多对象。TweenJS - 可以与 Adob​​e Animate CC 链接TweenJS是 CreateJS 套件的一部分，也用于Adob​​e Animate CC的 HTML5 Canvas 导出。其吸引力在于，即使使用 Animate CC 的时间线创建的复杂补间也可以再现。一般动画库都会指定绝对时间，例如毫秒，但 TweenJS 不仅允许指定绝对时间，还可以指定帧数。它还支持帧速率变化，因此具有易于与 24fps 制作的动画同步的优点。createjs.CSSPlugin.install(); createjs.Ticker.framerate = 60; var element = document.querySelector(".rect"); element.style.left = "0px"; createjs.Tween.get(element, { loop: true }).to( { left: 800 }, 3000, // 时间 createjs.Ease.cubicInOut // 运动类型 );jQueryjQuery.animate()具有动画功能。它很容易安装，因为只需加​​载 jQuery 即可使用，但不可能做任何复杂的事情，因为只有几种缓动（加速/减速）类型，并且几乎没有选项规范。位置、角度等transform没有捷径，也很不方便。$(".rect") .css({ left: 0 }) .animate( { left: 800 }, 3000, "linear", function() { tween(); } );Velocity.js - 替换 jQuery.animeteVelocity.js是一个库，也可以用作 jQuery 插件（它可以在没有 jQuery 的情况下使用）。animate()它取代了jQuery函数，比 jQuery 具有更好的性能和更多的功能。由于它解释 CSS 单元，因此对于控制 DOM 非常有用。const element = document.querySelector(".rect"); Velocity( element, { translateX: 800, rotateZ: 360 }, { easing: "ease", duration: 3000, loop: true } );Tween.js - 纯 JS 库Tween.js与 TweenJS 名称相似，但它是一个不同的库。它的功能不多，特点是容量小。我们致力于简洁的设计，没有任何额外的功能。不支持 CSS 单元自动完成，因此如果您尝试像下面的示例那样控制 HTML 元素，代码将会很复杂。它不适合 CSS，因此最好使用它来创建 WebGL 或 Canvas。const element = document.querySelector(".rect"); const param = { x: 0, rotation: 0 }; // new TWEEN.Tween(param) .to({ x: 800, rotation: 360 }, 3000) .repeat(Infinity) // .easing(TWEEN.Easing.Cubic.InOut) // .onUpdate(function () { // 更新 element.style.transform = `translateX(${param.x}px) rotate(${param.rotation}deg)`; }) .start(); loop(); function loop() { requestAnimationFrame(loop); TWEEN.update(); }Web Animations API - 原生动画APIWeb Animations API是一个允许您对 DOM 元素进行动画处理的 API。格式很简单。它的特点是比 CSS Transitions 和 CSS Animations 等类似标准技术更容易用 JavaScript 控制。const element = document.querySelector(".rect"); element.animate( { transform: [ "translateX(0px) rotate(0deg)", "translateX(800px) rotate(360deg)" ] }, { duration: 3000, iterations: Infinity, direction: "normal", easing: "ease" } );Web Animations API 是 HTML 元素的函数，因此它不能与 WebGL 或 Canvas 一起使用。

CSS、SVG 和 Canvas 蒙版 CSS 蒙版用CSS表达蒙版的优点是简单并且只需要很少的代码。实现蒙版表达式的 CSS 属性包括以下内容。mask-imageclip-pathbackground-clip覆盖图像mask-image 可以在属性中设置遮罩的图像。下图是使用星形图像裁剪图像的示例。相关属性包括：mask-repeat：重复蒙版图像mask-position：遮罩位置mask-size：遮罩图像尺寸.mask-img { mask-image: url("./images/star.svg"); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 50%; /* Chrome, Safari用 */ -webkit-mask-image: url("./images/star.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: 50%; }裁剪路径接下来clip-path我们就来介绍一下属性。诸如（圆）、（椭圆）和（多边形）之类的属性可以clip-path作为参数给出。换句话说，如果遮罩具有简单的形状，则不需要遮罩图像。通过使用 polygon，您可以轻松地将元素修剪成三角形、五边形和平行四边形等难以裁剪的形状。.clip { width: 20px; height: 20px; background-color: skyblue; clip-path: circle(50px at center); }clip-pathmask-image您还可以指定图像 URL 作为参数。path您还可以通过剪切内联编写的 SVG 形状或添加 来表达曲线。背景裁剪background-clip是属性。专门描述了background-clip按属性进行的裁剪。background-clip: textbackground-clip:text带有 的元素被内部文本元素挖空。在下面的示例中，背景图像被剪切出单词“TEXT”。这时候如果有文字颜色的话，就不会被遮罩了，所以color: transparent指定一下。<div> <p>TEXT</p> </div>div { background-image: url("./bg.png"); background-clip: text; -webkit-background-clip: text; color: transparent; }SVG遮罩对于 SVG 中的蒙版，请为蒙版准备一个 SVG 元素。您可以在标签内准备一个标签，并将在其中绘制的形状用作遮罩图像。下面显示了示例代码。这是将黑色矩形剪成圆形的示例。我将标签属性指定为绘制矩形的标签属性。这允许您使用标记内写入的元素进行掩码。maskid<svg> <defs> <!-- 遮罩图形 --> <mask id="circle"> <circle cx="100" cy="100" r="80" fill="#fff"></circle> </mask> </defs> <!-- 被裁剪的元素 --> <rect x="0" y="0" width="100%" height="100%" mask="(#circle)" fill="#000"/> </svg>与标签类似，您也可以使用标签进行屏蔽。在这里，也为要遮盖的一侧和要遮盖的一侧编写SVG。<svg> <defs> <!-- 遮罩图形 --> <clipPath id="circle"> <circle cx="100" cy="100" r="80" fill="#000"></circle> </clipPath> </defs> <!-- 被裁剪的元素 --> <rect x="0" y="0" width="100%" height="100%" clip-path="(#circle)"/> </svg>剪辑路径和蒙版之间的区别“mask”和“clip-path”可用于 CSS 和 SVG 中的遮罩。这里我们将解释它们之间的区别。两者的挖空目的是一致的，但主要的区别在于是否可以应用透明信息。 “mask”应用掩模图像的透明度信息，但“clip-path”则不应用。例如，如果将两者应用到具有透明度信息的图像，则应用了透明度信息的蒙版和未应用透明度信息的剪辑路径之间将出现以下差异。此外，在 SVG 中，您可以将标签上的属性设置为 CSS 属性。您可以选择亮度蒙版mask-type（根据蒙版图像的亮度确定蒙版的透明度）和alpha 蒙版（根据蒙版图像的透明度信息确定蒙版的透明度）。具体mask-type: luminance如下mask-type: alpha。默认情况下，它是亮度蒙版，因此蒙版图像越接近黑色，它就越透明。<svg> <defs> <!-- 遮罩类型：发光 --> <mask id="circle" style="mask-type: luminance"> <circle cx="100" cy="100" r="80" fill="#fff"></circle> </mask> </defs> </svg>也可以使用 CSS 进行指定，如下所示。mask { mask-type: luminance; }对于 CSS 蒙版，mask-mode您可以使用 属性选择亮度蒙版/alpha 蒙版，但截至 2021 年，仅支持 Firefox。总而言之，它看起来像这样：mask：可以用透明度来表示。有使用蒙版图像的亮度作为透明度的亮度蒙版，以及仅使用透明度的 alpha 蒙版。剪辑路径：无法透明表达对于使用透明度的表达式使用蒙版，对于具有清晰轮廓的表达式使用剪辑路径。

CSS阴影 box-shadow CSS 是添加阴影最常见的方法box-shadow，但还有许多其他技术和方法。阴影的处理不仅是页面中的一个重要主题，也是逐年变化的设计趋势中的一个重要主题。例如，可以利用影子技术的独特表现有很多，比如前段时间流行的长影子和Neumorphism（软UI）。使用 CSS 创建的长阴影（图像顶部）和同态（图像底部）基本的盒子阴影这是用 CSS 添加阴影的最基本属性box-shadow。box-shadow ，允许您为元素的框区域（边框和内部）绘制阴影。box-shadow:inset h-shadow v-shadow blur spread color ; inset 可选。从外层的阴影（开始时）改变阴影内侧阴影 h-shadow 必需的。水平阴影的位置。允许负值 v-shadow 必需的。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的大小 color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表仅用这个基本形式就可以实现多种表现方式。/* 1. 基本 box-shadow */ .basic1 { box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5); } /* 2. inset内阴影 */ .basic2 { box-shadow: inset 0 10px 25px 0 rgba(0, 0, 0, .5); } /* 3. 阴影透明度 */ .basic3 { box-shadow: 0 10px 25px 0 rgba(60, 194, 235, 0.5); } /* 4. 模糊为0，也可以表现为边框 */ .basic4 { box-shadow: 15px 15px 0px 0 rgb(60, 194, 235); }叠加多个阴影/* 1. 用6层box-shadow制作的平滑阴影 */ .layer1 { box-shadow: 0 1.9px 2.5px rgba(0, 0, 0, 0.057), 0 5px 6.1px rgba(0, 0, 0, 0.076), 0 10.1px 11.4px rgba(0, 0, 0, 0.086), 0 19.2px 19.8px rgba(0, 0, 0, 0.092), 0 38.4px 34.8px rgba(0, 0, 0, 0.1), 0 101px 74px rgba(0, 0, 0, 0.13); } /* 2. 对每个阴影应用不同方向和颜色的例子 */ .layer2 { box-shadow: -10px 10px 25px rgba(230, 180, 15, 0.9), 10px -10px 25px rgba(8, 131, 161, 0.9) } /* 3. 重叠着不模糊的影子，纸重叠在一起的表现 */ .layer3 { box-shadow: 0 20px 0 -10px rgb(198, 224, 231), 0 40px 0 -20px rgb(105, 171, 209), 0 60px 0 -30px rgb(27, 115, 165) }乍一看，分层多个阴影似乎是一种特殊的技术。然而，如果你仔细观察，你会发现它经常被用在你日常经常看到的设计中。仅用 box-shadow 是无法完美的！ 使用伪元素的原始阴影box-shadow很容易，但有很多事情因为它的简单而你无法做到。 下图（左）显示了在方格图案上投射的box-shadow浅蓝色。 根据表现的不同，这是可能的，但我认为右边的影子作为影子更真实。使用伪元素创建逼真的阴影box-shadow因为它只是模糊指定的颜色框，所以根据阴影颜色和背景的组合，阴影可能看起来不自然。 为了使阴影看起来更自然filter，mix-blend-mode可以使用 CSS 和。 (*请注意filter，mix-blend-mode不支持IE).box::after { /* 用模拟元素制作相同大小的box，用position:absolute显示在背面 */ content: ''; display: block; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; /* ①用阴影颜色填充伪元素框 */ background-color: rgb(42, 159, 226); /* ②用模糊过滤器模糊 */ filter: blur(15px); /* ③调整位置和尺寸 */ transform: translateY(10px) scale(1.05); /* ④用乘法重叠 */ mix-blend-mode: multiply; }① 用阴影颜色填充伪元素，② 使用模糊滤镜模糊它们，③ 调整位置和大小，④ 最后使用乘法将它们组合起来。比只一行字box-shadow麻烦多了。另一方面，它还有允许自由定制的优点，例如调整伪元素的形状和大小以及使用不同的滤镜。让我们看一些例子。为渐变和图像添加阴影box-shadow与阴影颜色不同，您可以在伪元素的背景上显示任何您喜欢的内容，无论是渐变还是图像。通过模糊此阴影来创建阴影，您可以创建与网站的配色方案和背景图像相匹配的令人印象深刻的阴影。尝试混合模式正片叠底最适合常规、逼真的阴影，但您可以通过尝试不同的混合模式来创造更多效果。1.(mix-blend mode: color-dodge)2.(mix-blend mode: color=burn)3.(mix-blend-mode: hard-light)常用的mix-blend-mode值normal: 正常混合模式，不会产生混合效果。multiply: 正片叠底模式，会让重叠的部分颜色变得更暗。screen: 滤色模式，与正片叠底相反，重叠部分会变得更亮。overlay: 叠加模式，根据背景色的明暗进行混合，背景亮则变亮，背景暗则变暗。darken: 变暗模式，选取两层中的较暗颜色作为混合色。lighten: 变亮模式，选取两层中的较亮颜色为混合色。color-dodge: 颜色减淡模式，通过降低对比度使背景色减淡。color-burn: 颜色加深模式，通过增加对比度使背景色加深。hard-light: 强光模式，类似于叠加，但对比度更高。soft-light: 柔光模式，类似于强光，但效果更柔和。如上例所示，您color-dodge可以使用减淡 ( ) 来表达发光，或者使用加深 ( color-burn) 或叠加 ( overlay) 添加生动的阴影，或者通过组合背景和阴影来创建各种表现。另一种阴影：投影还有一件事你不应该忘记drop-shadow。box-shadow，它在元素周围的矩形区域上投射阴影，drop-shadow效果更好，因为它生成的阴影与元素的实际绘制内容相匹配。 “绘图内容”包括位图和 SVG 等图像、文本、子元素等一切内容。当您想要向所看到的形状添加阴影drop-shadow时使用。看起来就像 box-shadow，但有一点不同drop-shadow是CSS过滤器的一种，所以写法略有不同，但是box-shadow可以设置filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();filter: drop-shadow(10px 10px 5px rgb(0, 0, 0))然而，有一些差异需要注意。即使指定相同的值，阴影的外观box-shadow也不会匹配。即使形状只是一个矩形。这是因为box-shadow和drop-shadow的第三模糊量的计算方法不同。当值相同时，drop-shadow看起来更模糊box-shadow关键字不能inset用于drop-shadowbox-shadow可以指定为第四个数字的扩展半径drop-shadow不能与 一起使用。如果指定，主要浏览器会认为整个内容0无效drop-shadow，因此不应指定。drop-shadow（CSS 过滤器）在 IE 中不可用。 （还有一种方法是使用原始扩展filter: progid:DXImageTransform.Microsoft.DropShadow，但本文不会解释。）box-shadow下图是相同参数值设置下的drop-shadow对比。虽然它们很相似，但不能简单地替换，因此在需要设计和编码之间高度一致性的情况下必须小心。如果你担心阴影重叠，可以用投影来解决它对于图像、SVG 徽标等很有用drop-shadow，但这不是唯一的用途。下一个示例是使用 CSS 动画制作的加载旋转器。通过旋转8 个圆圈（元素）创建动画。在两个旋转器中，box-shadow带有阴影的那个是左侧的那个。有一些区别值得关注。每个圆圈都有一个阴影，因此重叠的圆圈看起来并不连为一体。由于阴影是旋转的，因此阴影的角度会发生变化。另一方面，在右侧drop-shadow，整个图像都有阴影。您可以看到，通过一次向多个旋转图像添加阴影可以避免上述问题。“当我将使用 box-shadow 投射阴影的元素靠近放置时，阴影会重叠！在这种情况下，drop-shadow您也许可以通过使用 box-shadow 来解决该问题。 ”一些问题和解决方法box-shadow虽然它易于使用并且允许多种表达方式drop-shadow，但由于它内部执行复杂的绘图计算，因此很容易出现麻烦。阴影动画有些断断续续（Safari）box-shadow我认为在很多情况下，您希望使用它来在元素悬停时添加浮动效果。如果您不假思索地在这样的场景中制作动画box-shadow，transition则阴影部分的动画可能会显得卡顿（帧速率降低）。这种现象主要box-shadow发生在阴影绘制区域发生变化时，例如改变模糊半径。尽管绘图不会完全相同，但如果平滑度很重要，则可以通过不更改模糊半径和设置透明度动画来避免此问题。/* 1. 在轨迹中更改阴影的模糊半径 */ .box1{ transition: box-shadow 2s ease-out, transform 2s ease-out; } .box1:hover { box-shadow: 0 15px 10px 5px rgb(0, 0, 0); transform: translateY(-10px); } /* 2. 仅在轨迹中更改阴影透明度 */ .box2{ transition: box-shadow 2s ease-out, transform 2s ease-out; box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 0); } .box2:hover { box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 1); transform: translateY(-10px); }当悬停时投射阴影时，周围区域会丢失（Safari）悬停时drop-shadow也会出现问题。在动画期间不显示阴影 (Safari)

CSS Transform 介绍（2D 版） 什么是 CSS 变换？CSS Transform 是作为在网页上快速绘制高级显示和动画的规范而创建的。变换基础知识（2D）有四种基本的 CSS 变换：平移、旋转、缩放和倾斜。通过组合这四种变换操作，您可以自由地移动元素。 虽然本文仅限于 2D 变换，但 CSS Transform 也可以执行伪 3D 变换。基础知识是相同的，所以让我们首先了解 2D 变换。基本操作translate:水平移动rotate:旋转scale:放大缩小skew:倾斜变形对于旋转以外的三个操作，有两种方法分别指定XY，或者一次指定它们。 基本上没有什么违反直觉的地方，只是偏差不同。 即使你像这样分解它，含义也不会改变，translate(100px, 200px)但它是与不同的转换。 skew本身使用频率并不高，所以没必要强迫自己去记住它，但是遇到问题的时候请记住它。translateX(100px) translateY(200px) skew(30deg, 15deg)skewX(30deg) skewY(30deg)translate(200px，100px) X方向Y方向translate(200px) translate(200px,0)translateX(200px)translateY(100px)合并操作基本转换操作可以任意组合使用。 以下示例将元素缩放 2 倍并顺时针旋转 45 度。#charactor { transform: rotate(45deg) scale(2); }还可以多次编写相同类型的转换。transform 可以在中编写多个变换操作，但必须注意顺序。translate rotate scale变形参考点除了合成顺序之外，一个重要元素是转换的参考点。 旋转和缩放是使用元素的中心作为参考隐式执行的，但实际上， 经常使用中心以外的参考。这可以在这种情况下使用 transform-origin transform-origin 是一个经常使用的有用功能，但它本身并不是一个特殊功能，就像translate移动操作的简写。 transform-origin: left top; X方向 Y方向 transform-origin: 50% 100%; transform-origin: 50px -100px#### 聚合操作 matrix transform您可以在 中编写任意数量的操作，因此乍一看，根据操作的数量，处理可能会变得越来越繁重。 实际上，多个变换操作一次聚合为一个变换操作matrix，并且该值（矩阵）用于一次执行所有变换操作。使用这种矩阵的图像变换称为仿射变换，广泛应用于图像处理领域。 transform: rotate(30deg) translate(100px, 100px) 转换为 transform: matrix(0.866,0.5,-0.5,0.866, 36.6,136.6) 浏览器本身会为您进行矩阵计算，因此您通常不需要了解如何计算它们。然而，重要的是要知道在这些矩阵计算中，多个变换操作被合并为一个。### CSS Transform 的常见问题 #### 添加 Transform 但是不起作用 同时添加多个分开的属性 会被覆盖掉此时需要写成一个/* 上偏移 */ .float { transform: translateY(-100px); } /* 倾斜 */ .tilt { transform: skewX(30deg); } /* 两个公用 */ .float.tilt { transform: translateY(-100px) skewX(30deg); }

CSS渐变 使用 CSS 创建渐变已经有一段时间了，但我认为很多人只是连接两种颜色。 或者也许您只是用生成器复制并粘贴它？事实上，通过将值设置得更细，您可以获得更丰富的表达，而不仅仅是渐变。如果你想一想，你可以只使用 CSS 来表达这样的东西。使用手动 CSS 实现应用程序示例的后半部分很困难，因此我使用 SCSS 编写它。使用SCSS可以让您顺利地执行单独使用CSS难以完成的处理，并且使用mixin功能很方便，因为它省去了您输入数据的麻烦。CSS 渐变类型由于 CSS 渐变处理颜色，background-color因此很容易使用属性，但background-image它们是值。此外，根据渐变的形状，有以下六个值。linear-gradient()：线性渐变repeating-linear-gradient()：重复线性渐变radial-gradient()：径向渐变repeating-radial-gradient()：重复径向渐变conic-gradient()：扇形渐变repeating-conic-gradient()：重复扇形渐变其中，除了 之外，conic-gradient()所有这些都repeating-conic-gradient()可以与现代浏览器一起使用。截至 2020 年 2 月，扇形渐变仅受 Google Chrome、Safari 和 Edge 79 或更高版本支持。CSS渐变的基本编写方法最简单的编写方法是指定两种颜色。background-image: linear-gradient(#f4c14e, #d36950);通过添加颜色，您可以使用该颜色创建渐变。background-image: linear-gradient(#6fb8d9, #f4c14e, #d36950);它从蓝色变为黄色，再变为橙色。这里的关键点是指定的颜色均匀分布并且变化是线性的（两种颜色之间距离的中点是两种颜色之间的中点）。指定方向 占比您可以通过指定路径点来更改颜色分布。具体来说，在颜色后指定 % 或 px。background-image: linear-gradient(#6fb8d9 50%, #f4c14e 80%, #d36950 90%);如果按照上面的方式指定，0%〜50%从顶部开始的位置将为蓝色，80%该位置将为黄色，该位置90%〜100%将为橙色。此外，由于您可以指定航路点的开始和结束位置，因此也可以实现带状渐变。background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 40% 70%, #d36950 80% 100%);当这样指定时0%〜30%，40%〜70%,80%〜100%部分将用纯色填充，30%〜40%,70%〜80%部分将用渐变填充。如果应用此并消除渐变部分，将创建条纹图案。background-image: linear-gradient(#6fb8d9 0% 30%, #f4c14e 30% 70%, #d36950 70% 100%);以上是线性渐变和径向渐变通用的符号。从这里，我们将解释线性和径向渐变的单独符号。线性梯度 渐变对于线性渐变，可以通过在开始时传递渐变方向（角度）来改变渐变的方向。 background-image: linear-gradient(45deg, #f4c14e, #d36950); background-image: linear-gradient(to bottom, #f4c14e, #d36950);45deg如果您指定 ，它将从左下角到右上角以 45 度角从黄色渐变到橙色。默认值为 180 度。除了指定频率外，to bottom to top to left to right还可以通过关键字（如字符）来指定。径向渐变形状和起始位置径向渐变允许您指定渐变的形状而不是角度。除非另有指定，否则渐变将是适合元素矩形的椭圆形。 （添加Viaway点是为了更容易理解渐变的形状）background-image: radial-gradient(#f4c14e 0% 40%, #d36950 60% 100%);默认关键字值为ellipse。circle牢记关键词，使渐变形状成为完美的圆形。background-image: radial-gradient(circle, #f4c14e 0% 40%, #d36950 60% 100%);渐变的形状现在是一个完美的圆形。您还可以使用进一步的语法at x坐标 y坐标将其插入到 shape 关键字之后来指定起始位置。background-image: radial-gradient(circle at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%);改变起始位置后，圆圈变大并被切断。这是因为默认情况下，灰度变化的程度是根据距圆心最远的顶点确定的。在上面的示例中，矩形的右下顶点100%就是值。100%有四个关键字指定这部分。您可以通过在形状后面插入该关键字来更改它。如果您使用在最近的边缘终止的关键字，closest-side它将如下所示：background-image: radial-gradient(circle closest-side at 100px 200px, #f4c14e 0% 40%, #d36950 60% 100%)可以使用以下四个关键字来指定结束。closest-side：在最靠近中心的一侧结束（椭圆的垂直和水平侧）closest-corner：将最靠近中心的顶点作为末端farthest-side：将距离中心最远的边缘（椭圆形的垂直和水平边缘）作为末端farthest-corner：将距离中心最远的顶点作为末端（默认值）下图显示了每个关键字。径向渐变的语法有点复杂，但看起来像这样：background-image: radial-gradient(形状 末端的关键字at x坐标 y坐标，颜色的经由点);重复梯度渐变CSS 渐变还包括重复渐变。repeating-linear-gradient()就是repeating-radial-gradient()这样。参数与基本线性/径向渐变相同，但不同之处在于路点是通过无限重复来填充的。background-image: repeating-linear-gradient(#f4c14e 0%, #d36950 50%);在上面的示例中50%，仅指定了该点之前的路点，但在该点之后将重复并填充渐变。 （从基本linear-gradient()情况50%开始，将全部为橙色）repeating-radial-gradient()也是如此。如果我们重复之前所说的话background-image: repeating-radial-gradient(circle closest-side at 100px 200px, #f4c14e, #d36950);closest-side被指定，因此它将是直到最近左侧的渐变的一个周期。相同的渐变以同心圆形式展开。您可以通过更改航路点的值来调整重复频率。您还可以使用开头介绍的纯色规范方法来创建条纹图案。background-image: repeating-linear-gradient(45deg, #f4c14e 0%　10%,　transparent 10% 20%);指定多个渐变虽然它不是CSS渐变本身的设置，但background-image属性可以指定用逗号分隔的多个值。您还可以使用它来创建如下所示的模式。background-image: radial-gradient(circle closest-side, white 0% 65%, transparent 65% 100%), repeating-linear-gradient(90deg, #f4c14e 0 4.8%, transparent 4.8% 9.6%);使用函数曲线的 CSS 渐变基于CSS渐变的这些特点，我们将进入高级版本。通过使用函数曲线更改路点，您可以创建定期变化的渐变。准确地说，gradient两种颜色之间的变化是线性的，因此曲线是由许多直线来近似的。使用回旋曲线的透明渐变粗略地说，回旋曲线是一条柔和地连接直线和曲线的曲线。由于其特性，它也用于高速公路立交环路。通过轻轻地从直线过渡到曲线，您不必进行突然的转向动作。如果将其应用于渐变，所需的颜色将平滑变化。比如透明度从无色增加到黑色的时候，用正常的渐变，一直到最后看起来都是灰色的，感觉就像只是到最后才变成黑色。但是，如果使用回旋曲线，颜色会自然变为黑色。上面的回旋梯度可以用 CSS 表示如下。background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.595) 50%, rgba(0, 0, 0, 0.7225) 65%, rgba(0, 0, 0, 0.78625) 75.5%, rgba(0, 0, 0, 0.81855) 82.85%, rgba(0, 0, 0, 0.83385) 88%, rgba(0, 0, 0, 0.85)); }0这次我们将改变透明度0.85，但是通过精细地设置值，您可以表达回旋曲线。不过每次都写这么复杂的东西太痛苦了，所以我准备了一个sass mixin。@mixin clothoid-linear-gradient( $angle: to bottom, $color-start: #000000, $color-end: #ffffff, $start-point: 0 ) { background-image: linear-gradient( $angle, $color-start 0 $start-point * 100%, mix($color-end, $color-start, 70%) $start-point * 100% + (1 - $start-point) * 50%, mix($color-end, $color-start, 85%) $start-point * 100% + (1 - $start-point) * 65%, mix($color-end, $color-start, 92.5%) $start-point * 100% + (1 - $start-point) * 75.5%, mix($color-end, $color-start, 96.3%) $start-point * 100% + (1 - $start-point) * 82.85%, mix($color-end, $color-start, 98.1%) $start-point * 100% + (1 - $start-point) * 88%, $color-end ); }使用它$color-start时$color-end您所要做的就是指定颜色。@include mixin.clothoid-linear-gradient($color-start: rgba(0,0,0,0), $color-end: rgba(0,0,0,0.85));使用三角函数的梯度我们还将介绍使用三角函数的分级，这是高中数学的秘密。三角曲线，特别是正弦曲线，被称为波浪曲线。由于函数的特性，变化率在开始时逐渐变化，中间变得陡峭，然后在末尾变得更加平缓。既然是周期函数，那么就是一条可以再次返回的变化曲线（=可以循环）。如果将其应用于渐变，则可以绘制波浪图案。background-image: repeating-radial-gradient(circle at center, #6fb8d9, #70b9da 1.25%, #73bcdd 2.5%, #78c0e1 3.75%, #7fc6e6 5%, #86cdec 6.25%, #8cd3f2 7.5%, #93d9f7 8.75%, #98ddfb 10%, #9be0fe 11.25%, #9ce1ff 12.5%, #9be0fe 13.75%, #98ddfb 15%, #93d9f7 16.25%, #8cd3f2 17.5%, #86cdec 18.75%, #7fc6e6 20%, #78c0e1 21.25%, #73bcdd 22.5%, #70b9da 23.75%, #6fb8d9 25%); @mixin repeating-sine-radial-gradient( $position: circle at center, $color-start: #000000, $color-end: #ffffff, $repetition: 1 ) { background-image: repeating-radial-gradient( $position, $color-start, mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.05%, mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.1%, mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.15%, mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.2%, mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.25%, mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.3%, mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.35%, mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.4%, mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.45%, $color-end calc(100 / $repetition) * 0.5%, mix($color-end, $color-start, 97.6%) calc(100 / $repetition) * 0.55%, mix($color-end, $color-start, 90.5%) calc(100 / $repetition) * 0.6%, mix($color-end, $color-start, 79.4%) calc(100 / $repetition) * 0.65%, mix($color-end, $color-start, 65.5%) calc(100 / $repetition) * 0.7%, mix($color-end, $color-start, 50%) calc(100 / $repetition) * 0.75%, mix($color-end, $color-start, 34.5%) calc(100 / $repetition) * 0.8%, mix($color-end, $color-start, 20.6%) calc(100 / $repetition) * 0.85%, mix($color-end, $color-start, 9.5%) calc(100 / $repetition) * 0.9%, mix($color-end, $color-start, 2.4%) calc(100 / $repetition) * 0.95%, $color-start calc(100 / $repetition) * 1% ); } @include mixin.repeating-sine-radial-gradient($color-start: #6fb8d9, $color-end: #9ce1ff, $repetition: 4)渐变案例方格图案我们能够通过改变变化程度来实现有趣的渐变，但通过将其与其他 CSS 属性相结合，甚至可以实现更多样化的表达。例如，您可以设置背景图像的混合级别，background-blend-mode这允许您执行类似的操作。background-image: repeating-linear-gradient(90deg, black 0 48px, white 48px 96px), repeating-linear-gradient(180deg, white 0 48px, black 48px 96px); background-blend-mode:difference;mix-blende-mode 使用回旋曲线的径向渐变来表达周边曝光，波纹动画与动画结合起来也很有趣。由于三角函数具有波形，因此它们也可以表示传播的波纹。条纹动画mask-image用于为条纹设置动画。各种组合的动画mix-blend-mode如果你结合 , mask-image，你可以做这样的事情。animation

Linux操作命令 创建目录mkdir -p 是 Linux 命令中用于创建目录的选项。它的意思是在创建目录时，递归地创建缺少的父级目录。 具体来说，mkdir -p 命令会尝试创建指定的目录，并且会自动创建该目录中不存在的父级目录。如果该目录已经存在，mkdir -p 会忽略这个操作。 命令示例：mkdir -p /home/user/documents/project 通过使用 -p 选项，mkdir 命令能够一次性创建整个目录路径，而不需要单独创建父级目录。解压tgz 文件tar -xzvf file.tgz 要解压某个文件夹中的 .tgz 文件到另一个文件夹中，可以使用以下命令： tar -xzf /path/to/source_folder/file.tgz -C /path/to/destination_folder /path/to/source_folder 是包含 .tgz 文件的源文件夹的路径。 file.tgz 是要解压的 .tgz 文件的名称。 /path/to/destination_folder 是你希望将文件解压到的目标文件夹的路径。 -C是tar命令的一个选项，用于指定解压缩文件时的目标目录。删除文件 或 目录1. 使用命令行删除文件：如果你知道要删除的文件的路径，可以通过以下命令来删除文件： rm /path/to/file 其中，`/path/to/file`是文件的完整路径。 2. 使用命令行删除文件夹及其内容：如果你想删除一个文件夹及其下所有文件和子文件夹，可以使用以下命令： rm -r /path/to/folder 其中，`/path/to/folder`是文件夹的完整路径。请注意，在使用该命令时要特别小心，因为删除操作是不可逆的。 在使用以上命令时，请确保你有足够的权限来执行删除操作。此外，删除文件和文件夹是一个敏感的操作，请确保你要删除的内容是你想要删除的，并备份重要文件以防万一。 添加-f 表示不做询问直接删除 rm -rf /path/to/folder