最终效果如下：
代码如下：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<title>引导页</title>
<link rel="stylesheet" href="css/animate.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.welcome {
display: flex;
justify-content: center;
align-items: center;
position:fixed;
width: 100%;
height: 100%;
}
.anniu1 {
width: 100%;
position:fixed;
bottom: 15%;
text-align: center;
}
.anniu2 {
width: 100%;
position:fixed;
bottom: 5%;
text-align: center;
}
.main {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: contain;
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main">
<div class="welcome" >
<img id="logo" src="images/logo-1.png" style="width: 100%;">
</div>
</div>
<div class="anniu1" id="anniu1" >
<img src="images/button1.png" style="width:60%;" >
</div>
<div class="anniu2" id="anniu2">
<img src="images/button2.png" style="width:60%;" >
</div>
</body>
</html>
<script type="text/javascript">
$(function() {
var img = $('#logo');
$('#logo').addClass('animated fadeIn');
function rotate() {
img.animate({rotate: '360'}, 8000, 'linear', function() {
rotate();
});
}
rotate();
});
$('#anniu1').addClass('animated bounceInLeft');
$('#anniu2').addClass('animated bounceInRight');
</script>一点说明
用animate.css实现按钮的左右移动
用jquery.rotate.js实现的图片旋转
背景的垂直居中
.main {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: contain;
position: fixed;
width: 100%;
height: 100%;
}图片的垂直居中
.welcome {
display: flex;
justify-content: center;
align-items: center;
position:fixed;
width: 100%;
height: 100%;
}