前端知识的不足与补充

css中的grid布局

  display: grid;
  grid-template-columns: 1fr 25px 25px 25px 25px 1fr;
  grid-template-rows: 50px 1fr 1fr 50px;
  /* 创造一个网格布局
  6 个纵列（column） --  
    前后两列两等分 (可用 fr 代表一份)，
    中间 4 列均为 25px 宽度
  4 个横行（row） -- 
    上下均为 50px，中间两等分
  */

grid-area

grid-area: 2/2/3/3

grid-area 是用于定义一个项目的位置及大小的属性，通常在使用 CSS Grid 布局时使用。

语法为：grid-area: row-start / column-start / row-end / column-end;

• row-start： 定义项目开始的行位置。
• column-start： 定义项目开始的列位置。
• row-end： 定义项目结束的行位置。
• column-end： 定义项目结束的列位置。

在你提供的例子中，grid-area: 2/2/3/3; 表示项目从网格布局的第 2 行、第 2 列开始，到第 3 行、第 3 列结束。这意味着这个项目占据了一个单元格，位于网格的第 2 行和第 2 列。

   justify-self: end;
   align-self: end;

justify-self 和 align-self 是用于调整网格项目在网格容器中的位置的属性，它们通常与 CSS Grid 布局一起使用。

• justify-self： 定义项目在水平方向上的对齐方式。justify-self: end; 表示项目会沿着水平方向的结束位置对齐。

• align-self： 定义项目在垂直方向上的对齐方式。align-self: end; 表示项目会沿着垂直方向的结束位置对齐。

这两个属性允许你在网格容器中独立地为每个项目设置水平和垂直方向的对齐方式，而不影响其他项目。

css中的旋转

/**
 * 创建一个文字水印的div
 * @param  {string} text - 水印文字
 * @param  {string} color - 水印颜色
 * @param  {number} deg - 水印旋转角度
 * @param  {number} opacity - 水印透明度
 * @param  {number} count - 水印数量
 */ 

 // TODO: 根据输入参数创建文字水印
  // TODO: 根据输入参数创建文字水印
  for(var i=0;i<count;i++){
    let ospan = document.createElement('span')
    ospan.innerHTML = text
    ospan.style.color = color
    ospan.style.opacity = opacity
    ospan.style.transform = `rotate(${deg}deg)`
    container.appendChild(ospan)
  }



ospan.style.transform = `rotate(${deg}deg)`
    container.appendChild(ospan)

代码涉及到 CSS 的 transform 属性和 JavaScript 模板字符串的使用。

1. ospan.style.transform = rotate(${deg}deg);： 这行代码通过 JavaScript 设置了一个 CSS 的 transform 属性，用于旋转元素。${deg} 是模板字符串的语法，它允许在字符串中嵌入变量。在这里，${deg} 会被替换为传入的 deg 参数的值。整体来说，这行代码的作用是将创建的 span 元素进行旋转。

2. container.appendChild(ospan);： 这行代码将创建的 span 元素添加到 container 元素中。appendChild 是 JavaScript 中操作 DOM（文档对象模型）的方法，用于将一个元素添加为另一个元素的子元素。

综合起来，这两行代码的作用是创建一个带有指定旋转角度的 span 元素，并将它添加到指定的容器元素中。

9.地球漫游中的动画

    animation-name: orbit;
    animation-duration: 36.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

1. animation-name: orbit;： 指定动画的名称为 orbit。这表示要使用名为 orbit 的动画效果，该动画可能在其他地方通过 @keyframes 规则定义。

2. animation-duration: 36.5s;： 设置动画的持续时间为 36.5 秒。这表示完成一次动画循环所需的时间。

3. animation-timing-function: linear;： 指定动画的时间函数为线性（linear）。这表示动画的速度在整个过程中是均匀的，没有加速或减速效果。

4. animation-iteration-count: infinite;： 设置动画的迭代次数为无限。这表示动画将一直循环播放，而不停止。

综合起来，这段 CSS 代码的作用是创建一个名为 orbit 的无限循环动画，每次循环耗时 36.5 秒，动画速度保持匀速。

为图片添加景深效果

解题思路

1.元素的filter样式属性用于指定一个或多个滤镜效果，从而改变元素的外观。
blur()：模糊元素。参数值表示模糊程度，单位为像素。
brightness()：调整元素的亮度。参数值表示亮度的百分比。
contrast()：调整元素的对比度。参数值表示对比度的百分比。
grayscale()：将元素转换为灰度图像。参数值表示灰度的百分比。
hue-rotate()：调整元素的色相。参数值表示旋转角度，单位为度数。
invert()：反转元素的颜色。参数值表示反转的百分比。
opacity()：调整元素的不透明度。参数值表示不透明度的百分比。
saturate()：调整元素的饱和度。参数值表示饱和度的百分比。
sepia()：将元素转换为褐色图像。参数值表示褐色的百分比。

 document.querySelector(".img1").style.filter="blur(0px)"; 
  document.querySelector(".img2").style.filter="blur(0px)";