用CSS3和jQuery制作趣味动画简历，打造个性求职体验

前端

2023-11-30 11:29:13

动画简历，顾名思义，就是在简历中加入动画效果，让简历更加生动有趣，从而吸引招聘人员的注意。

随着互联网的发展，越来越多的求职者开始使用在线简历，动画简历也逐渐成为一种流行趋势。

制作一个动画简历并不难，只需要掌握一些基本的CSS3和jQuery知识即可。

下面，我们就一步步来教你如何使用CSS3和jQuery制作一个动画简历。

第一步：准备工作

准备一张自己的照片，最好是半身照，分辨率为300dpi。
准备好自己的简历内容，包括个人信息、教育经历、工作经历、技能特长等。
准备一个文本编辑器，比如记事本、Sublime Text等。
准备一个浏览器，比如Chrome、Firefox等。

第二步：创建HTML结构

在文本编辑器中创建一个新的文件，并保存为index.html。
在index.html中输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>我的简历</h1>
    </div>
    <div class="content">
      <div class="personal-info">
        <img src="my-photo.jpg" alt="我的照片">
        <h2>我的姓名</h2>
        <p>我的职位</p>
      </div>
      <div class="education">
        <h2>教育经历</h2>
        <ul>
          <li>学校名称</li>
          <li>专业名称</li>
          <li>毕业时间</li>
        </ul>
      </div>
      <div class="work-experience">
        <h2>工作经历</h2>
        <ul>
          <li>公司名称</li>
          <li>职位名称</li>
          <li>工作时间</li>
        </ul>
      </div>
      <div class="skills">
        <h2>技能特长</h2>
        <ul>
          <li>技能1</li>
          <li>技能2</li>
          <li>技能3</li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <p>联系方式</p>
    </div>
  </div>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

第三步：添加CSS样式

在文本编辑器中创建一个新的文件，并保存为style.css。
在style.css中输入以下代码：

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 容器 */
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 头部 */
.header {
  width: 100%;
  height: 100px;
  background-color: #333;
  color: #fff;
  text-align: center;
}

/* 内容 */
.content {
  width: 80%;
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* 个人信息 */
.personal-info {
  width: 30%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 教育经历 */
.education {
  width: 60%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 工作经历 */
.work-experience {
  width: 60%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 技能特长 */
.skills {
  width: 30%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 页脚 */
.footer {
  width: 100%;
  height: 100px;
  background-color: #333;
  color: #fff;
  text-align: center;
}

/* 图片 */
.personal-info img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 标题 */
h1, h2 {
  font-size: 24px;
}

/* 列表 */
ul {
  list-style-type: none;
  padding: 0;
}

/* 列表项 */
li {
  margin-bottom: 10px;
}

/* 链接 */
a {
  text-decoration: none;
  color: #333;
}

/* 按钮 */
button {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
}

/* 动画 */
.fade-in {
  animation: fade-in 1s ease-in-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

第四步：添加jQuery代码

在文本编辑器中创建一个新的文件，并保存为script.js。
在script.js中输入以下代码：

$(document).ready(function() {
  // 当页面加载完成后执行

  // 隐藏所有内容
  $('.content').hide();

  // 当滚动到页面顶部时显示头部
  $(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
      $('.header').fadeIn();
    } else {
      $('.header').fadeOut();
    }
  });

  // 当滚动到内容区域时显示内容
  $(window).scroll(function() {
    if ($(window).scrollTop() > $('.content').offset().top - $(window).height() / 2) {
      $('.content').fadeIn();
    }
  });

  // 当滚动到页脚时显示页脚
  $(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - $('.footer').height()) {
      $('.footer').fadeIn();
    } else {
      $('.footer').fadeOut();
    }
  });
});