主打：快速获取完善开发思想。

您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。

50projects50days项目地址：🌟🌟🌟🌟🌟

GitHub - bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS

简介： 想要快速领略「50projects50days」的精华，却又没有足够的时间？本文为您呈现这个项目系列的精华概览，每个项目都展示了不同的技术和创意，我们将深入剖析每个项目的关键代码和实现步骤，了解其背后的设计思想和技术原理。无论您是初学者还是有一定经验的开发者，本文都将为您提供灵感和知识，帮助您更好地理解和应用 HTML、CSS 和 JavaScript。无需大量时间投入，让我们一起探索这些项目，汲取前端技术的精华。前方的创意和知识等待着您的发现！

传送门🚀

前端创意探索：速览「50projects50days」项目精华 - 第一部分（6-10 天）

1、Expanding Cards（展开卡片）

主要关注点：JS操作类的删除与添加。

实现效果：

通过点击不同的卡片，实现卡片的展开和折叠效果。

实现关键代码

HTML 结构：定义卡片容器和面板元素

html 复制代码

  <div class="container">
    <div class="panel active"
      style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
      <h3>Explore The World</h3>
    </div>
    <div class="panel"
      style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
      <h3>Wild Forest</h3>
    </div>
    <!-- 其他面板元素... -->
  </div>

JavaScript 逻辑：实现面板切换的功能

js 复制代码

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

实现步骤：

点击面板时，通过 JavaScript 添加或移除面板的 active 类，以实现展开和折叠的效果。
通过 removeActiveClasses 函数，移除所有面板的 active 类，确保只有一个面板是展开状态。

CSS样式

🐯容器样式：使用弹性盒子布局

css 复制代码

.container {
  display: flex;
  width: 90vw; 
}

🐯面板样式：定义面板的基本样式和弹性属性

css 复制代码

.panel {
  /* 其他样式属性... */
  flex: 0.5;
  /* 其他样式属性... */
}

/* 激活状态时，扩大面板宽度 */
.panel.active {
  flex: 5;
}

总结：

无需给出panel的宽度，flex的弹性盒子足矣。扩展卡片实现了一个简洁的交互效果，通过点击切换面板的 active 类，实现了面板的展开和折叠。充分利用了弹性盒子布局来控制面板的大小变化，从而实现了动态的效果。

2、Progress Steps（进度步骤）

主要关注点： CSS的画图上、progress.style.width改变有什么影响。

实现效果：

通过点击"Next"和"Prev"按钮，逐步展示进度步骤。

实现关键代码

HTML 结构：定义容器和面板元素

html 复制代码

<div class="container">
  <div class="progress-container">
    <div class="progress" id="progress"></div>
    <div class="circle active">1</div>
    <div class="circle">2</div>
    <!-- 其他面板元素... -->
  </div>

  <button class="btn" id="prev" disabled>Prev</button>
  <button class="btn" id="next">Next</button>
</div>

其中，progress 用于显示进度长度，初始时宽度为 0，active 类为当前步骤的圆圈添加蓝色圆圈。

JavaScript 逻辑：实现点击前进后退功能

js 复制代码

// 其他内容...
function update() {
    // 其他内容...
    const actives = document.querySelectorAll('.active');
    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';
    // 其他内容...
}
// 其他内容...

实现步骤：

创建一个变量 currentActive 并初始化为 0，以跟踪当前所在的步骤。
添加 "Next" 按钮的点击事件监听器：
- 如果当前步骤小于总步骤数减 1，则将 currentActive 增加 1。
- 调用 update 函数更新进度条和圆圈样式。
添加 "Prev" 按钮的点击事件监听器：
- 如果当前步骤大于 0，则将 currentActive 减少 1。
- 调用 update 函数更新进度条和圆圈样式。
创建 update 函数：
- 使用 forEach 遍历所有圆圈元素，并根据当前步骤添加或移除 active 类。
- 计算当前步骤在总步骤数中所占的百分比，更新进度条的宽度

CSS样式

🐯容器样式：使用 Flex 布局、定位和给定宽度

css 复制代码

.container {
  text-align: center;
}
/* 先定义一个区域 */
.progress-container {
  display: flex;
  justify-content: space-between; /* 这个里面有圆圈的位置*/
  position: relative; /* 这是定位使用*/
  margin-bottom: 30px;
  max-width: 100%;
  width: 350px;
}

🐯面板样式：定义面板的基本样式和position属性

线段的图案和进度条样式：

css 复制代码

