1.整体效果
https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa63Oz8IaRI51Mw7mY02LHmnpXicG4icA3ERN1MVszMdNafsgV3xaVHLhMA6avquSJux4CLV8uggtfbw/640?wx_fmt=gif&from=appmsg&wxfrom=13
今天呈现的不仅是一个个人介绍界面，而是一次交互式的视觉体验。精心编排的HTML与CSS赋予了页面动感与美感，动画效果让每个元素都鲜活起来，吸引着访客的目光。
更进一步，JavaScript的加入让这个界面变得生动，响应每一次点击，带来意想不到的动画变化。
2.完整代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人页面</title>
<link rel="stylesheet" type="text/css" href="6_18.css">
</head>
<body>
<div class="profile-container">
<img src="https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg" alt="头像" class="avatar">
<h1>shichengfu</h1>
<p>你好！我是前端开发新手，正在学习HTML和CSS。</p>
<div class="social-links">
<a href="#" target="_blank">GitHub</a>
<a href="#" target="_blank">Twitter</a>
</div>
</div>
<script rel="6_18,js"></script>
</body>
</html>
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);
}
JavaScript
/**
* 当文档加载完成时，添加事件监听器以实现个人资料容器的点击交互效果。
* 此函数等待文档完全加载后执行，确保所选元素已经存在于DOM中。
*/
document.addEventListener("DOMContentLoaded", function() {
// 选择页面中个人资料容器的元素，为后续的交互逻辑做准备。
const profileContainer = document.querySelector('.profile-container');
/**
* 为个人资料容器添加点击事件监听器。
* 当元素被点击时，切换其上的 'clicked' 类，以实现展开或收起的效果。
*/
profileContainer.addEventListener('click', function() {
// 切换 'clicked' 类，实现个人资料容器的展开和收起交互。
profileContainer.classList.toggle('hasClicked');
});
});