【页面效果】HTML代码构建了一个简洁的网页，其中包含一个带有动画背景效果的内容卡片。卡片最初显示一些占位符元素，这些元素在数据加载后被实际内容替换。

雨涵和大地

已于 2024-09-12 21:53:03 修改

阅读量255

点赞数 3

分类专栏： html 文章标签： html 前端 css javascript

于 2024-09-11 19:45:33 首次发布

本文链接：https://blog.csdn.net/2201_76060199/article/details/142148497

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML代码构建了一个简洁的网页，其中包含一个带有动画背景效果的内容卡片。卡片最初显示一些占位符元素，这些元素在数据加载后被实际内容替换。以下是代码的详细分析：

1. HTML结构

DOCTYPE和HTML基础结构：文档声明为HTML5，语言设置为英文。
Head部分：
- 设置了字符编码和视口配置，以确保网页在不同设备上正确显示。
- 引入了外部CSS文件style.css（尽管此文件中未显示其内容）。
- 在<style>标签中定义了内部CSS，用于页面的样式设计。
- 设置了网页的标题。
Body部分：
- 包含一个.card类的div，这是网页的主要内容卡片。
- 卡片分为.card-header和.card-content两部分。
- .card-header用于显示头部图片或动画背景。
- .card-content包含标题、摘要、作者信息和日期。

2. CSS样式

全局样式：
- * { box-sizing: border-box; }：确保所有元素的padding和border都包含在元素的总宽度和高度内。
- body：设置了背景颜色、字体、居中对齐、全屏高度和无滚动条。
图片和卡片样式：
- img：确保图片最大宽度不超过其父元素。
- .card：添加了阴影、圆角、固定宽度和隐藏溢出。
- .card-header和.card-header img：设置了头部图片的全覆盖和尺寸。
文本和内容样式：
- .card-content：设置了背景颜色和内边距。
- .card-title、.card-excerpt、.author等：为卡片内的不同文本部分设置了样式。
动画背景：
- .animated-bg和.animated-bg-text：使用渐变背景和动画来创建动态效果。
- @keyframes bgPos：定义了背景位置的动画，使背景在水平方向上移动。

3. JavaScript功能

元素选择：通过getElementById和querySelectorAll选择了需要操作的DOM元素。
数据加载：使用setTimeout在2.5秒后模拟数据加载。
数据填充：
- 在getData函数中，将实际内容插入到之前定义的占位符元素中。
- 移除.animated-bg和.animated-bg-text类，以停止动画效果。

4. 功能和用户体验

初始加载动画：通过CSS动画，在数据加载前为用户提供视觉反馈。
内容替换：在模拟的数据加载完成后，动态地替换卡片中的内容，并停止动画效果。

这段代码展示了一个带有动画加载效果的简洁内容卡片，并通过JavaScript动态地更新其内容。在实际应用中，需要添加实际的图片URL和可能的其他内容细节。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
      <style>
          * {
              box-sizing: border-box;
          }

          body {
              background-color: #ecf0f1;
              font-family: 'Roboto', sans-serif;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100vh;
              overflow: hidden;
              margin: 0;
          }

          img {
              max-width: 100%;
          }

          .card {
              box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
              border-radius: 10px;
              overflow: hidden;
              width: 350px;
          }

          .card-header {
              height: 200px;
          }

              .card-header img {
                  object-fit: cover;
                  height: 100%;
                  width: 100%;
              }

          .card-content {
              background-color: #fff;
              padding: 30px;
          }

          .card-title {
              height: 20px;
              margin: 0;
          }

          .card-excerpt {
              color: #777;
              margin: 10px 0 20px;
          }

          .author {
              display: flex;
          }

          .profile-img {
              border-radius: 50%;
              overflow: hidden;
              height: 40px;
              width: 40px;
          }

          .author-info {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              margin-left: 10px;
              width: 100px;
          }

              .author-info small {
                  color: #aaa;
                  margin-top: 5px;
              }

          .animated-bg {
              background-image: linear-gradient( to right, #f6f7f8 0%, #edeef1 10%, #f6f7f8 20%, #f6f7f8 100% );
              background-size: 200% 100%;
              animation: bgPos 1s linear infinite;
          }

          .animated-bg-text {
              border-radius: 50px;
              display: inline-block;
              margin: 0;
              height: 10px;
              width: 100%;
          }

          @keyframes bgPos {
              0% {
                  background-position: 50% 0;
              }

              100% {
                  background-position: -150% 0;
              }
          }

          </style>
    <title>Content Placeholder</title>
  </head>
  <body>
    <div class="card">
      <div class="card-header animated-bg" id="header">&nbsp;</div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
          &nbsp;
        </h3>
        <p class="card-excerpt" id="excerpt">
          &nbsp;
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              >&nbsp;</strong
            >
            <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
          </div>
        </div>
      </div>
    </div>

    <script>
        const header = document.getElementById('header')
        const title = document.getElementById('title')
        const excerpt = document.getElementById('excerpt')
        const profile_img = document.getElementById('profile_img')
        const name = document.getElementById('name')
        const date = document.getElementById('date')

        const animated_bgs = document.querySelectorAll('.animated-bg')
        const animated_bg_texts = document.querySelectorAll('.animated-bg-text')

        setTimeout(getData, 2500)

        function getData() {
            header.innerHTML =
                '<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'
            title.innerHTML = 'Lorem ipsum dolor sit amet'
            excerpt.innerHTML =
                'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'
            profile_img.innerHTML =
                '<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'
            name.innerHTML = 'John Doe'
            date.innerHTML = 'Oct 08, 2020'

            animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
            animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
        }

    </script>
  </body>
</html>