/* 在区域内部,采用伪类画了灰色一条线 */
.progress-container::before {
  content: '';
  background-color: #eee;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
}

/* 在区域内部画了一条有颜色的线*/
.progress {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%; /* width根据点击进行百分比变化*/
  z-index: -1;
  transition: 0.4s ease;
}

圆圈的图案和样式：

css 复制代码

/* 对圆圈的字体内部的数据做处理 */
.circle {
  background-color: #fff;
  color: #999;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid blue;
  transition: 0.4s ease;
}

/* 活跃的圆圈变了颜色 */
.circle.active {
  border-color: var(--line-border-fill);
}

总结：

进度步骤，着重关注步骤的活跃圆圈累积值 ，将小于该累积值的标签添加 active 类来突显当前进度，对于progress的长度就是看活跃圆圈累积值对于circles.length的比值，获取的百分比

主要关注点：再左上的那个旋转方式、图标是如何放置的。

实现效果：

旋转式的导航菜单动画。

实现关键代码

HTML 结构：：定义了以下关键结构

html 复制代码

<div class="container">
    <!-- 旋转的内容... -->
  <div class="circle-container">
    <div class="circle">
      <button id="close">
        <i class="fas fa-times"></i>
      </button>
      <button id="open">
        <i class="fas fa-bars"></i>
      </button>
    </div>
  </div>

  <div class="content">
    <!-- 文章内容... -->
  </div>
</div>

<nav>
  <ul>
    <!-- 导航项... -->
  </ul>
</nav>

JavaScript 逻辑：我们通过事件监听器实现了打开和关闭导航菜单的功能。

js 复制代码

const open = document.getElementById('open');
const close = document.getElementById('close');
const container = document.querySelector('.container');

open.addEventListener('click', () => container.classList.add('show-nav'));
close.addEventListener('click', () => container.classList.remove('show-nav'));

实现步骤：

用户点击 "open" 按钮时，为容器添加 show-nav 类，使导航菜单展现出来。
用户点击 "close" 按钮时，从容器中移除 show-nav 类，将导航菜单隐藏起来。

CSS样式

🐯容器样式：采用 Flex 布局，设置背景颜色、宽度和动画

js 复制代码

.container {
  background-color: #fafafa; /* 设置背景颜色 */
  transform-origin: top left; /* 以左上角为旋转中心 */
  transition: transform 0.5s linear; /* 添加过渡动画效果 */
  width: 100vw; /* 设置宽度为视口宽度 */
  min-height: 100vh; /* 设置最小高度为视口高度 */
  padding: 50px; /* 添加内边距 */
}

.container.show-nav {
  transform: rotate(-20deg); /* 在显示导航时旋转容器 */
}

🐯面板样式：定义圆圈和按钮的样式，实现按钮的旋转和平移动画效果。

js 复制代码

.circle-container {
  position: fixed; /* 固定定位，脱离文档流 */
  top: -100px; /* 初始位置上移 */
  left: -100px; /* 初始位置左移 */
}

.circle {
  background-color: #ff7979; /* 设置圆圈背景颜色 */
  height: 200px;
  width: 200px;
  border-radius: 50%; /* 圆圈的圆角边框 */
  position: relative;
  transition: transform 0.5s linear; /* 添加旋转过渡动画 */
}

.container.show-nav .circle {
  transform: rotate(-70deg); /* 在显示导航时旋转圆圈 */
}

.circle button {
  cursor: pointer;
  position: absolute; /* 绝对定位 */
  top: 50%; 
  left: 50%; 
  height: 100px;
  background: transparent; /* 透明背景 */
  border: 0;
  font-size: 26px;
  color: #fff; /* 字体颜色 */
}

.circle button:focus {
  outline: none; /* 去除按钮的聚焦样式 */
}

.circle button#open {
  left: 60%; /* 调整 "open" 按钮的位置 */
}

.circle button#close {
  top: 60%; /* 调整 "close" 按钮的位置 */
  transform: rotate(90deg); /* 旋转 "close" 按钮 */
  transform-origin: top left; /* 以左上角为旋转中心 */
}

总结：

该项目实现了一个带有动画效果的旋转导航菜单。通过点击 "open" 按钮，展开导航菜单并旋转按钮；点击 "close" 按钮，导航菜单收回。CSS 样式使用了 Flex 布局和过渡动画，JavaScript 逻辑通过监听按钮点击事件来控制导航菜单的显示与隐藏。整体实现了一个独特且具有交互性的页面效果。

