前端知识的不足与补充

css中的grid布局

css 复制代码
  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

css 复制代码
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 列。

css 复制代码
   justify-self: end;
   align-self: end;

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

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

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

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

css中的旋转

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.地球漫游中的动画

css 复制代码
    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 秒,动画速度保持匀速。

相关推荐
桃园码工5 分钟前
15_HTML5 表单属性 --[HTML5 API 学习之旅]
前端·html5·表单属性
Am心若依旧40913 分钟前
[c++11(二)]Lambda表达式和Function包装器及bind函数
开发语言·c++
明月看潮生15 分钟前
青少年编程与数学 02-004 Go语言Web编程 20课题、单元测试
开发语言·青少年编程·单元测试·编程与数学·goweb
大G哥24 分钟前
java提高正则处理效率
java·开发语言
VBA633735 分钟前
VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL
开发语言
轩辰~37 分钟前
网络协议入门
linux·服务器·开发语言·网络·arm开发·c++·网络协议
小_太_阳1 小时前
Scala_【1】概述
开发语言·后端·scala·intellij-idea
百万蹄蹄向前冲1 小时前
2024不一样的VUE3期末考查
前端·javascript·程序员
向宇it1 小时前
【从零开始入门unity游戏开发之——unity篇02】unity6基础入门——软件下载安装、Unity Hub配置、安装unity编辑器、许可证管理
开发语言·unity·c#·编辑器·游戏引擎
轻口味1 小时前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos