先上效果
今天呈现的不仅是一个个人介绍界面，而是一次交互式的视觉体验。精心编排的HTML与CSS赋予了页面动感与美感，动画效果让每个元素都鲜活起来，吸引着访客的目光。
更进一步，JavaScript的加入让这个界面变得生动，响应每一次点击，带来意想不到的动画变化。
完整代码
HTML:
<div class="profile-container"> <img src="https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg" alt="头像" class="avatar"> <h1>ZUO2302</h1> <p>你好！我是前端开发新手，正在学习HTML和CSS。</p> <div class="social-links"> <a href="#" target="_blank">GitHub</a> <a href="#" target="_blank">Twitter</a> </div> </div>
CSS代码：
body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; animation: backgroundFade 10s infinite alternate; } @keyframes backgroundFade { 0% { background-color: #f4f4f4; } 100% { background-color: #d4e6f1; } } .profile-container { background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; max-width: 400px; width: 100%; transform: scale(0.9); transition: transform 0.3s; } .hasClicked{ border:1px solid orange } .profile-container:hover { transform: scale(1); } .avatar { width: 100px; height: 100px; border-radius: 50%; margin-bottom: 20px; animation: rotate 4s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } h1 { font-size: 24px; margin: 0 0 10px; } p { color: #666; margin: 0 0 20px; } .social-links a { display: inline-block; margin: 0 10px; color: #3498db; text-decoration: none; position: relative; transition: color 0.3s; } .social-links a::after { content: ''; display: block; width: 100%; height: 2px; background-color: #3498db; position: absolute; left: 0; bottom: -5px; transform: scaleX(0); transition: transform 0.3s; } .social-links a:hover { color: #2980b9; } .social-links a:hover::after { transform: scaleX(1); }
JS:
/** * 当文档加载完成时，添加事件监听器以实现个人资料容器的点击交互效果。 * 此函数等待文档完全加载后执行，确保所选元素已经存在于DOM中。 */ document.addEventListener("DOMContentLoaded", function() { // 选择页面中个人资料容器的元素，为后续的交互逻辑做准备。 const profileContainer = document.querySelector('.profile-container'); /** * 为个人资料容器添加点击事件监听器。 * 当元素被点击时，切换其上的 'clicked' 类，以实现展开或收起的效果。 */ profileContainer.addEventListener('click', function() { // 切换 'clicked' 类，实现个人资料容器的展开和收起交互。 profileContainer.classList.toggle('hasClicked'); }); });
