改变文字墙：玻璃形态、CSS 动画和版式的现代设计-js教程-PHP中文网

), paragraphs (

首页

web前端

js教程

改变文字墙：玻璃形态、CSS 动画和版式的现代设计

Patricia Arquette

Nov 21, 2024 am 10:45 AM

Transforming the Wall of Text: Modern Design with Glassmorphism, CSS Animations, and Typography

简介
“文本墙”——一大堆无格式的内容，读起来像是一件苦差事。无论您是在构建博客、教育资源还是登陆页面，此类墙都会使用户脱离并离开。但是，如果您可以将这个沉闷的街区变成一个现代的、视觉上令人惊叹的、互动的杰作呢？

在本教程中，我们将向您展示如何使文本墙既有吸引力又可读。使用玻璃形态、响应式排版和流畅的动画，您可以轻松引导用户浏览您的内容。这种方法非常适合开发人员、设计师以及任何希望改进其 Web 项目的人。

在本教程结束时，您将学到：

如何为文本较多的内容构建 HTML 语义结构。
如何应用现代 CSS 技术，包括 glassmorphism 和优雅的排版。
如何使用 CSS 动画和 JavaScript 创建动态的滚动触发效果。
如何添加微妙的交互性和层次结构以使文本内容引人入胜。

第 1 步：构建 HTML

每一个好的设计都始于组织良好的 HTML。语义 HTML 不仅提高了可访问性，还使您的设计更易于设计和维护。

这是我们将设计的示例结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wall of Text - Glassmorphism</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<p>Key elements:</p>

<ul>
<li>Semantic tags: Tags like , , and  improve readability for developers and accessibility for screen readers.</li>
<li>Content hierarchy: Break down the wall into smaller, readable blocks using headings (<h2 id="paragraphs">), paragraphs (</h2>
<p>), and lists (</p>
<ul>).</ul>
</li>
<li>Quotes: Use  for memorable quotes to add visual interest and meaning.</li>
</ul>

<p>Step 2: Crafting the Design with CSS</p>

<p>To make this text stand out, we’ll use modern glassmorphism techniques, strong typography, and subtle interactivity.</p>

<p>Glassmorphism Background</p>

<p>Glassmorphism combines a semi-transparent background, blur effects, and shadows to mimic frosted glass. It gives a modern and polished look.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.9)), url('https://source.unsplash.com/1600x900/?abstract,texture') no-repeat center center/cover;
  color: #333;
  overflow: auto;
}

.container {
  width: 80%;
  max-width: 900px;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.95); /* Subtle frosted effect */
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.container:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

登录后复制

版式

排版在可读性方面起着至关重要的作用。专注于干净的无衬线字体，具有一致的行间距和清晰的层次结构。

.text-wall h2 {
  font-size: 2rem;
  text-transform: uppercase;
  color: #333;
  border-bottom: 2px solid #ff8a00;
  padding-bottom: 0.5rem;
}

.text-wall p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #555;
}

.text-wall aside {
  font-style: italic;
  background: rgba(240, 240, 240, 1); /* Light background for readability */
  padding: 1rem 1.5rem;
  border-radius: 15px;
  margin-top: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

登录后复制

第3步：添加滚动动画

动画使设计充满活力。我们将使用 Intersection Observer API 在部分进入视口时触发动画。

用于滚动效果的 JavaScript

document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('.text-wall section');

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('in-view');
        observer.unobserve(entry.target);
      }
    });
  });

  sections.forEach((section) => observer.observe(section));
});

登录后复制

动画 CSS

.text-wall section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.text-wall section.in-view {
  opacity: 1;
  transform: translateY(0);
}

登录后复制

第 4 步：添加标注部分

让我们添加一个标注部分来宣传您的项目或服务。例如，角斗士之战的促销：




<p>结论</p>

<p>通过这些步骤，您已经将无聊的文字墙变成了视觉上引人注目的交互式体验。使用语义 HTML、玻璃形态和滚动触发的动画，您的内容现在变得现代且引人入胜。无论是博客、登陆页面还是教育资源，这种设计方法都能提升用户体验。</p>

<p>？探索现场演示并尝试在您的下一个项目中使用它：<br>
文字墙 - CodePen 上重新定义的 Glassmorphism https://codepen.io/HanGPIIIErr/pen/BaXexPL</p>

<p>别忘了查看 https://gladiatorsbattle.com/ 以获得更多灵感和史诗般的游戏玩法！走进古罗马世界，收集专属卡牌，参与惊心动魄的战斗。在 Twitter 上关注我们：@GladiatorsBT！ ？</p>

登录后复制

以上是改变文字墙：玻璃形态、CSS 动画和版式的现代设计的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7909

Java教程

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1248

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。