实现效果：

通过点击按钮，显示和隐藏搜索框。

实现关键代码

HTML 结构：：定义了以下关键结构，用于实现隐藏式搜索栏：

html 复制代码

<div class="search">
  <input type="text" class="input" placeholder="Search...">
  <button class="btn">
    <i class="fas fa-search"></i>
  </button>
</div>

JavaScript 逻辑：实现什么功能

js 复制代码

const search = document.querySelector('.search');
const btn = document.querySelector('.btn');
const input = document.querySelector('.input');

btn.addEventListener('click', () => {
    search.classList.toggle('active'); // 添加与移除active
    input.focus(); // 聚焦input
});

实现步骤：

点击外层标签添加 active 类，用于展开效果，并可在两个子元素中使用。
输入框和按钮在同一个 div 容器内，且相对于容器定位，输入框不给定位。
输入框和按钮的宽高都是 50px，按钮使用 absolute 定位在输入框上方。
激活状态下，输入框宽度变为 200px，按钮平移至 translateX(198px)。

CSS样式

CSS 样式中包含了对搜索栏及按钮的样式设置，以及实现了过渡效果来展现隐藏式搜索栏的动画效果。

🐯容器样式：使用定位布局

css 复制代码

/* 设置搜索栏的容器样式 */
.search {
  position: relative;
  height: 50px;
}

🐯面板样式：定义面板的基本样式和弹性属性

css 复制代码

/* 设置输入框样式，并添加过渡动画以实现宽度变化效果 */
.search .input {
  background-color: #fff;
  border: 0;
  font-size: 18px;
  padding: 15px;
  height: 50px;
  width: 50px; /* 初始宽度 */
  transition: width 0.3s ease;
}

/* 设置按钮样式 */
.btn {
  background-color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease; /* 添加平移过渡动画 */
}

/* 去除按钮和输入框的聚焦状态样式 */
.btn:focus,
.input:focus {
  outline: none;
}

/* 当搜索栏处于激活状态时，展开输入框 */
.search.active .input {
  width: 200px; /* 展开后的宽度 */
}

/* 当搜索栏处于激活状态时，移动按钮以适应展开的输入框 */
.search.active .btn {
  transform: translateX(198px); /* 平移按钮 */
}

总结：

点击搜索，加载上active类，激活展开iput宽度变成200，使用transition进行过渡，同理btn按钮也是一样。

这些代码实现了一个隐藏式搜索栏的效果。用户点击搜索按钮时，搜索栏将展开，输入框宽度增加，并自动聚焦。同时，搜索按钮也会平移以适应展开后的搜索栏。这为用户提供了一个简洁且交互性强的搜索体验。

5、Blurry Loading（模糊加载）

模糊加载，从0到100%，算是模糊程度。

实现效果：

通过加载进度，实现图片从模糊到高清的过渡效果。

实现关键代码

HTML 结构：定义了以下关键结构，用于实现图片从模糊到高清。

html 复制代码

<section class="bg"></section>
<div class="loading-text">0%</div>

JavaScript 逻辑：动态的调整document中的blur问题。

js 复制代码

const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg')

let load = 0

let int = setInterval(blurring, 30)

function blurring() {
  load++

  if (load > 99) {
    clearInterval(int)
  }

  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

实现步骤：

这段代码通过不断更新加载百分比、文本透明度和背景模糊程度，创建了一个模糊加载效果，当加载百分比达到 100% 后，停止了模糊效果的更新

CSS样式

🐯容器样式：全屏的

css 复制代码

/* 设置body的样式 */
body {
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

🐯面板样式：定义面板的基本样式和显示

css 复制代码

/* 设置背景图的样式 */
.bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
    no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}

/* 设置加载文本的样式 */
.loading-text {
  font-size: 50px;
  color: #fff;
}

总结：

图片的显示问题,上下都溢出30px,使用隐藏页面内容溢出的部分，很轻松的解决了模糊的白边问题。

😘预知后事如何，待下回分解

前端创意探索：速览「50projects50days」项目精华 - 第一部分（1-5 天）

目录

传送门🚀

1、Expanding Cards（展开卡片）

实现效果：

实现关键代码

2、Progress Steps（进度步骤）

实现效果：

实现关键代码

3、Rotating Navigation Animation（旋转导航动画）

实现效果：

实现关键代码

4、Hidden Search Widget（隐藏的搜索小工具）

实现效果：

实现关键代码

5、Blurry Loading（模糊加载）

实现效果：

实现关键代码