CSS3企业招聘引导页动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3企业招聘引导页动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>CSS3企业招聘引导页动画特效</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!--css3动画样式-->
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
<!--默认样式-->
<link href="css/common.css" rel="stylesheet" type="text/css">
<!--主要样式-->
<link href="css/indexSty.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/index_sty.js"></script>
<title>首页</title>
</head>

<body>
<div class="leftBg"></div><div class="rightBg"></div>
<div class="content mr">
<div class="logo"><a href="#/"><img src="images/logo.png"></a></div>
<!--左边hr-->
<div class="con_lf lf">
    <div class="big_word"><img alt="大企业，大能量" src="images/big_word.png"></div>
    <div class="btnCon"><a href="#/">
      <img class="btnbg" src="images/left_btn_bg.png">
      <img class="btn_arow" src="images/left.png">
      <img class="btnWord" src="images/btn_word.png">
    </a></div>
    <div class="house"><img src="images/huose.png"></div>
</div>
<!--右边求职者-->
<div class="con_rf lf">
<div class="peoCon">
	<img class="peo" src="images/peo.png">
	<img class="work" alt="挑工作" src="images/tiao.png">
</div>
<div class="peoBtn"><a href="#/">
	<img class="btnbg_rf" src="images/rf_bg.png">
    <img class="btnWord_rf" alt="求职者" src="images/qiuzhizhe.png">
    <img class="btn_arow_rf" src="images/rf.png">
</a></div>
<div class="big_word_rf"><img alt="小白领，大作为" src="images/right_word.png"></div>
</div>
</div>
</body>
</html>

JS代码(index_sty.js):

// JavaScript Document$(function(){
	$('.leftBg').show().addClass('animated fadeInLeft');
	//娣诲姞钃濊壊鑳屾櫙$('.rightBg').show().addClass('animated fadeInRight');
	//娣诲姞榛勮壊鑳屾櫙setTimeout(function(){
	$('.leftBg').removeClass('fadeInLeft');
	//绉婚櫎钃濊壊鑳屾櫙$('.rightBg').removeClass('fadeInRight');
	//绉婚櫎榛勮壊鑳屾櫙$('.logo a img').show().addClass('animated bounceInDown');
	//娣诲姞logosetTimeout(function(){
	$('.logo a img').removeClass('bounceInDown');
	//绉婚櫎logo$('.big_word img').show().addClass('animated flip');
	//娣诲姞澶т紒涓氬ぇ鑳介噺setTimeout(function(){
	$('.big_word img').removeClass('flip');
	//绉婚櫎澶т紒涓氬ぇ鑳介噺$('.btnbg').show().addClass('animated rotateIn');
	//娣诲姞 HR鎶汉鎵嶈儗鏅?$('.peo').show().addClass('animated bounceIn');
	//娣诲姞鎸戝伐浣滆儗鏅?$('.btnbg_rf').show().addClass('animated lightSpeedIn');
	//娣诲姞姹傝亴鑰呰儗鏅?/////////////涓や釜绠ごsetInterval(function(){
	$('.btn_arow,.btnWord,.btn_arow_rf,.btnWord_rf').show().addClass('animated tada');
	//HR鎶汉鎵嶇澶?HR鎶汉鎵?setTimeout(function(){
	$('.btn_arow,.btnWord,.btn_arow_rf,.btnWord_rf').removeClass('tada');
}
,3000);
}
,1000*2);
	///////////////setTimeout(function(){
	$('.btnbg').removeClass('rotateIn');
	//绉婚櫎 HR鎶汉鎵嶈儗鏅?$('.btnbg_rf').removeClass('lightSpeedIn');
	//绉婚櫎姹傝亴鑰呰儗鏅?$('.btnWord').show().addClass('animated rotateInDownLeft');
	//娣诲姞 HR鎶汉鎵?$('.btnWord_rf').show().addClass('animated flipInY');
	//娣诲姞姹傝亴鑰?$('.work').show().addClass('animated lightSpeedIn');
	//娣诲姞鎸戝伐浣?setTimeout(function(){
	$('.btnWord').removeClass('rotateInDownLeft');
	//绉婚櫎 HR鎶汉鎵?$('.btnWord_rf').removeClass('flipInY');
	//绉婚櫎姹傝亴鑰?$('.work').removeClass('lightSpeedIn');
	//绉婚櫎鎸戝伐浣?setTimeout(function(){
	$('.house').show().addClass('animated swing');
	//娣诲姞灏忔埧瀛?$('.big_word_rf img').show().addClass('animated rotateInUpRight');
	//娣诲姞灏忕櫧棰嗭紝澶т綔涓?setTimeout(function(){
	$('.house').removeClass('swing');
	//绉婚櫎灏忔埧瀛?$('.big_word_rf img').removeClass('rotateInUpRight');
	//绉婚櫎灏忕櫧棰嗭紝澶т綔涓?}
,1000);
}
,1000);
}
,1000);
}
,1000);
}
,1000);
}
,1000);
}
,1000);
}
)

CSS代码(indexSty.css):

@charset "utf-8";/* CSS Document */
.mr{margin-left:auto;margin-right:auto;}
.lf{float:left;}
.rf{float:right;}
.leftBg,.rightBg{height:100%;position:fixed;}
.leftBg{background:url(../images/leftBg.png) no-repeat 0 center;left:0;top:0;z-index:-2;width:73.6%;background-size:100% 100%;}
.rightBg{background:url(../images/rightBg.png) no-repeat 0 center;right:0;top:0;z-index:-1;width:77.9%;background-size:100% 100%;}
.con_lf,.con_rf{width:50%;}
/**/
.content{width:1024px;}
.logo{padding-top:26px;padding-left:44px;}
/*宸﹁竟鏍峰紡*/
.big_word{padding-top:25px;padding-left:24px;}
.btnCon{padding-top:114px;padding-left:60px;position:relative;width:341px;height:305px;}
.btnbg{position:absolute;left:60px;top:114px;}
.btnWord{position:absolute;top:214px;left:104px;}
.btn_arow{position:absolute;top:157px;left:162px;}
/*鍙宠竟鏍峰紡*/
.big_word_rf{padding-right:20px;padding-top:147px;padding-bottom:92px;}
.peoCon{position:relative;top:93px;right:6px;height:240px;width:414px;}
.peo{position:absolute;top:0;left:0;}
.work{position:absolute;top:80px;left:28px;}
.peoBtn{position:relative;}
.btnWord_rf{position:absolute;top:67px;left:14px;}
.btn_arow_rf{position:absolute;top:144px;left:94px;}
.leftBg,.rightBg,.big_word img,.logo a img,.big_word_rf img,.btnWord,.btnbg,.house,.peo,.work,.btnbg_rf,.btnWord_rf,.btn_arow_rf,.btn_arow,.btnWord,.btn_arow_rf,.btnWord_rf{display:none;}

附件:下载该文件资源,减少时间成本(增值服务)