50天50个前端小案例中文学习记录20241012

YinZuotang · Oct 12, 2024 · 647ea3b · 647ea3b
1 parent 6586029
commit 647ea3b
Show file tree

Hide file tree

Showing 202 changed files with 8,489 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/1Aa动画/10笑话弹出.gif b/1Aa动画/10笑话弹出.gif
diff --git a/1Aa动画/11双击比心.gif b/1Aa动画/11双击比心.gif
diff --git a/1Aa动画/12双侧垂直滑动门.gif b/1Aa动画/12双侧垂直滑动门.gif
diff --git a/1Aa动画/13拖动效果.gif b/1Aa动画/13拖动效果.gif
diff --git a/1Aa动画/15饮水量.gif b/1Aa动画/15饮水量.gif
diff --git a/1Aa动画/16密钥.gif b/1Aa动画/16密钥.gif
diff --git a/1Aa动画/17卡片展开.gif b/1Aa动画/17卡片展开.gif
diff --git a/1Aa动画/18常见问题解答.gif b/1Aa动画/18常见问题解答.gif
diff --git a/1Aa动画/19满意度反馈.gif b/1Aa动画/19满意度反馈.gif
diff --git a/1Aa动画/20波浪效果.gif b/1Aa动画/20波浪效果.gif
diff --git a/1Aa动画/21Github用户搜索.gif b/1Aa动画/21Github用户搜索.gif
diff --git a/1Aa动画/22 项目设计目的-好、便宜、快.gif b/1Aa动画/22 项目设计目的-好、便宜、快.gif
diff --git a/1Aa动画/23搜索栏隐藏.gif b/1Aa动画/23搜索栏隐藏.gif
diff --git a/1Aa动画/24流光板.gif b/1Aa动画/24流光板.gif
diff --git a/1Aa动画/25图像旋转切换.gif b/1Aa动画/25图像旋转切换.gif
diff --git a/1Aa动画/26递增计数器.gif b/1Aa动画/26递增计数器.gif
diff --git a/1Aa动画/27捕捉虫子小游戏.gif b/1Aa动画/27捕捉虫子小游戏.gif
diff --git a/1Aa动画/28双旋转三角形.gif b/1Aa动画/28双旋转三角形.gif
diff --git a/1Aa动画/29用户检索.gif b/1Aa动画/29用户检索.gif
diff --git a/1Aa动画/30底部标签导航栏.gif b/1Aa动画/30底部标签导航栏.gif
diff --git a/1Aa动画/31电影搜索评分.gif b/1Aa动画/31电影搜索评分.gif
diff --git a/1Aa动画/32NETFLIX导航.gif b/1Aa动画/32NETFLIX导航.gif
diff --git a/1Aa动画/37进度按钮.gif b/1Aa动画/37进度按钮.gif
diff --git a/1Aa动画/38问答程序.gif b/1Aa动画/38问答程序.gif
diff --git a/1Aa动画/39随机选择匹配.gif b/1Aa动画/39随机选择匹配.gif
diff --git a/1Aa动画/3动态导航.gif b/1Aa动画/3动态导航.gif
diff --git a/1Aa动画/45滑动查看页面.gif b/1Aa动画/45滑动查看页面.gif
diff --git a/1Aa动画/46动态粘性导航.gif b/1Aa动画/46动态粘性导航.gif
diff --git a/1Aa动画/49 toast-notification.gif b/1Aa动画/49 toast-notification.gif
diff --git a/1Aa动画/4文本自动效果.gif b/1Aa动画/4文本自动效果.gif
diff --git a/1Aa动画/5背景滑块效果大.gif b/1Aa动画/5背景滑块效果大.gif
diff --git a/1Aa动画/6模糊加载.gif b/1Aa动画/6模糊加载.gif
diff --git a/1Aa动画/7波浪按钮.gif b/1Aa动画/7波浪按钮.gif
diff --git a/1Aa动画/8内容占位符.gif b/1Aa动画/8内容占位符.gif
diff --git a/1Aa动画/9自定义范围滑块.gif b/1Aa动画/9自定义范围滑块.gif
diff --git a/1A项目开始/index.html b/1A项目开始/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- <!DOCTYPE> 声明向浏览器提供有关所期望的文档类型的“信息”。 -->
+ <!-- 定义语言 -->
+<html lang="en">
+  <!-- <head> 元素是所有头部元素的容器。 -->
+  <head>
+    <!-- 规定 HTML 文档的字符编码 -->
+    <meta charset="UTF-8" />
+    <!--定义了网页在浏览器上的视口设置，确保网页的宽度与设备屏幕宽度相匹配，并设置初始缩放比例为1.0 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 引入了一个外部的CSS样式表 -->
+    <link rel="stylesheet" href="style.css" />
+    <!-- 定义网页title -->
+    <title>My Project</title>
+  </head>
+  <!-- 定义了网页的主体内容，即用户在浏览器中看到的部分 -->
+  <body>
+    <!-- 定义一级标题内容 -->
+    <h1>Project Starter</h1>
+    <!-- <script>标签用于引入JavaScript文件或直接编写JavaScript代码 -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/1A项目开始/script.js b/1A项目开始/script.js
@@ -0,0 +1 @@
+
diff --git a/1A项目开始/style.css b/1A项目开始/style.css
@@ -0,0 +1,24 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+/* 一个@import规则，用于从Google Fonts导入Roboto字体 */
+/* 通用选择器*，将box-sizing属性设置为border-box。元素的宽度和高度会包括边框border和内边距padding，避免在布局中出现意外的尺寸问题。 */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  /* font-family设置为Roboto字体，如果Roboto字体无法加载，则会回退到无衬线字体。 */
+  font-family: 'Roboto', sans-serif;
+  /* 将body元素设置为一个弹性容器 */
+  display: flex;
+  /* 定义了弹性容器的主轴方向为垂直方向 */
+  flex-direction: column;
+  /* 将弹性容器内的项目在水平和垂直方向上居中对齐。 */
+  align-items: center;
+  justify-content: center;
+  /* 将body的高度设置为视口高度的100% */
+  height: 100vh;
+  /* 避免溢出，隐藏超出的部分 */
+  overflow: hidden;
+  /* 移除了body元素的外边距 */
+  margin: 0;
+}
diff --git a/3d-boxes-background/index.html b/3d-boxes-background/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- 使用font-awesome图标库，Font Awesome是一个图标字体和CSS框架，提供可缩放矢量图标 -->
+    <!-- rel="stylesheet"：指定这是样式表，href：指定样式表的URL-->
+    <!-- integrity：用于指定资源的完整性校验，确保加载的资源未被篡改 -->
+    <!-- crossorigin：指定资源是否允许跨域请求，anonymous表示请求不携带凭证 -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <title>3D Boxes Background</title>
+  </head>
+  <body>
+    <!-- 定义按钮元素，用来触发事件，这里的元素内容使用了一个魔术帽的表情符号-->
+    <button id="btn" class="magic">Magic 🎩</button>
+    <!-- 添加容器，用来放置具体的内容,使用了两个类,boxes和big类-->
+    <div id="boxes" class="boxes big"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/3d-boxes-background/script.js b/3d-boxes-background/script.js
@@ -0,0 +1,27 @@
+const boxesContainer = document.getElementById('boxes')
+// 上句获取html文件中ID为boxes的元素的引用
+const btn = document.getElementById('btn')
+// 上句获取html文件中ID为btn的元素的引用
+
+// 下面为按钮添加一个点击事件监听器，点击按钮时，切换boxesContainer的big类。
+// 点击magic按钮后big类被添加，根据CSS样式改变 boxes也就是boxesContainer 的尺寸
+btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
+
+// 生成一个4x4的网格布局，每个格子是一个带有box类的div元素。
+function createBoxes() {
+  // 两次循环，生成4*4的小盒子
+  for (let i = 0; i < 4; i++) {
+    for (let j = 0; j < 4; j++) {
+      // 使用document.createElement方法创建div
+      const box = document.createElement('div')
+      // 为创建的div添加box
+      box.classList.add('box')
+      // 设置每个box的背景位置，分别是向左偏移-j*125px即向右偏移j*125，和向上偏移-i*125px
+      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
+      // 将创建的box元素添加到boxesContainer中
+      boxesContainer.appendChild(box)
+    }
+  }
+}
+
+createBoxes()
diff --git a/3d-boxes-background/style.css b/3d-boxes-background/style.css
@@ -0,0 +1,146 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+/* 引入了两种字体，Roboto和Poppins */
+/* 还是使用*通用选择器匹配页面所有元素，将box-sizing属性设置为border-box改变元素盒模型的计算方式，使元素的宽度和高度包括内容、内边距（padding）和边框（border） */
+* {
+  box-sizing: border-box;
+}
+/* 设置body元素样式 */
+body {
+  /* 设置背景色 */
+  background-color: #fafafa;
+  /* 设置字体，如果roboto字体不能用则使用sans-serif字体 */
+  font-family: 'Roboto', sans-serif;
+  /* 弹性容器 */
+  display: flex;
+  /* 主轴为垂直方向 */
+  flex-direction: column;
+  /* 垂直方向居中 */
+  align-items: center;
+  /* 水平居中 */
+  justify-content: center;
+  height: 100vh;
+  /* 隐藏超出部分 */
+  overflow: hidden;
+}
+
+/* 设置magic按钮样式 */
+.magic {
+  background-color: #f9ca24;
+  /* 字体颜色 */
+  color: #fff;
+  font-family: 'Poppins', sans-serif;
+  /* 无框线 */
+  border: 0;
+  /* 边框圆角为3像素 */
+  border-radius: 3px;
+  /* 字号 */
+  font-size: 16px;
+  /* 设置内边距垂直内边距为12px,水平内边距20px */
+  padding: 12px 20px;
+  /* 鼠标悬停时,光标为 pointer指针小手的样式,暗示可以点击*/
+  cursor: pointer;
+  /* 将元素相对于视窗进行定位,即元素的位置保持不变*/
+  position: fixed;
+  /* 设置元素距离其包含块顶部20像素,也就是浏览器顶部 */
+  top: 20px;
+  /* 字母之间的间距 */
+  letter-spacing: 1px;
+  /* 盒子阴影效果 */
+  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
+  /* 元素的堆叠顺序 */
+  z-index: 100;
+}
+
+/* 定义两个伪类选择器,用于改变元素在特定交互状态下的样式*/
+.magic:focus {
+  /* 移除当.magic类的元素获得焦点时浏览器默认的轮廓线（outline）,感觉可以省略 */
+  outline: none;
+}
+
+.magic:active {
+  /* 移除当.magic类的元素被按下（活跃状态）时的阴影效果,给用户一种按钮被按下的视觉反馈*/
+  box-shadow: none;
+  /* 使用CSS变换（transform）属性将元素向下移动2像素,给用户一种按钮被按下的视觉效果 */
+  transform: translateY(2px);
+}
+
+/* 先定义boxes类的效果,这是效果图第二张图时的设置 */
+.boxes {
+  display: flex;
+  /* 允许子元素换行显示 */
+  flex-wrap: wrap;
+  /* 在主轴上平均分布子元素，每个元素两侧的间隔相等 */
+  justify-content: space-around;
+  /* 设置高和宽 */
+  height: 500px;
+  width: 500px;
+  /* 相对定位 */
+  position: relative;
+  /* 为尺寸变化设置一个0.4秒的渐变动画效果 */
+  transition: 0.4s ease;
+}
+/* 盒子分散后的尺寸设置 */
+.boxes.big {
+  width: 600px;
+  height: 600px;
+}
+
+/* .box由JS函数创建 */
+.boxes.big .box {
+  /* 子元素.box在.boxes.big容器中会被旋转360度 */
+  transform: rotateZ(360deg);
+}
+/* 设置16个子元素.box的样式 */
+.box {
+  /* 添加背景图为小黄人动图 */
+  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
+  /* 确保背景图像不重复平铺 */
+  background-repeat: no-repeat;
+  /* 背景图尺寸 */
+  background-size: 500px 500px;
+  /* 相对定位 */
+  position: relative;
+  /* 设置.box元素的尺寸 */
+  height: 125px;
+  width: 125px;
+  /* 变换设置一个0.4秒的渐变动画效果 */
+  transition: 0.4s ease;
+}
+
+/* 定义了.box元素的两个伪元素::after和::before的样式，形成分割后的小图片三维景深的效果*/
+/* 小图片右侧的黄色矩形 */
+.box::after {
+  /* 必须提供非空的content属性值来创建伪元素 */
+  content: '';
+  background-color: #f6e58d;
+  /* 相对于其最近的已定位（非static）祖先元素为绝对定位 */
+  position: absolute;
+  /* 将伪元素从其包含元素的顶部向下偏移8像素 */
+  top: 8px;
+  /* 向左偏移15像素 */
+  right: -15px;
+  /* 高度为其包含元素的高度的100% */
+  height: 100%;
+  /* 设置伪元素的宽度为15像素 */
+  width: 15px;
+  /* 沿着Y轴将伪元素倾斜45度 */
+  transform: skewY(45deg);
+}
+
+/* 小图片下面的黄色矩形 */
+.box::before {
+  content: '';
+  background-color: #f9ca24;
+  position: absolute;
+  /* 向上偏移15px */
+  bottom: -15px;
+  /* 向右偏移8px */
+  left: 8px;
+  /* 高15px */
+  height: 15px;
+  /* 宽100% */
+  width: 100%;
+  /* 沿着x轴将伪元素倾斜45度 */
+  transform: skewX(45deg);
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Brad Traversy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.