首页用html css js写一个炫酷的人物介绍卡片

用html css js写一个炫酷的人物介绍卡片

时间: 2024-12-16 22:30:07 浏览: 27

创建一个炫酷的人物介绍卡片通常涉及HTML、CSS和JavaScript的结合运用。首先，我们构建基础结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>人物介绍卡片</title> </head> <body> <div class="card-container"> <div class="card"> <img id="profile-image" src="path_to_your_image.jpg" alt="人物头像"> <h2 id="name">姓名</h2> <p id="bio">简介</p> <button onclick="showMoreInfo()">更多</button> <div id="additional-info" class="hidden">  </div> </div> </div> <script src="scripts.js"></script> </body> </html> ``` 接下来是CSS样式，添加一些动画和布局效果: ```css /* styles.css */ .card { width: 300px; height: 450px; background-color: #f9f9f9; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .card:hover { transform: scale(1.05); } .bio, .additional-info { padding: 1rem; } .hidden { display: none; } #profile-image { width: 100%; height: auto; margin-bottom: 1rem; } ``` 最后，在JavaScript文件中添加交互功能： ```javascript // scripts.js function showMoreInfo() { const info = document.getElementById('additional-info'); if (info.classList.contains('hidden')) { info.style.display = 'block'; this.textContent = '隐藏'; } else { info.style.display = 'none'; this.textContent = '更多'; } } ``` 当点击“更多”按钮时，会显示或隐藏附加信息区域。

阅读全文