网页UI设计人物介绍页面 - 互动动效实现

<!DOCTYPE html>
<html>
<head>
  <title>人物介绍</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
<pre><code>.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.profile-card {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.profile-card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.profile-card h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.profile-card p {
  margin-top: 5px;
  color: #666;
}

.btn {
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #555;
}

.description {
  display: none;
  margin-top: 10px;
  font-size: 18px;
  color: #666;
}
</code></pre>
  </style>
</head>
<body>
  <div class="container">
    <div class="profile-card">
      <img src="person.jpg" alt="Person Image">
      <div>
        <h2>张三</h2>
        <p>职业：设计师</p>
      </div>
    </div>
    <button class="btn">显示描述</button>
    <p class="description">张三是一位优秀的设计师，擅长网页UI设计和用户体验设计。</p>
  </div>
  <script>
    var btn = document.querySelector('.btn');
    var description = document.querySelector('.description');

    btn.addEventListener('click', function() {
      if (description.style.display === 'none') {
        description.style.display = 'block';
        btn.textContent = '隐藏描述';
      } else {
        description.style.display = 'none';
        btn.textContent = '显示描述';
      }
    });
  </script>
</body>
</html>