<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5微信招聘信息动画切换特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
overflow-x: hidden;
}
.wechat-container {
max-width: 414px;
margin: 0 auto;
background: #ededed;
min-height: 100vh;
position: relative;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.wechat-header {
background: #2ecc71;
color: white;
padding: 15px;
text-align: center;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.wechat-header h1 {
font-size: 18px;
font-weight: normal;
}
.wechat-back {
position: absolute;
left: 15px;
top: 15px;
font-size: 16px;
color: white;
text-decoration: none;
}
.recruitment-container {
position: relative;
height: calc(100vh - 60px);
overflow: hidden;
}
.recruitment-slide {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
opacity: 0;
transform: translateX(100%);
background: white;
border-radius: 10px 10px 0 0;
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
}
.recruitment-slide.active {
opacity: 1;
transform: translateX(0);
}
.recruitment-slide.prev {
transform: translateX(-100%);
}
.job-card {
background: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.job-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.job-title {
font-size: 18px;
color: #333;
margin-bottom: 8px;
font-weight: bold;
}
.job-salary {
color: #e74c3c;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
}
.job-company {
color: #3498db;
margin-bottom: 8px;
font-size: 15px;
}
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.job-tag {
background: #f0f0f0;
color: #666;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
}
.job-desc {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.job-footer {
display: flex;
justify-content: space-between;
align-items: center;
color: #999;
font-size: 12px;
padding-top: 10px;
border-top: 1px dashed #eee;
}
.apply-btn {
background: #2ecc71;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
}
.apply-btn:hover {
background: #27ae60;
}
.slide-indicators {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 5;
}
.indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
.indicator.active {
background: #2ecc71;
transform: scale(1.2);
}
.slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 5;
opacity: 0;
transition: opacity 0.3s;
}
.recruitment-container:hover .slide-nav {
opacity: 1;
}
.slide-nav.prev {
left: 10px;
}
.slide-nav.next {
right: 10px;
}
.wechat-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: 414px;
margin: 0 auto;
background: white;
padding: 10px;
display: flex;
justify-content: space-around;
border-top: 1px solid #eee;
z-index: 10;
}
.footer-tab {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 12px;
text-decoration: none;
}
.footer-tab i {
font-size: 22px;
margin-bottom: 5px;
}
.footer-tab.active {
color: #2ecc71;
}
.link-container {
text-align: center;
padding: 20px;
margin-top: 20px;
}
.more-link {
display: inline-block;
padding: 10px 20px;
background: #2ecc71;
color: white;
text-decoration: none;
border-radius: 20px;
font-size: 14px;
transition: all 0.3s;
}
.more-link:hover {
background: #27ae60;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* 动画效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.job-card {
animation: fadeIn 0.6s ease-out forwards;
}
.job-card:nth-child(1) { animation-delay: 0.1s; }
.job-card:nth-child(2) { animation-delay: 0.2s; }
.job-card:nth-child(3) { animation-delay: 0.3s; }
.job-card:nth-child(4) { animation-delay: 0.4s; }
.job-card:nth-child(5) { animation-delay: 0.5s; }
</style>
</head>
<body>
<div class="wechat-container">
<div class="wechat-header">
<a href="#" class="wechat-back">‹</a>
<h1>热门招聘信息</h1>
</div>
<div class="recruitment-container">
<!-- 第一页招聘信息 -->
<div class="recruitment-slide active">
<div class="job-card">
<div class="job-title">前端开发工程师</div>
<div class="job-salary">15-30K·14薪</div>
<div class="job-company">腾讯科技 · 深圳</div>
<div class="job-tags">
<span class="job-tag">3-5年</span>
<span class="job-tag">本科</span>
<span class="job-tag">Vue/React</span>
</div>
<div class="job-desc">
负责公司核心产品的前端开发工作，参与前端架构设计和优化，与产品、设计、后端团队紧密合作...
</div>
<div class="job-footer">
<span>发布于1天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">Java高级开发工程师</div>
<div class="job-salary">20-40K·16薪</div>
<div class="job-company">阿里巴巴 · 杭州</div>
<div class="job-tags">
<span class="job-tag">5-10年</span>
<span class="job-tag">本科</span>
<span class="job-tag">Spring Cloud</span>
</div>
<div class="job-desc">
参与阿里云核心产品的架构设计与开发，负责高并发、分布式系统的研发，解决复杂技术问题...
</div>
<div class="job-footer">
<span>发布于2天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">产品经理</div>
<div class="job-salary">18-35K·14薪</div>
<div class="job-company">字节跳动 · 北京</div>
<div class="job-tags">
<span class="job-tag">3-5年</span>
<span class="job-tag">本科</span>
<span class="job-tag">B端产品</span>
</div>
<div class="job-desc">
负责公司企业级产品的规划与设计，深入理解用户需求，制定产品路线图，协调研发团队推动产品落地...
</div>
<div class="job-footer">
<span>发布于3天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
</div>
<!-- 第二页招聘信息 -->
<div class="recruitment-slide">
<div class="job-card">
<div class="job-title">UI设计师</div>
<div class="job-salary">12-25K·13薪</div>
<div class="job-company">美团 · 上海</div>
<div class="job-tags">
<span class="job-tag">3-5年</span>
<span class="job-tag">本科</span>
<span class="job-tag">移动端设计</span>
</div>
<div class="job-desc">
负责美团核心产品的UI设计工作，参与产品体验优化，输出高质量的设计方案，与产品、开发团队紧密配合...
</div>
<div class="job-footer">
<span>发布于4天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">数据分析师</div>
<div class="job-salary">15-30K·14薪</div>
<div class="job-company">拼多多 · 上海</div>
<div class="job-tags">
<span class="job-tag">2-5年</span>
<span class="job-tag">硕士</span>
<span class="job-tag">SQL/Python</span>
</div>
<div class="job-desc">
基于海量业务数据进行分析挖掘，建立数据模型，为业务决策提供数据支持，输出有价值的分析报告...
</div>
<div class="job-footer">
<span>发布于5天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">测试开发工程师</div>
<div class="job-salary">15-28K·14薪</div>
<div class="job-company">华为 · 深圳</div>
<div class="job-tags">
<span class="job-tag">3-5年</span>
<span class="job-tag">本科</span>
<span class="job-tag">自动化测试</span>
</div>
<div class="job-desc">
参与公司核心产品的测试工作，设计和开发自动化测试框架，提高测试效率，保障产品质量...
</div>
<div class="job-footer">
<span>发布于6天前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
</div>
<!-- 第三页招聘信息 -->
<div class="recruitment-slide">
<div class="job-card">
<div class="job-title">算法工程师</div>
<div class="job-salary">25-50K·16薪</div>
<div class="job-company">百度 · 北京</div>
<div class="job-tags">
<span class="job-tag">3-5年</span>
<span class="job-tag">硕士</span>
<span class="job-tag">机器学习</span>
</div>
<div class="job-desc">
负责搜索推荐算法的研发与优化，应用深度学习技术解决实际问题，持续提升算法效果和用户体验...
</div>
<div class="job-footer">
<span>发布于1周前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">运营总监</div>
<div class="job-salary">30-60K·16薪</div>
<div class="job-company">京东 · 北京</div>
<div class="job-tags">
<span class="job-tag">8-10年</span>
<span class="job-tag">本科</span>
<span class="job-tag">电商运营</span>
</div>
<div class="job-desc">
全面负责京东核心业务的运营管理工作，制定运营策略，带领团队实现业务目标，提升用户体验和GMV...
</div>
<div class="job-footer">
<span>发布于2周前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
<div class="job-card">
<div class="job-title">网络安全工程师</div>
<div class="job-salary">20-40K·14薪</div>
<div class="job-company">360 · 北京</div>
<div class="job-tags">
<span class="job-tag">5-8年</span>
<span class="job-tag">本科</span>
<span class="job-tag">渗透测试</span>
</div>
<div class="job-desc">
负责公司产品的安全评估和渗透测试，发现和修复安全漏洞，制定安全防护方案，提升整体安全水平...
</div>
<div class="job-footer">
<span>发布于3周前</span>
<button class="apply-btn">立即申请</button>
</div>
</div>
</div>
<div class="slide-nav prev">‹</div>
<div class="slide-nav next">›</div>
<div class="slide-indicators">
<div class="indicator active" data-slide="0"></div>
<div class="indicator" data-slide="1"></div>
<div class="indicator" data-slide="2"></div>
</div>
</div>
<div class="wechat-footer">
<a href="#" class="footer-tab active">
<i>🏠</i>
<span>首页</span>
</a>
<a href="#" class="footer-tab">
<i>🔍</i>
<span>搜索</span>
</a>
<a href="#" class="footer-tab">
<i>💼</i>
<span>职位</span>
</a>
<a href="#" class="footer-tab">
<i>👤</i>
<span>我的</span>
</a>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.recruitment-slide');
const indicators = document.querySelectorAll('.indicator');
const prevBtn = document.querySelector('.slide-nav.prev');
const nextBtn = document.querySelector('.slide-nav.next');
let currentSlide = 0;
// 切换幻灯片
function goToSlide(n) {
slides[currentSlide].classList.remove('active');
slides[currentSlide].classList.add('prev');
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
slides[currentSlide].classList.remove('prev');
// 更新指示器
indicators.forEach((indicator, index) => {
if (index === currentSlide) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
// 为每个卡片添加动画
const jobCards = slides[currentSlide].querySelectorAll('.job-card');
jobCards.forEach((card, index) => {
card.style.animationDelay = `${index * 0.1 + 0.3}s`;
});
}
// 下一张
function nextSlide() {
goToSlide(currentSlide + 1);
}
// 上一张
function prevSlide() {
goToSlide(currentSlide - 1);
}
// 按钮事件
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
// 指示器事件
indicators.forEach(indicator => {
indicator.addEventListener('click', function() {
const slideIndex = parseInt(this.getAttribute('data-slide'));
goToSlide(slideIndex);
});
});
// 键盘导航
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowRight') {
nextSlide();
} else if (e.key === 'ArrowLeft') {
prevSlide();
}
});
// 触摸滑动支持
let touchStartX = 0;
let touchEndX = 0;
document.querySelector('.recruitment-container').addEventListener('touchstart', function(e) {
touchStartX = e.changedTouches[0].screenX;
}, false);
document.querySelector('.recruitment-container').addEventListener('touchend', function(e) {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, false);
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
nextSlide();
}
if (touchEndX > touchStartX + 50) {
prevSlide();
}
}
// 自动轮播
let slideInterval = setInterval(nextSlide, 5000);
// 鼠标悬停时暂停轮播
document.querySelector('.recruitment-container').addEventListener('mouseenter', function() {
clearInterval(slideInterval);
});
document.querySelector('.recruitment-container').addEventListener('mouseleave', function() {
slideInterval = setInterval(nextSlide, 5000);
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
