轮播比较简单先看效果图
轮播.gif
代码
-
特别注意的就是animation放在类里面。这样最简单
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>3D图片轮播</title>
</head>
<style>
*{margin:0px;padding:0px;}
.wrap{width:400px;height:400px;margin:50px auto;position:relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1200px;border:1px solid #ccc;}
#left{width:50px;height:50px;position:absolute;left:-50px;top:150px;background:red;font:24px/50px "微软雅黑";text-align:center;}
#right{width:50px;height:50px;position:absolute;right:-50px;top:150px;background:red;font:24px/50px "微软雅黑";text-align:center;}
.wrap a{display: block;width:400px;height:400px;position:absolute;left:0px;top:0px;-webkit-transform-origin: bottom;-webkit-transform: rotateX(180deg);opacity:0;}
.wrap a img{width:100%;height:100%;}
.wrap a.hide{-webkit-animation: 2s hide;opacity:0;-webkit-transform: rotateX(180deg);}
.wrap a.show{-webkit-animation: 2s show;opacity:1; -webkit-transform: rotateX(0deg);}
@-webkit-keyframes hide {
0%{
-webkit-transform: rotateX(0deg);
opacity: 1;
}
100%{
-webkit-transform: rotateX(-180deg);
opacity: 0;
}
}
@-webkit-keyframes show {
0%{
-webkit-transform: rotateX(180deg);
opacity: 0;
}
50%
{
-webkit-transform:rotateX(-25deg);
opacity:1;
}
60%
{
-webkit-transform:rotateX(18deg);
opacity:1;
}
70%
{
-webkit-transform:rotateX(-12deg);
opacity:1;
}
80%
{
-webkit-transform:rotateX(8deg);
opacity:1;
}
90%
{
-webkit-transform:rotateX(-6deg);
opacity:1;
}
100%{
-webkit-transform: rotateX(0deg);
opacity: 1;
}
}
</style>
<body>
<div class="wrap">
<div id="left">上</div>
<div id="right">下</div>
<a class="show"href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</body>
<script>
var LeftButtn = document.getElementById("left");
var RightButton = document.getElementById("right");
var allA = document.getElementsByTagName("a");
var iNow = 0 ;
LeftButtn.onclick = function(){
allA[iNow].className = "hide";
--iNow;
if(iNow<0)
{
iNow = allA.length-1;
}
allA[iNow].className = "show";
}
RightButton.onclick = function(){
allA[iNow].className = "hide";
++iNow;
if(iNow>=allA.length)
{
iNow = 0;
}
allA[iNow].className = "show";
}
</script>
</html>
折纸效果
- 折纸比较难想 主要是布局 他是类似迭代布局
- 简单来说就是煎饼果子里面需要加果子，葱，面酱等等。但是他们都得在煎饼里面。
- 所以必须是所有的都在一个DIV里面，然后diV里面又一个 span和div
- 折纸布局过了就简单了.
效果图
折纸.gif
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>3D折纸第三次练习</title>
</head>
<style>
*{margin:0px;padding:0px;}
input{position:absolute;left:50%;top:30px;margin-left:-50px;width:100px;height:30px;}
.wrap{width:160px;height:auto;margin:100px auto;position:relative;-webkit-transform-style: preserve-3d;}
.wrap h1 {width:100%;height:40px;line-height:40px;text-align:center;color:white;font-size:16px;background:#000000;position:relative;z-index:10;}
.wrap div span{width:100%;height:40px;background:#000;color:white;line-height:40px;font-size:16px;text-align:center;display:block;}
.wrap div{width:100%;height:40px;position:absolute;left:0px;top:42px;-webkit-transform-style: preserve-3d;-webkit-transform-origin: top;-webkit-transform: rotateX(-120deg);}
.wrap div.show{-webkit-animation: 1s show;-webkit-transform: rotateX(0deg);}
.wrap div.hide{-webkit-animation: 1s hide;-webkit-transform: rotateX(-120deg);}
@-webkit-keyframes show {
0%{-webkit-transform: rotateX(-120deg)}
25%{-webkit-transform: rotateX(30deg)}
50%{-webkit-transform: rotateX(-15deg)}
75%{-webkit-transform: rotateX(-8deg)}
85%{-webkit-transform: rotateX(8deg)}
90%{-webkit-transform: rotateX(-4deg)}
100%{-webkit-transform: rotateX(0deg)}
}
@-webkit-keyframes hide {
0%{-webkit-transform: rotateX(0deg);}
100%{-webkit-transform: rotateX(-120deg);}
}
</style>
<body>
<input type="button" value="展开" id="btn">
<div class="wrap" id="wrap">
<h1>3D折纸标题</h1>
<div>
<span>第一个标题</span>
<div>
<span>第二个标题</span>
<div>
<span>第三个标题</span>
<div>
<span>第四个标题</span>
<div>
<span>第五个标题</span>
<div>
<span>第六个标题</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var btn = document.getElementById("btn");
var wrap = document.getElementById("wrap");
var flag = true;
var index = 0 ;
var timer = null;
btn.onclick = function(){
//开始前清空定时器
clearInterval(timer);
if(flag)
{
timer = setInterval(function(){
wrap.getElementsByTagName("div")[index].className = "show";
++index;
if(index == wrap.getElementsByTagName("div").length)
{
clearInterval(timer);
flag = false;
btn.value = "收缩";
}
},100)
}else
{
timer = setInterval(function(){
--index;
wrap.getElementsByTagName("div")[index].className = "hide";
if(index == 0)
{
clearInterval(timer);
flag = true;
btn.value = "展开";
}
},100)
}
}
</script>
</html>
