3D动态轮播图(一)

本文详细介绍了如何使用CSS3的@keyframes、transform和animation属性来创建一个具有翻转效果的图片轮播组件。通过设置不同的关键帧,可以实现图片的旋转和平滑过渡,同时结合JavaScript控制图片的切换,为网页增添动态视觉效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
@-webkit-keyframes open
{
	0%{
		-webkit-transform:rotateX(180deg);
		opacity:0;
	}
	57%
	{
		-webkit-transform:rotateX(-16deg);
		opacity:1;
	}
	66%
	{
		-webkit-transform:rotateX(14deg);
	}
	74%
	{
		-webkit-transform:rotateX(-12deg);
	}
	81%
	{
		-webkit-transform:rotateX(10deg);
	}
	87%
	{
		-webkit-transform:rotateX(-8deg);
	}
	92%
	{
		-webkit-transform:rotateX(6deg);
	}
	96%
	{
		-webkit-transform:rotateX(-4deg);
	}
	100%
	{
		-webkit-transform:rotateX(0deg);
	}
}
@-webkit-keyframes clos
{
	0%{
		-webkit-transform:rotateX(0deg);
		opacity:1;
	}
	100%
	{
		-webkit-transform:rotateX(-180deg);
		opacity:0;
	}
}

body{background:#eee;}
.box{width:600px;height:400px; position:relative;margin:30px auto;}
#prev,#next{width:50px;height:50px;background:#efefef; border-radius:25px;position:absolute;top:100px; box-shadow:2px 2px 10px #666; text-align:center;font-size:40px;line-height:50px; font-family:Verdana, Geneva, sans-serif; text-decoration:none;color:#fff;-webkit-text-stroke:2px #ccc;}
#prev{left:-100px;}
#next{right:-100px;}
#imgs{width:600px;height:400px; position:relative; -webkit-transform-style:preserve-3d; -webkit-perspective:1000px;}
#imgs img{width:600px;height:400px; position:absolute;left:0;top:0; -webkit-transform-origin:bottom; -webkit-transform:rotateX(-180deg); opacity:0;}
#imgs .show{ -webkit-animation:open 1.2s ease-in;-webkit-transform:rotateX(0deg);opacity:1;}
#imgs .hide{ -webkit-animation:clos 1s ease;-webkit-transform:rotateX(-180deg);opacity:0;}
</style>
<script>
window.onload=function()
{
	var oPrev=document.getElementById("prev");
	var oNext=document.getElementById("next");
	var aImg=document.getElementsByTagName("img");
	var iNow=0;
	oPrev.onclick=function()
	{
		aImg[iNow].className="hide";
		iNow--;
		if(iNow<0)
		{
			iNow=aImg.length-1;
		}
		aImg[iNow].className="show";
	};
	oNext.onclick=function()
	{
		aImg[iNow].className="hide";
		iNow++;
		if(iNow==aImg.length)
		{
			iNow=0;
		}
		aImg[iNow].className="show";
	};
}
</script>
</head>
<body>
<div class="box">
	<a href="#" id="prev">&lt;</a>
    <div id="imgs">
    	<img src="img/1.jpg" alt="" class="show"/>
        <img src="img/2.jpg" alt=""/>
        <img src="img/3.jpg" alt=""/>
        <img src="img/4.jpg" alt=""/>
        
    </div>
    <a href="#" id="next">&gt;</a>
</div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值