CSS动画（个人资料卡片）

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa63Oz8IaRI51Mw7mY02LHmnpXicG4icA3ERN1MVszMdNafsgV3xaVHLhMA6avquSJux4CLV8uggtfbw/640?wx_fmt=gif\&from=appmsg\&wxfrom=13
今天呈现的不仅是一个个人介绍界面，而是一次交互式的视觉体验。精心编排的HTML与CSS赋予了页面动感与美感，动画效果让每个元素都鲜活起来，吸引着访客的目光。

更进一步，JavaScript的加入让这个界面变得生动，响应每一次点击，带来意想不到的动画变化。

2.完整代码

HTML

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

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

javascript 复制代码

/**  
 * 当文档加载完成时，添加事件监听器以实现个人资料容器的点击交互效果。  
 * 此函数等待文档完全加载后执行，确保所选元素已经存在于DOM中。  
 */  
document.addEventListener("DOMContentLoaded", function() {  
    // 选择页面中个人资料容器的元素，为后续的交互逻辑做准备。  
    const profileContainer = document.querySelector('.profile-container');  
  
    /**  
     * 为个人资料容器添加点击事件监听器。  
     * 当元素被点击时，切换其上的 'clicked' 类，以实现展开或收起的效果。  
     */  
    profileContainer.addEventListener('click', function() {  
        // 切换 'clicked' 类，实现个人资料容器的展开和收起交互。  
        profileContainer.classList.toggle('hasClicked');  
    });  
});