以下是 html5微信招聘信息动画切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>某同城微招聘</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
<!--
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
-->
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swiper-container" id="swiper-container-v">
<section class="poster_wrap load" id="load">
<div class="p_loading">
<div class="p_loading_logo"></div>
<p class="p_loading_tip">新生活，从新工作开始</p>
</div>
</section>
<div class="swiper-wrapper">
<!-------------slide1----------------->
<section class="swiper-slide swiper-slide1 swiper-slide-v" >
<div class="index-top ani" swiper-animate-effect="myZoomIn1" swiper-animate-duration="0.6s" swiper-animate-delay="0s">
<div class="logo">
<div class="box1"><div class="box2">
<img src="upload/wzp_logo.png" >
</div></div>
</div>
<h1 class="poster_tit">某同城公司</h1>
<p class="poster_details">新生活，从新工作开始</p>
</div>
<div class="building ani" swiper-animate-effect="myZoomIn2" swiper-animate-duration="0.6s" swiper-animate-delay="0s"></div>
</section>
<!---------------slide2-------------->
<section class="swiper-slide swiper-slide2 swiper-slide-v">
<ul class="company_intro">
<li class="intro1 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
<div class="icon"><i></i></div>
<p>深圳</p>
</li>
<li class="intro2 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
<div class="icon"><i></i></div>
<p>50-500人</p>
</li>
<li class="intro3 ani" swiper-animate-effect="myFlip" swiper-animate-duration="0.3s" swiper-animate-delay="0.2s">
<div class="icon"><i></i></div>
<p>私营</p>
</li>
</ul>
<h3 class="about_us_tit ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s"><i class="about_us_tit_ico"></i>认识我们</h3>
<div class="about_us_msg_p ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.5s">美国纽交所上市公司，国内专业的“本地、免费、真实、高效”生活服务平台！找租房，找二手房，找工作，找兼职，买卖二手，二手车交易，买卖宠物，找搬家，找保姆，找保洁，租车拼车，工商注册，婚车婚宴，上某同城一站解决！信息真实可靠，先行赔付！</div>
</section>
<!----------------slide3-------------->
<section class="swiper-slide swiper-slide3 swiper-slide-v">
<h1 class="abus_head"><i class="about_us_tit_ico"></i>我们的福利</h1>
<div class="welf_bg">
<div class="one ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s"><span>五险一金</span></div>
<div class="two ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"><span>每周双休</span></div>
<div class="thr ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>福利待遇好</span></div>
<div class="thi ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s"><span>发展前景好</span></div>
<div class="fiv ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>晋升空间大</span></div>
<div class="six ani" style="transition-timing-function:linear;" swiper-animate-effect="myrotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><span>提供培训</span></div>
</div>
</section>
<!-------------slide4----------------->
<section class="swiper-slide swiper-slide4 swiper-slide-v">
<h1 class="posit_tit"><i class="about_us_tit_ico"></i>我们招聘的职位</h1>
<div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="posit_details_head">
<h3 class="posit_details_tit">公关专员</h3>
<span class="posit_details_money"><strong>面议</strong></span>
<p class="posit_details_tip">经验不限、学历本科</p>
</div>
<div class="job_details">
<p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
<h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情>></a></h3>
<div class="job_msg">任职资格：1.协助领导处理与各部门沟通和合作事宜；<br>
2.收集媒体信息，处理与各类媒体接洽、合作关系，协助媒介公关；<br>
3.注意收集影响本公司形象、声誉、关系的因素和事件信息，分析其后果，及时向领导提出对策建议；<br>
4.配合做好来宾迎送、接待、陪同、参观、讲解等工作；<br>
5.负责对合同的审阅、整理、归档、款项申请及保管工作；<br>
6.完成领导交办的其它工作。</div>
</div>
<div class="posit_arrow_bot"></div>
</div>
<div class="swiper-slide slide2">
<div class="posit_details_head">
<h3 class="posit_details_tit">前台接待/总机/接待生</h3>
<span class="posit_details_money"><strong>面议</strong></span>
<p class="posit_details_tip">经验不限、学历不限</p>
</div>
<div class="job_details">
<p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
<h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情>></a></h3>
<div class="job_msg">任职资格：1、准确接听/转接电话，接待来访客人并及时准确通知被访人员；<br>
2、收发公司邮件、报刊、传真和物品等并做好登记管理以及转递工作；<br>
3、熟悉掌握前台各项操作流程，并熟知各会员卡的种类，以及卖品和出租更衣柜的销售价格；<br>
4、完成上级主管交办的其它工作，做好其他部门的协助工作；<br>
5、具有良好的待人接物及沟通协调能力，具有服务意识，负有责任心，性格活泼开朗，具有亲和力<br>
</div>
</div>
<div class="posit_arrow_bot"></div>
</div>
<div class="swiper-slide slide3">
<div class="posit_details_head">
<h3 class="posit_details_tit">Web前端开发、互联网软件开发工程师</h3>
<span class="posit_details_money"><strong>面议</strong></span>
<p class="posit_details_tip">经验不限、学历大专</p>
</div>
<div class="job_details">
<p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
<h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情>></a></h3>
<div class="job_msg">
任职资格：精通javascript、html；精通PS、Dreamweaver;<br>
精通WEB标准，熟练运用 DIV+CSS 来制作符合 w3c 规范的页面;<br>
具备熟练的编写和修改代码能力;<br>
懂得网络营销、精通页面优化技巧;<br>
具备良好的团队合作精神、较好的沟通能力、高度的责任感;</div>
</div>
<div class="posit_arrow_bot"></div>
</div>
<div class="swiper-slide slide4">
<div class="posit_details_head">
<h3 class="posit_details_tit">总经理助理/总裁助理/总经理秘书</h3>
<span class="posit_details_money"><strong>面议</strong></span>
<p class="posit_details_tip">经验不限、学历大专</p>
</div>
<div class="job_details">
<p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
<h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情>></a></h3>
<div class="job_msg">任职资格：1、负责对项目出现的各类问题进行沟通协调，及时向总裁反馈重要信息；<br>
2、根据总裁需要，搜集行业相关信息，统计数据，撰写可行性研究报告等供总经理决策；<br>
3、协助总裁与客户建立良好的合作关系，并负责做好公司重要来宾的接待安排；<br>
4、撰写总裁需要的有关报告、文件；<br>
5、处理涉及总裁的电话、邮件、传真等各种渠道的信息，做到合理过滤和正确传达；<br>
6、有总裁亲自出面进行的接待，其餐饮、住宿、旅游等具体细节有总裁助理协助行政部共同安排；<br>
7、完成公司领导交办的其他工作任务；</div>
</div>
<div class="posit_arrow_bot"></div>
</div>
<div class="swiper-slide slide5">
<div class="posit_details_head">
<h3 class="posit_details_tit">文案策划</h3>
<span class="posit_details_money"><strong>面议</strong></span>
<p class="posit_details_tip">经验不限、学历本科</p>
</div>
<div class="job_details">
<p class="job_address">工作地点：广东省深圳市南山区高新科技园</p>
<h3 class="job_name">任职要求：<a class="job_name_details" href="#">职位详情>></a></h3>
<div class="job_msg">任职资格：1、文笔流畅，触觉敏锐，思路清晰，良好的沟通能力和演讲能力；<br>2、熟练操作PPT，Excel等相关办公软件；了解无线WiFi网络常识，乐于追赶时尚潮流；<br>3、熟悉微营销，擅长媒体的媒介数据分析、媒体策略、投放计划、广告监测执行、广告效果评估等相关工作，具备独立的媒体策划能力和提案能力，有成功策划案例者优先；<br>4、具备良好的职业素养、较强的执行力、责任心、工作主动性、服务意识、沟通能力和团队合作精神。<br>5、本科或以上学历，2年以上广告公司媒介策划相关工作经验。</div>
</div>
<div class="posit_arrow_bot"></div>
</div>
</div>
</div>
<div class="job_btn_con ani" swiper-animate-effect="slideInRight" swiper-animate-duration="0.1s" swiper-animate-delay="0.5s">
<div class="job_btn_list">
<a href="#" class="job_btn add" >投个简历</a>
<a href="tel:0755-12345678" class="job_btn tel">电话联系</a>
</div>
</div>
</section>
<!-------------slide5----------------->
<section class="swiper-slide swiper-slide5 swiper-slide-v">
<div class="logo">
<div class="box1"><div class="box2">
<img src="upload/wzp_logo.png" >
</div></div>
</div>
<p class="praise_tip ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s">已有<b>5</b>人觉得这家公司值得加入</p>
<a class="praise_btn ani" href="javascript:;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
<i><em></em></i><span>点赞，值得加入</span>
</a>
<a class="praise_share_btn ani" href="javascript:;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.2s">分享给好友</a>
<a class="more_position ani" href="#" id="viewmoreinfozp" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">查看更多职位>></a>
</section>
<!-------------slide6----------------->
<section class="swiper-slide swiper-slide6 swiper-slide-v">
<div class="logo ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
<div class="box1"><div class="box2">
<img src="upload/wzp_logo.png" >
</div></div>
</div>
<div class="search_posit ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
<div class="search_input_con">
<div class="search_input_details">
<input type="text" placeholder="搜索我感兴趣的企业" value="" class="search_input">
</div>
</div>
<a class="search_btn" href="javascript:;"></a>
</div>
<a class="search_footer_btn ani" href="#" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">创建我的微招聘</a>
<p class="search_footer_tip ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">某同城提供以上服务</p>
</section>
</div>
<div class="arrow-box">
<img src="images/arrow.png" id="array">
</div>
<div class="swiper-pagination"></div>
</div>
<script src="js/code.min.js"></script>
<!--切换效果采用Swiper，更多Swiper应用敬请关注Swiper中文网-->
</body>
</html>
JS代码(code.min.js):
window.onload=function(){
document.getElementById("load").style.display="none",new Swiper("#swiper-container-h",{
slidesPerView:"auto",centeredSlides:!0,spaceBetween:15}
),new Swiper("#swiper-container-v",{
speed:500,direction:"vertical",pagination:".swiper-pagination",mousewheelControl:!0,onInit:function(a){
a.myactive=0;
for(var b=0;
b<a.slides.length;
b++)a.slides[b].style.zIndex=0;
a.slides[a.myactive].style.zIndex=1,swiperAnimateCache(a),swiperAnimate(a)}
,onTransitionStart:function(a){
a.params.onlyExternal=!0}
,onTransitionEnd:function(a){
a.params.onlyExternal=!1,a.myactive=a.activeIndex;
for(var b=0;
b<a.slides.length;
b++)a.slides[b].style.zIndex=0;
a.slides[a.myactive].style.zIndex=1,swiperAnimate(a)}
,watchSlidesProgress:!0,onProgress:function(a){
var b,c,d,e;
for(a.myactive||(a.myactive=0),b=0;
b<a.slides.length;
b++)c=a.slides[b],es=c.style,d=c.progress,e=d*a.height,opacity=0,b==a.myactive&&(opacity=1-Math.abs(d)/2),(a.slides[a.myactive].progress>0&&b==a.myactive+1||a.slides[a.myactive].progress<0&&b==a.myactive-1)&&(opacity=.5+Math.abs(.5*a.slides[a.myactive].progress)),c.style.opacity=opacity,b!=a.myactive&&(es.webkitTransform=es.MsTransform=es.msTransform=es.MozTransform=es.OTransform=es.transform="translate3d(0,"+e+"px,0)")}
,onSetTransition:function(a,b){
for(var c=0;
c<a.slides.length;
c++)es=a.slides[c].style,es.webkitTransitionDuration=es.MsTransitionDuration=es.msTransitionDuration=es.MozTransitionDuration=es.OTransitionDuration=es.transitionDuration=b+"ms"}
}
)}
;
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;}
html,body{height:100%;}
li{list-style:none;}
body{font-family:"microsoft yahei";background:#fff;}
#swiper-container-v{/* width:320px;height:480px;*/
width:100%;max-width:640px;height:100%;}
.swiper-slide-v{width:100%;height:100%;background:-webkit-linear-gradient(top,#595aa0 0,#5d7fd4 30%,#678fe4 53%,#7ba2de 70%,#afcfc8 100%);overflow:hidden;}
.swiper-slide4,.swiper-slide5{background:-webkit-linear-gradient(top,#7ea5dc 0,#98bbd2 47%,#aecec8 68%,#dbe8ac 100%);}
.swiper-slide6{background:-webkit-linear-gradient(top,#5b317a 0,#7a448e 46%,#a25b85 64%,#cc7478 82%,#e9896e 100%);}
img{display:block;}
.swiper-pagination-bullet{width:6px;height:6px;background:#fff;opacity:.4;}
.swiper-pagination-bullet-active{opacity:1;}
@-webkit-keyframes start{0%,30%{opacity:0;-webkit-transform:translate(0,10px);}
60%{opacity:1;-webkit-transform:translate(0,0);}
100%{opacity:0;-webkit-transform:translate(0,-8px);}
}
@-moz-keyframes start{0%,30%{opacity:0;-moz-transform:translate(0,10px);}
60%{opacity:1;-moz-transform:translate(0,0);}
100%{opacity:0;-moz-transform:translate(0,-8px);}
}
@keyframes start{0%,30%{opacity:0;transform:translate(0,10px);}
60%{opacity:1;transform:translate(0,0);}
100%{opacity:0;transform:translate(0,-8px);}
}
@-webkit-keyframes myZoomIn1{0%{opacity:0.4;-webkit-transform:scale3d(.4,.4,.4) translate3d(0,30%,0);transform:scale3d(.4,.4,.4) translate3d(0,30%,0);}
100%{opacity:1;}
}
@keyframes myZoomIn1{0%{opacity:0.4;-webkit-transform:scale3d(.4,.4,.4) translate3d(0,30%,0);transform:scale3d(.4,.4,.4) translate3d(0,30%,0);}
100%{opacity:1;}
}
.myZoomIn1{-webkit-animation-name:myZoomIn1;animation-name:myZoomIn1;}
@-webkit-keyframes myZoomIn2{0%{opacity:0.4;}
100%{opacity:1;transform:scale3d(1.06,1.06,1.06);}
}
@keyframes myZoomIn2{0%{opacity:0.4;}
100%{opacity:1;transform:scale3d(1.06,1.06,1.06);}
}
.myZoomIn2{-webkit-animation-name:myZoomIn2;animation-name:myZoomIn2;}
@-webkit-keyframes myFlip{0%{opacity:0.4;-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);}
100%{opacity:1;}
}
@keyframes myFlip{0%{opacity:0.4;transform:rotateY(360deg);}
100%{opacity:1;}
}
.myFlip{-webkit-animation-name:myFlip;animation-name:myFlip;}
@-webkit-keyframes myrotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-250deg) scale3d(.3,.3,.3);transform:rotate3d(0,0,1,-250deg) scale3d(.3,.3,.3);opacity:0;}
100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1;}
}
@keyframes myrotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-250deg) scale3d(.3,.3,.3);-ms-transform:rotate3d(0,0,1,-250deg) scale3d(.3,.3,.3);transform:rotate3d(0,0,1,-250deg) scale3d(.3,.3,.3);opacity:0;}
100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1;}
}
.myrotateIn{-webkit-animation-name:myrotateIn;animation-name:myrotateIn}
@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframes loading{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
.loading{-webkit-animation-name:loading;animation-name:loading}
/*loading*/
.poster_wrap.load{height:100%;background:#e84c3d;z-index:100;background:-webkit-linear-gradient(top,#595aa0 0,#5d7fd4 30%,#678fe4 53%,#7ba2de 70%,#afcfc8 100%);}
.poster_wrap{-webkit-transform:translate3d(0,0,0);-webkit-transition:-webkit-transform .3s linear,opacity .3s linear;}
.p_loading{position:absolute;top:-40px;left:0;right:0;bottom:0;margin:auto;width:100%;height:150px;}
.p_loading_logo{display:block;width:100px;height:100px;background:url(../images/zp_loading_new.png) center top no-repeat;background-size:100%;margin:0 auto;-webkit-animation:loading 3s linear infinite;animation:loading 3s linear infinite;}
.p_loading_tip{color:#fff;font-size:15px;text-align:center;line-height:25px;margin-top:25px;text-shadow:1px 1px 1px rgba(0,0,0,.1);}
/**/
.logo{width:116px;height:116px;margin:30px auto 0;position:relative;background:rgba(255,255,255,.03);border-radius:100px;padding:8px 6px 6px 8px;}
.logo .box1{width:98px;height:98px;position:relative;background:rgba(255,255,255,.03);border-radius:100px;padding:10px 8px 8px 10px;}
.logo .box2{width:88px;height:88px;position:relative;background:rgba(255,255,255,.05);border-radius:100px;padding:6px 4px 4px 6px;}
.logo img{width:100%;border-radius:100px;}
.index-top h1{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.1);font-size:30px;font-family:"黑体";text-align:center;line-height:35px;margin-top:100px;padding:0 10px;word-break:break-all;}
@media screen and (max-height:480px){.logo{margin-top:20px;}
.index-top h1{margin-top:20px;}
}
@media screen and (max-height:568px) and (min-height:480px){.logo{margin-top:30px;}
.index-top h1{margin-top:60px;}
}
.index-top p{color:#fff;font-size:20px;text-shadow:0 0 2px rgba(0,0,0,.2);text-align:center;line-height:30px;margin-top:10px;}
.building{position:absolute;bottom:0;left:0;width:100%;height:262px;background-image:url(../images/zp_index_bg.png);background-repeat:no-repeat;background-size:cover;}
/**/
.company_intro{display:-webkit-box;display:-webkit-flex;display:flex;padding-top:16%;}
.company_intro li{-webkit-box-flex:1;-webkit-flex:1;flex:1;}
.company_intro li .icon{width:60px;height:60px;margin:auto;padding:12px;border-radius:100%;background-color:rgba(255,255,255,.03);}
.company_intro li .icon i{width:60px;height:62px;display:block;background-image:url(../images/p_ico_new.png);background-size:100% auto;}
.company_intro .intro2 .icon i{background-position:0 -65px;}
.company_intro .intro3 .icon i{background-position:0 -130px;}
.company_intro li p{color:#fff;font-size:16px;line-height:25px;text-align:center;margin-top:5px;overflow:hidden;}
.about_us_tit{color:#fff;font-size:19px;font-family:"黑体";text-shadow:1px 1px 1px rgba(0,0,0,.1);line-height:30px;padding-bottom:10px;margin:25px 25px 0;}
.about_us_tit_ico{display:inline-block;height:6px;width:6px;background:rgba(255,255,255,.36);border-radius:100%;position:relative;vertical-align:middle;margin-right:5px;}
.about_us_msg_p{color:#fff;font-size:14px;line-height:22px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;margin:0 25px;}
@media screen and (min-height:667px){.about_us_msg_p{-webkit-line-clamp:10;}
}
/**/
.abus_head{position:absolute;top:40px;padding-left:20px;line-height:30px;color:#fff;font-size:18px;font-weight:400;}
.welf_bg{position:relative;width:320px;height:100%;top:0;left:0;right:0;margin:auto;z-index:999;background:url(../images/welf_bg.png) center top no-repeat;background-size:contain;font-family:"黑体";}
.one,.two,.thr,.thi,.fiv,.six{position:absolute;text-align:center;color:#fff;border-radius:100%;}
.one{width:55px;height:55px;background:rgba(116,151,230,.35);font-size:14px;top:57px;right:31px;}
.two{width:52px;height:52px;background:rgba(0,0,0,.05);font-size:12px;top:138px;right:98px;}
.thr{width:55px;height:55px;background:rgba(255,255,255,.18);font-size:14px;top:165px;left:86px;}
.thi{width:78px;height:78px;background:rgba(0,0,0,.08);font-size:15px;top:213px;left:141px;}
.fiv{width:54px;height:54px;background:rgba(0,0,0,.04);font-size:14px;top:306px;left:96px;}
.six{width:60px;height:60px;background:rgba(255,255,255,.21);font-size:15px;top:348px;right:26px;}
.one span,.two span,.thr span,.thi span,.fiv span,.six span{display:table-cell;vertical-align:middle;padding:0 3px;line-height:18px;}
.one span{width:55px;height:55px}
.two span{width:52px;height:52px}
.thr span{width:55px;height:55px}
.thi span{width:78px;height:78px;line-height:20px}
.fiv span{width:54px;height:54px}
.six span{width:60px;height:60px}
/**/
.posit_tit{color:#fff;font-size:15px;line-height:20px;padding-left:15px;font-family:"黑体";margin:35px 0 0;font-weight:400;}
#swiper-container-h{position:absolute;width:100%;top:70px;bottom:110px;overflow:visible;}
@media screen and (max-height:480px){.posit_list_con{top:60px;bottom:85px;}
}
#swiper-container-h .swiper-slide{float:left;height:100%;width:85%;position:relative;background:#fff;border-top:5px solid #76428e;border-radius:5px 5px 0 0;}
.posit_details_head{margin:5px 25px 0;border-bottom:1px solid #eaeaea;padding-bottom:10px;}
.posit_details_tit{color:#76428e;font-size:15px;line-height:28px;overflow:hidden;}
.posit_details_money{color:#76428e;font-size:18px;line-height:28px;display:block;vertical-align:middle;}
.posit_details_money strong{font-size:20px;vertical-align:bottom;margin-right:2px;font-weight:400;}
.posit_details_tip{color:#76428e;font-size:15px;line-height:25px;}
.job_details{margin:10px 25px;padding-bottom:15px;}
.job_address{color:#333;font-size:12px;font-family:"黑体";line-height:20px;}
.job_name{color:#333;font-size:12px;font-family:"黑体";font-weight:400;line-height:20px;word-break:break-all;}
.job_name_details{color:#7ea4dd;float:right;font-size:12px;}
.job_msg{line-height:20px;color:#333;font-size:12px;font-family:"黑体";display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
@media screen and (min-height:667px){.job_msg{-webkit-line-clamp:9;}
}
.posit_arrow_bot{position:absolute;bottom:-4px;height:4px;width:100%;background:url(../images/posit_bottom_new.png) repeat-x;background-size:248px auto;}
.job_btn_con{position:absolute;bottom:40px;width:100%;}
.job_btn_list{margin:0 20px;overflow:hidden;}
.job_btn{display:inline-block;line-height:37px;font-size:17px;color:#789fdf;font-family:"黑体";border:1px solid #fff;border-radius:16px;text-align:center;width:48%;}
.job_btn.add{float:left;background:#fff;color:#789fdf;}
.job_btn.tel{float:right;background:0 0;color:#fff;}
/**/
.praise_tip{line-height:25px;color:#fff;font-size:16px;font-family:"黑体";text-align:center;margin-top:8%;}
.praise_btn{display:block;line-height:40px;text-align:center;background:#fff;color:#76428e;font-size:15px;margin:20px 60px 0;border-radius:17px;}
.praise_btn i{position:relative;display:inline-block;width:25px;height:25px;background-position:-3px -242px;vertical-align:middle;margin-right:5px;}
.logo_ico,.praise_btn i em,.search_btn i,.p_creat_logo,.posit_tit_ico{background:url(../images/p_ico_new.png) no-repeat;background-size:60px auto;}
.praise_btn i em{position:absolute;top:0;left:0;display:inline-block;width:25px;height:25px;background-position:-3px -242px;vertical-align:middle;margin-right:5px;}
.praise_btn span{display:inline-block;width:126px;}
.praise_share_btn{display:block;line-height:40px;border-radius:25px;border:1px solid #fff;text-align:center;color:#fff;font-size:16px;margin:10px 60px 0;font-family:"黑体";}
.more_position{display:block;line-height:25px;text-align:center;color:#fff;font-size:15px;margin-top:30px;text-shadow:1px 1px 1px rgba(0,0,0,.1);}
/**/
.search_posit{position:absolute;top:180px;height:43px;left:25px;right:25px;overflow:hidden;z-index:8;}
.search_input_con{height:43px;position:relative;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:3;}
.search_input_details{position:relative;height:43px;line-height:43px;margin:0 10px;background:#643779;overflow:hidden;border-radius:20px;}
.search_input{width:100%;text-align:center;position:absolute;top:0;left:0;right:0;border:0;background:0 0;color:#fff;font-size:15px;font-family:"黑体";margin:11px 0;line-height:21px;}
.search_footer_btn{display:block;line-height:44px;text-align:center;color:#fff;font-size:18px;border-radius:20px;border:1px solid #fff;position:absolute;bottom:100px;left:22%;right:22%;}
.search_footer_tip{color:#fff;font-size:12px;text-align:center;font-family:"黑体";line-height:25px;position:absolute;width:100%;bottom:60px;opacity:.6;}
/**/
.arrow-box{position:absolute;bottom:-45px;left:0;right:0;margin:0 auto;width:50%;height:90px;border-radius:100%;background:rgba(255,255,255,.18);z-index:900;}
#array{z-index:999;-webkit-animation:start 1.5s infinite ease-in-out;display:block;margin:15px auto 0 auto;width:20px;height:15px;z-index:999;}
分享到QQ
分享到微博
微信扫一扫
