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

猫头_
212 阅读7分钟

前言

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

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

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

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

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

目录

由于篇幅问题，本文将分成数个部分来介绍项目系列。以下✅是已发布部分的导航

2023822174110.bmp

上期解析 31day-35day，项目展示。

本期解析 36day-40day，项目展示。

下期解析 41day-45day，项目展示。

传送门🚀

36、hoverBoard（悬滑板）

主要关注点：Hoverboard 页面的实现。

实现效果：

这个页面实现了一个悬停板（Hoverboard）效果，当鼠标悬停在方块上时，方块的颜色会随机变化，并带有一定的动画效果。页面加载后，包含了大量的小方块，当鼠标悬停在方块上时，方块的背景颜色会变化，并带有闪烁效果。

实现关键代码

HTML 结构：容器用于存放方块。


<div class="container" id="container"></div>

JavaScript 逻辑：生成方块并实现悬停时的颜色变化和动画效果。

容器内，生成小方块。

const container = document.getElementById('container')
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
const SQUARES = 500

for(let i = 0; i < SQUARES; i++) {
    const square = document.createElement('div')
    square.classList.add('square')
    // 给小方块挂载上mouseover
    square.addEventListener('mouseover', () => setColor(square))
    // 给小方块挂载上mouseout
    square.addEventListener('mouseout', () => removeColor(square))

    container.appendChild(square)
}

其他方法，为小方块，添加效果。

function setColor(element) {
   const color = getRandomColor() // 获取随机的color
   element.style.background = color
   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`
}

function removeColor(element) {
   element.style.background = '#1d1d1d'
   element.style.boxShadow = '0 0 2px #000'
}

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)]
}

实现步骤：

  1. 页面加载后，使用循环生成多个方块（SQUARES个）并添加到容器中。
  2. 每个方块都具有 mouseover 和 mouseout 事件监听器，当鼠标悬停在方块上时，会触发 setColor 函数，改变方块的背景颜色和添加阴影效果。
  3. 当鼠标移出方块时，会触发 removeColor 函数，恢复方块的初始样式。
  4. 方块的颜色从预定义的颜色数组 colors 中随机选择

CSS样式

🐯包括方块的大小、背景颜色和悬停效果。

.square {
  background-color: #1d1d1d;
  box-shadow: 0 0 2px #000;
  height: 16px;
  width: 16px;
  margin: 2px;
  transition: 2s ease; /* 2s的动画效果 */
}

.square:hover {
  transition-duration: 0s; /*  指到当前表格，瞬间给赋予颜色 */
}

总结：

这个悬停板页面实现了一个有趣的效果，用户可以悬停在方块上观察颜色变化和闪烁动画。

37、pokedex（宝可梦的api对接）

主要关注点：唯一在意的就是神奇宝贝的api。

api: https://pokeapi.co/api/v2/pokemon/${id}

实现效果：

这是一个宝可梦图鉴页面，用于显示不同宝可梦的信息。

实现关键代码

HTML 结构：包含标题和宝可梦容器的基本布局。

<h1>Pokedex</h1>
<div class="poke-container" id="poke-container"></div>

JavaScript 逻辑：从 PokeAPI 获取宝可梦数据，并将每个宝可梦的信息以卡片形式显示在容器中。

js中使用fetch请求数据

const getPokemon = async (id) => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`
    const res = await fetch(url)
    const data = await res.json()
    createPokemonCard(data)
}

对图片卡片处理

const createPokemonCard = (pokemon) => {
    const pokemonEl = document.createElement('div')
    pokemonEl.classList.add('pokemon')

    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1)
    const id = pokemon.id.toString().padStart(3, '0')

    const poke_types = pokemon.types.map(type => type.type.name)
    const type = main_types.find(type => poke_types.indexOf(type) > -1)
    const color = colors[type]

    pokemonEl.style.backgroundColor = color

    const pokemonInnerHTML = `
    <div class="img-container">
        <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"" alt="${name}">
    </div>
    <div class="info">
        <span class="number">#${id}</span>
        <h3 class="name">${name}</h3>
        <small class="type">Type: <span>${type}</span> </small>
    </div>
    `

    pokemonEl.innerHTML = pokemonInnerHTML

    poke_container.appendChild(pokemonEl)
}

实现步骤：

  1. 使用循环从 PokeAPI 获取指定数量的宝可梦数据。
  2. 每个宝可梦数据都通过 createPokemonCard 函数创建卡片并添加到容器中。
  3. 宝可梦的类型决定了卡片的背景颜色，根据颜色对象 colors 来匹配。
  4. 页面加载时，调用 fetchPokemons 函数开始获取宝可梦数据。

CSS样式

🐯美化页面和宝可梦卡片的外观。

<div class="img-container">
   <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png"" alt="${name}">
</div>

css的美化

.pokemon .img-container {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  text-align: center;
}

.pokemon .img-container img {
  max-width: 90%;
  margin-top: 20px;
}

总结：

这个项目创建了一个漂亮的宝可梦图鉴，让用户能够浏览不同宝可梦的信息

38、mobile Tab Navigation（移动选项卡导航）

主要关注点：移动端标签导航页面的实现。

实现效果：

这是一个移动端标签导航页面，用户可以点击标签切换不同的内容显示。

2.gif

实现关键代码

HTML 结构：标签导航、内容和图像的基本布局。

 <div class="phone">
  <img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
  <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
  <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
  <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
  <nav>
    <ul>
      <li class="active">
        <i class="fas fa-home"></i>
        <p>Home</p>
      </li>
      <li>
        <i class="fas fa-box"></i>
        <p>Work</p>
      </li>
      <li>
        <i class="fas fa-book-open"></i>
        <p>Blog</p>
      </li>
      <li>
        <i class="fas fa-users"></i>
        <p>About Us</p>
      </li>
    </ul>
  </nav>
