哈尔的移动城堡：动漫角色人物小卡片的设计实现

2023-02-22 04:31:11

哈尔的移动城堡：动漫角色人物小卡片的设计与实现

哈尔的移动城堡 作为一部经典动漫作品，其丰富的人物角色吸引了众多粉丝。为了让粉丝们更深入地了解这些角色，本文将通过HTML、CSS和JavaScript的组合，一步步构建一个动漫角色人物小卡片，展示人物信息并添加交互效果。

人物小卡片的设计

首先，我们从设计人物小卡片的样式入手。使用<div>元素创建卡片，并通过CSS设置卡片的样式，例如尺寸、背景色和边框。代码示例：

.card {
  width: 200px;
  height: 300px;
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 10px;
  margin: 10px;
}

人物小卡片的内容

接下来，填充人物小卡片的内容。使用<img>元素添加人物图片，<p>元素添加人物姓名和性格介绍。代码示例：

<div class="card">
  <img src="image.jpg" alt="人物图片">
  <p>人物姓名：霍尔</p>
  <p>人物性格：善良、勇敢、正义</p>
</div>

人物小卡片的交互效果

为了提升用户体验，我们可以添加交互效果。使用JavaScript实现鼠标移动到小卡片上时，图片缩小成圆形状，显示被图片覆盖住的文字。代码示例：

const cards = document.querySelectorAll('.card');

cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    const image = card.querySelector('img');
    image.style.borderRadius = '50%';
    const text = card.querySelector('p');
    text.style.display = 'block';
  });

  card.addEventListener('mouseleave', () => {
    const image = card.querySelector('img');
    image.style.borderRadius = '0';
    const text = card.querySelector('p');
    text.style.display = 'none';
  });
});