以下是 全屏banner轮播切换CSS3动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>全屏banner轮播切换CSS3动画</title>
<link href="css/banner.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner_box" class="banner_box">
<div class="banner_cot">
<!--放banner页面-->
<div class="banner_list" id="banner_list">
<!--第一个页面 天空下的猫老师-->
<div class="page_box show">
<div class="bg_box">
<img src="image/sky_xia.png" class="sky_xia sky_anim2" />
<img src="image/sky_shang.png" />
</div>
<div class="content">
<div class="main_box">
<div class="sky_cot sky_anim2">
<img src="image/sky_cot2.png" />
</div>
</div>
</div>
</div>
<!--第二个页面 房间里的猫老师-->
<div class="page_box">
<div class="bg_box">
<img src="image/room_bg2.jpg" />
</div>
<div class="content">
<div class="main_box">
<div class="room_cot">
<div class="room_anim">
<img src="image/room_cot2.png" />
</div>
</div>
</div>
</div>
</div>
<!--第三个页面 雪中的猫老师-->
<div class="page_box ">
<div class="bg_box">
<img src="image/snow_bg3.png" />
</div>
<div class="content">
<div class="main_box">
<div class="snow_cot snow_anim">
<img src="image/snow_cot3.png" />
</div>
</div>
</div>
</div>
<!--第四个页面 森林中的猫老师-->
<div class="page_box ">
<div class="bg_box">
<img src="image/forest_bg4.jpg" />
</div>
<div class="content">
<div class="main_box">
<div class="forest_cot forest_anim">
<img src="image/forest_cont2.png" />
</div>
</div>
</div>
</div>
</div>
<!--放浮动链接小图标-->
<div class="product_btns" id="product_btns">
<div class="content">
<div class="btns_box" id="control_box">
<a href="#" class="icon_bg icon_show"></a>
<a href="#" class="icon_bg"></a>
<a href="#" class="icon_bg"></a>
<a href="#" class="icon_bg"></a>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
(function () {
//2016-13-10 begin
var $banner_box = $("#banner_box"),
$pages = $("#banner_list").find(".page_box"),
$mainBoxs = $pages.find(".main_box"),
$bgs = $pages.find(".bg_box img"),
$controlBox = $("#control_box"),
$productBtns = $("#product_btns"),
$controls = $controlBox.find("a");
var data = {
pLength: $pages.length,//记录一共有多少个page_box
curP: 0,
isCan: true,
isOnbtn: false,
fColor: [2, 2, 1, 1, 1],
dur: 3500,
cNum: 0
};
//自动轮播换页函数
var cId;
var pageChange = function (idx) {
if (data.isOnbtn)
return;
if (idx >= -1 && idx < data.pLength && idx != data.curP && data.isCan) {
data.isCan = false;
data.cNum++;
clearInterval(cId);//停止动画
idx = idx == -1 ? data.pLength - 1 : idx;//条件表达式 真前假后 指向最后一张
$controls.removeClass("icon_show").eq(idx).addClass("icon_show");
$pages.eq(data.curP).css({ zIndex: 0 });
$pages.eq(idx).addClass("show").css({ opacity: 0, zIndex: 1 }).animate({ opacity: 1 }, 400, function () {
$pages.eq(data.curP).removeClass("show");
$(this).addClass("show");
data.isCan = true;
data.curP = idx;
data.cNum--;
if (data.cNum == 0) {
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
cId = setInterval(function () {
pageChange((data.curP + 1) % data.pLength);
//% 求余数 当要处理 X % Y时, 如果, X < Y 的话, 回传值就是 X 自己 1 % 4 = 1
}, data.dur);//data.dur 是时间
}
});
}
}
//鼠标经过 下方导航
$controls.on("mouseenter", function () {
data.isCan = true;
pageChange($controls.index(this));
data.isOnbtn = true;
});
$controls.on("mouseleave", function () {
data.isOnbtn = false;
});
cId = setInterval(function () {
pageChange((data.curP + 1) % data.pLength);
}, data.dur);
//网页自由缩放 2016-10-12 调整
var isIE6 = navigator.userAgent.indexOf("MSIE 6.0") > 0;//获取浏览器的版本
//调整
//页面自缩放
var resize = function () {
var w = $(window).width(),
h = $(window).height();
$banner_box.height(h);
if (w / h < 1920 / 1080) {
$bgs.height(h).css({ width: "auto", margin: -.5 * h + "px 0 0 " + -.5 * 1920 / 1080 * h + "px" });
} else {
$bgs.width(w).css({ height: "auto", margin: -.5 * w * 1080 / 1920 + "px 0 0 " + -.5 * w + "px" });
}
resize_img(w, h);//调用函数 改变内容图片大小
var imgH = $bgs.height();
$mainBoxs.height(imgH).css("margin-top", -.5 * imgH + "px");
var cls;
switch (true) {
case w >= 1600: { cls = "big_view"; break; }
case w < 1600 && w >= 1440: { cls = "mid_view"; break; }
case w < 1440: { cls = "small_view"; break; }
}
var ws = $banner_box[0].className;
if (isIE6 && (ws.indexOf("big") != -1 || ws.indexOf("mid") != -1 || ws.indexOf("small") != -1) && ws.indexOf(cls) == -1)
location.reload();
banner_box.className = "banner_box " + cls;
};
$(window).resize(resize);
resize();
function resize_img(w, h) {
var snoww = w * 593 / 1920,
snowh = h * 448 / 1080;
var roomw = w * 668 / 1920,
roomh = h * 585 / 1080;
var forestw = w * 500 / 1920,
foresth = h * 636 / 1080;
var skyw = w * 371 / 1920,
skyh = h * 341 / 1080;
if (w / h < 1920 / 1080) {
//$(".snow_cot").height(snowh).css({ width: snowh * 宽 / 高 + "px", margin: "0 0 0" + -.5 * 宽 / 高 * snowh + "px" });
$(".snow_cot").height(snowh).css({ width: snowh * 593 / 448 + "px", margin: "0 0 0" + -.5 * 593 / 448 * snowh + "px" });
$(".room_cot").height(roomh).css({ width: roomh * 668 / 585 + "px", margin: "0 0 0" + -.5 * 400 / 585 * roomh + "px" });
$(".forest_cot").height(foresth).css({ width: foresth * 500 / 636 + "px", margin: "0 0 0" + -.5 * 500 / 636 * foresth + "px" });
$(".sky_cot").height(skyh).css({ width: skyh * 371 / 341 + "px" });
} else {
//$(".snow_cot").width(snoww).css({ height: snoww * 高 / 宽 + "px", margin: "0 0 0" + -.5 * snoww + "px" });
$(".snow_cot").width(snoww).css({ height: snoww * 448 / 593 + "px", margin: "0 0 0" + -.5 * snoww + "px" });
$(".room_cot").width(roomw).css({ height: roomw * 585 / 668 + "px", margin: "0 0 0" + -.5 * 400 * roomw / 668 + "px" });
$(".forest_cot").width(forestw).css({ height: forestw * 636 / 500 + "px", margin: "0 0 0" + -.5 * forestw + "px" });
$(".sky_cot").width(skyw).css({ height: skyw * 341 / 371 + "px" });
}
}
})();
</script>
</body>
</html>
CSS代码(banner.css):
html{height:100%;position:relative;overflow:hidden;}
body{position:relative;width:100%;height:100%;position:relative;overflow:hidden;font:12px/1.5 tahoma,arial,\5FAE\8F6F\96C5\9ED1,sans-serif;font-family:"Microsoft YaHei","微软雅黑",tahoma,arial,simsun,"宋体";background:#000;}
body,html{padding:0px;margin:0px;}
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,p,table,input{margin:0;padding:0;font-weight:normal;}
table{width:auto;border-collapse:collapse;border-spacing:0;}
li{list-style:none;vertical-align:bottom;}
em,i{font-style:normal;}
a{outline:none;text-decoration:none;transition:color .3s,opacity .3s,transform .3s;-webkit-transition:color .3s,opacity .3s,transform .3s;}
a:hover{outline:none;text-decoration:underline;}
img{border:0;}
.hidden{display:none;}
.p_top_middle{margin:0;padding:0;position:absolute;top:0;left:50%;margin-left:-66px;font-size:50px;}
.banner_box{height:100%;position:relative;overflow:hidden;}
.banner_cot{height:100%;position:relative;overflow:hidden;}
.content{position:relative;width:1200px;margin:0 auto;}
.banner_list{position:relative;height:100%;}
.page_box{position:absolute;width:100%;height:100%;top:0;left:-9999px;}
.bg_box{position:absolute;width:100%;height:100%;top:0;left:0;background-position:center center;background-repeat:no-repeat;}
.bg_box img{position:absolute;top:50%;left:50%;}
.page_box .content{width:1000px;height:100%;position:absolute;top:0;left:50%;margin-left:-500px;z-index:5;transform-origin:center center;-webkit-transform-origin:center center;}
.page_box .main_box{position:relative;height:100%;left:-9999px;top:50%;}
.banner_list .show{left:0;}
.banner_list .show .main_box{left:0;}
/*下方导航图标*/
.product_btns{position:absolute;width:100%;bottom:5px;z-index:6;transition:bottom .3s;-webkit-transition:bottom .3s;z-index:10;}
.product_btns.show{bottom:100px;}
.product_btns .content{width:1000px;position:absolute;bottom:0;left:50%;margin-left:-500px;}
.product_btns .btns_box{margin:auto;}
.product_btns .btns_box a{display:inline-block;position:relative;background-size:auto;}
.product_btns .icon_bg{background:url(../image/icon_big_1.png);}
.product_btns .icon_show{background:url(../image/icon_big.png);}
/*big size*/
.big_view .product_btns .content{height:82px;}
.big_view .product_btns .btns_box{width:500px;height:84px;}
.big_view .product_btns .btns_box a{width:90px;height:72px;margin:0 15px;}
/*mid size*/
.mid_view .product_btns .content{height:58px;}
.mid_view .product_btns .btns_box{height:58px;width:388px;}
.mid_view .product_btns .btns_box a{width:70px;height:56px;margin:0 12px;background-size:70px 56px;}
/*small size*/
.small_view .product_btns .content{height:42px;}
.small_view .product_btns .btns_box{height:42px;width:292px;}
.small_view .product_btns .btns_box a{width:50px;height:40px;margin:0 10px;background-size:50px 40px;}
/*分页样式*/
/*第一页 天空中的猫老师*/
.sky_xia{z-index:10;}
.sky_cot{position:absolute;bottom:30%;right:36%;width:371px;height:341px;}
.sky_cot img{width:100%;height:100%;}
.show .sky_anim1{animation:sky_1 1s;-moz-animation:sky_1 1s;-webkit-animation:sky_1 1s;-o-animation:sky_1 1s;}
.show .sky_anim2{animation:sky_2 2s;-moz-animation:sky_2 2s;-webkit-animation:sky_2 2s;-o-animation:sky_2 2s;}
@keyframes sky_1{0%{opacity:0;top:60%;}
100%{opacity:1;top:50%;}
}
@-moz-keyframes sky_1{0%{opacity:0;top:60%;}
100%{opacity:1;top:50%;}
}
@-webkit-keyframes sky_1{0%{opacity:0;top:60%;}
100%{opacity:1;top:50%;}
}
@-o-keyframes sky_1{0%{opacity:0;top:60%;}
100%{opacity:1;top:50%;}
}
@keyframes sky_2{0%{opacity:0;bottom:0px;right:0px;}
50%{opacity:1;bottom:0px;right:0px;}
100%{bottom:30%;right:36%;}
}
@-moz-keyframes sky_2{0%{opacity:0;bottom:0px;right:0px;}
50%{opacity:1;bottom:0px;right:0px;}
100%{bottom:30%;right:36%;}
}
@-webkit-keyframes sky_2{0%{opacity:0;bottom:0px;right:0px;}
50%{opacity:1;bottom:0px;right:0px;}
100%{bottom:30%;right:36%;}
}
@-o-keyframes sky_2{0%{opacity:0;bottom:0px;right:0px;}
50%{opacity:1;bottom:0px;right:0px;}
100%{bottom:30%;right:36%;}
}
/*3页 雪中的猫老师*/
.page_box .snow_cot{position:absolute;z-index:12;bottom:8%;left:50%;}
.snow_cot img{width:100%;height:100%;}
.show .snow_anim{/* animation 加上show 函数则当前页面显示时出现动效*/
animation:snow_1 0.5s;-moz-animation:snow_1 0.5s;/* Firefox */
-webkit-animation:snow_1 0.5s;/* Safari and Chrome */
-o-animation:snow_1 2s;/* Opera */
}
@keyframes snow_1{0%{left:1000px;}
100%{left:50%;}
}
@-moz-keyframes snow_1{0%{left:1000px;}
100%{left:50%;}
}
@-webkit-keyframes snow_1{0%{left:1000px;}
100%{left:50%;}
}
@-o-keyframes snow_1{0%{left:1000px;}
100%{left:50%;}
}
/*第二页 房间里的猫老师*/
.page_box .content .room_cot{position:absolute;bottom:8%;left:50%;margin-left:-200px;width:668px;height:585px;}
.room_anim img{width:100%;height:100%;vertical-align:middle;}
.show .room_anim{animation:room_1 1.5s ease-in-out;-moz-animation:room_1 1.5s ease-in-out;-webkit-animation:room_1 1.5s ease-in-out;-o-animation:room_1 1.5s ease-in-out;}
@keyframes room_1{0%{transform:rotate(720deg) scale(0);opacity:0;}
66%{transform:rotate(0deg) scale(0.5);opacity:1;}
100%{transform:rotate(0deg) scale(1);}
}
@-moz-keyframes room_1{0%{transform:rotate(720deg) scale(0);opacity:0;}
66%{transform:rotate(0deg) scale(0.5);opacity:1;}
100%{transform:rotate(0deg) scale(1);}
}
@-webkit-keyframes room_1{0%{transform:rotate(720deg) scale(0);opacity:0;}
66%{transform:rotate(0deg) scale(0.5);opacity:1;}
100%{transform:rotate(0deg) scale(1);}
}
@-o-keyframes room_1{0%{transform:rotate(720deg) scale(0);opacity:0;}
66%{transform:rotate(0deg) scale(0.5);opacity:1;}
100%{transform:rotate(0deg) scale(1);}
}
/*第四页 房间中的猫老师*/
.page_box .content .forest_cot{position:absolute;bottom:15%;/*right:1.04%;*/
width:500px;height:636px;left:50%;}
.forest_cot img{width:100%;height:100%;}
.show .forest_anim{animation:forest_1 1s ease-in-out;-moz-animation:forest_1 1s ease-in-out;-webkit-animation:forest_1 1s ease-in-out;-o-animation:forest_1 1s ease-in-out;/*向下移动*/
/*bottom:9.5%;*/
}
@keyframes forest_1{0%{transform:scale(0);opacity:0;bottom:60%;}
50%{transform:scale(1);opacity:1;bottom:55%;}
100%{bottom:15%;}
}
@-moz-keyframes forest_1{0%{transform:scale(0);opacity:0;bottom:60%;}
50%{transform:scale(1);opacity:1;bottom:55%;}
100%{bottom:15%;}
}
@-o-keyframes forest_1{0%{transform:scale(0);opacity:0;bottom:60%;}
50%{transform:scale(1);opacity:1;bottom:55%;}
100%{bottom:15%;}
}
@-webkit-keyframes forest_1{0%{transform:scale(0);opacity:0;bottom:60%;}
50%{transform:scale(1);opacity:1;bottom:55%;}
100%{bottom:15%;}
}
分享到QQ
分享到微博
微信扫一扫
