2020-09-01 加班 去TM 的加班 老笨比了

bw一日游 排队好多人

2020-08-06 晴 今天出了一个神话 今天出了一个神话 nice 呀

2020-08-04 台风 终于出神话了 暂无简介

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