CSS动画(个人资料卡片)

简介: CSS动画(个人资料卡片)

1.整体效果

今天呈现的不仅是一个个人介绍界面,而是一次交互式的视觉体验。精心编排的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');  
    });  
});
相关文章
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
|
25天前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
100 58
|
4天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
12 1
|
29天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
26 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
2月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
45 0
JS配合CSS3实现动画和拖动小星星小Demo
|
1月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
27 0
|
3月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
123 3
|
3月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
76 5
|
3月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
|
3月前
|
前端开发 JavaScript 开发者
css过渡与动画
css过渡与动画
42 0