使用Git进行版本控制 什么是GitGit是由Linus Torvalds创造的一种版本控制工具，旨在提供高效的分布式版本控制系统。通过Git，开发者可以跟踪文件变更、合并代码、撤销修改等操作，使团队协作更加高效。Git的基本概念仓库（Repository）Git中的仓库是存储项目代码的地方，可以是本地仓库或远程仓库。每个仓库都包含完整的项目历史记录。提交（Commit）提交是Git中最小的版本单元，表示一次代码修改的记录。每次提交都有一个唯一的哈希值，用于区分不同的提交。分支（Branch）分支是指向某次提交的指针，可以用来独立开发某个特性或修复bug，不影响主线代码。合并分支时，可以保持代码的整洁性。合并（Merge）合并是将不同的分支或提交整合在一起，避免代码冲突并保留所有更改。合并后的代码将包含所有相关的修改内容。Git的常用命令克隆仓库git clone <repository_url>添加文件到暂存区git add <file_name>提交更改git commit -m "Commit message"查看状态git status查看提交历史git log创建并切换分支git checkout -b <branch_name>合并分支git merge <branch_name>Git的技巧利用 .gitignore 文件排除不需要跟踪的文件和目录。使用 git rebase 重新整理提交历史，使提交记录更清晰。学习如何解决合并冲突，确保合并分支时代码的质量。掌握使用标签（tag）对重要版本进行标记，方便日后查找。git 使用规范 commit 的类别● feat：新增功能（feature）● fix：修复补丁（bug）● docs：修订文档，如 Readme, Change Log, Contribute 等● refactor：代码重构，未新增任何功能和修复任何 bug● style： 仅调整空格、格式缩进等（不改变代码逻辑的变动）● perf：优化相关，改善性能和体验的修改● test：测试用例的增加/修改● chore：非 src 和 test 的修改● merge：合并分支或冲突等● revert： 回滚到上一个版本● build：改变构建流程，新增依赖库、工具等（例如 webpack、maven 修改）● ci：自动化流程配置修改Git关联多个远程仓库的方法本地仓库关联多个远程库，比如同时关联GitHub和Gitee，操作方法如下本地创建好文件夹及文件初始化gitgit init分别在GitHub和Gitee上创建好远程仓库回到本地关联远程仓库git remote add github git@github.com:shthah/note.gitgit remote add gitee git@gitee.com:shthah/note.git执行以下命令，查看关联的远程仓库git remote -v会显示gitee https://gitee.com/shthah/notes.git (fetch)gitee https://gitee.com/shthah/notes.git (push)github git@github.com:shthah/notes.git (fetch)github git@github.com:shthah/notes.git (push)说明关联成功。同步远程代码git pull gitee(别名) master当有修改推送到远程的时候,分别推送即可git push github mastergit push gitee master可关联master分支,使用git push github等直接提交,不用再写默认master分支名 git push --set-upstream github master git push --set-upstream gitee master如果已关联一个远程,可使用以下命令,先删除远程关联,再重新关联即可git remote rm origin也可直接修改远程仓库名称git remote rename gitee mayun

如何使用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); }

原神 启动 非酋的抽卡 感觉游戏好肝呀 完全肝不动呢

dnf 再次弃坑 肝不动了 恶心人的策划 哎 烦死了 不想玩了 再见 花花