</div>

JavaScript 逻辑：处理标签点击事件，以显示对应的内容。

const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        hideAllContents()
        hideAllItems()

        item.classList.add('active')
        contents[idx].classList.add('show')
    })
})

function hideAllContents() {
    // 移除图片显示 
    contents.forEach(content => content.classList.remove('show'))
}


function hideAllItems() {
    // 移除活动的导航样式
    listItems.forEach(item => item.classList.remove('active'))
}

实现步骤：

  1. 监听标签导航的点击事件，点击标签时触发相应的内容显示。
  2. 使用 hideAllContents 函数隐藏所有内容。
  3. 使用 hideAllItems 函数清除所有标签的活动状态。
  4. 通过添加 show 类来显示所选的内容。

CSS样式

🐯用于布局、卡片样式和页面背景，包括手机框架、内容块和导航栏的样式。

图片的展示

.phone .content {
  opacity: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

.phone .content.show {
  opacity: 1;
}

导航栏的设计

nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
}

nav ul {
  background-color: #fff;
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav li {
  color: #777;
  cursor: pointer;
  flex: 1;
  padding: 10px;
  text-align: center;
}

nav ul li p {
  font-size: 12px;
  margin: 2px 0;
}

nav ul li:hover,
nav ul li.active {
  color: #8e44ad;
}

总结：

这个项目创建了一个简单的移动端标签导航，使用户能够浏览不同的内容。

39、password Strength Background（密码强度背景）

主要关注点：密码的长度，对应着清晰程度。

实现效果：

这是一个具有密码强度背景效果的页面，它会根据密码输入的长度改变背景的模糊程度

1.gif

实现关键代码

HTML 结构：包含密码输入框的表单和一个用于背景效果的。

<div class="background" id="background"></div>
<div class="bg-white rounded p-10 text-center shadow-md">
     <!-- 密码框输入框等 -->
</div>

JavaScript 逻辑：监听密码输入框的输入事件，根据输入的密码长度来改变背景的模糊程度。

获取到密码的长度，减少blur的效果

const password = document.getElementById('password')
const background = document.getElementById('background')

password.addEventListener('input', (e) => {
  const input = e.target.value
  const length = input.length
  const blurValue = 20 - length * 2
  background.style.filter = `blur(${blurValue}px)`
})

实现步骤：

  1. 监听密码输入框的输入事件。
  2. 获取输入的密码和密码长度。
  3. 根据密码长度计算模糊效果的值（blurValue）。
  4. 使用 filter 属性来应用模糊效果。

CSS样式

🐯背景图的显示和模糊效果的应用

.background {
  background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
    no-repeat center center/cover;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: -1;
  filter: blur(20px);
}

总结：

这个项目通过监听密码输入框的输入事件，根据密码长度来调整背景的模糊程度，从而实现了一个有趣的密码强度背景效果

40、3D Boxes Background（三维方框背景）

主要关注点：点击3D切换的时候，每一个方块的是如何切割图片的。

实现效果：

这是一个漂亮的3D盒子背景的示例，您可以通过点击 "Magic 🎩" 按钮来切换盒子的大小

实现关键代码

HTML 结构：一个按钮和用于显示3D盒子的容器。

<button id="btn" class="magic"> Magic 🎩 </button>
<div id="boxes" class="boxes big"></div> //big是大图,去掉big，就是小图

JavaScript 逻辑：处理按钮点击事件，切换盒子的大小。

注意 box.style.backgroundPosition = ${-j * 125}px ${-i * 125}px 对图片切割处理。

添加了盒子box类。

const boxesContainer = document.getElementById('boxes')
const btn = document.getElementById('btn')

btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))

function createBoxes() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      const box = document.createElement('div')
      box.classList.add('box')
      // 对背景进行切割 500px 500px ，125*4=500
      box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
      boxesContainer.appendChild(box); // 添加了盒子
    }
  }
}

createBoxes()

实现步骤：

  1. 监听按钮的点击事件，切换盒子容器的大小。
  2. 创建并添加多个盒子元素到容器中，根据位置设置不同的背景位置。

CSS样式 🐯按钮的点击立体效果，本身按钮有阴影，点击取消阴影同时下移，产生立体点击的假象

.magic {
  .......
  box-shadow: 0 3px rgba(249, 202, 36, 0.5);
  z-index: 100;
}

.magic:focus {
  outline: none;
}

.magic:active {
  box-shadow: none;
  transform: translateY(2px);
}

🐯用于页面的布局和盒子的样式。

.box {
  background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
  background-repeat: no-repeat;
  background-size: 500px 500px;
  position: relative;
  height: 125px;
  width: 125px;
  transition: 0.4s ease;
}

/* 变成一个右侧面， */
.box::after {
  content: '';
  background-color: #f6e58d;
  position: absolute;
  top: 8px;
  right: -15px;
  height: 100%;
  width: 15px;
  transform: skewY(45deg);
}

/* 变成一个下侧面， */
.box::before {
  content: '';
  background-color: #f9ca24;
  position: absolute;
  bottom: -15px;
  left: 8px;
  height: 15px;
  width: 100%;
  transform: skewX(45deg);
}

总结：

这个项目通过点击按钮实现了有趣的3D盒子背景切换效果，是一个很好的前端设计示例。

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

avatar
文章
阅读
粉丝