HTML動畫與輪播圖
1.輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖</title>
</head>
<style type="text/css">
.wrap{
width: 300px;
height: 200px;
border: 5px green solid;
margin: 200px auto;
position: relative;
overflow: hidden;
}
.box{
width: 1500px;
height: 200px;
background-color: red;
position: absolute;
left: 0px;
}
.box div{
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
color: white;
float: left;
}
.item1{
background-color: red;
}
.item2{
background-color: green;
}
.item3{
background-color: yellow;
}
.item4{
background-color: blue;
}
.item1{
background-color: gold;
}
.item1{
background-color: green;
}
.item1{
background-color: red;
}
.pre,.next{
width: 30px;
height: 60px;
background-color: blue;
text-align: center;
line-height: 60px;
position: absolute;
top: 75px;
}
.next{
position: absolute;
right: 0px;
}
</style>
<body>
<div class="wrap">
<div class="box">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
<div class="pre"><<</div>
<div class="next">>></div>
</div>
</body>
<script type="text/javascript">
var pre = document.getElementsByClassName('pre')[0];
var next = document.getElementsByClassName("next")[0];
var box = document.getElementsByClassName("box")[0];
var indext = 0;
next.onclick = function () {
indext--;
move(indext);
}
pre.onclick = function(){
indext++;
move(indext);
}
function move(newIndex){
indext = newIndex;
var l = indext * 300;
if (l > 0) {
l = -1200;
indext = -4;
}else if (l < -1200) {
l = 0;
indext = 0;
}
var a = l - box.offsetLeft;
var count = 0;
clearInterval(timer);
var timer = setInterval(function(){
count++;
box.style.left = box.offsetLeft + a/30 + "px";
if(count == 30){
clearInterval(timer);
box.style.left = l + "px";
}
},10)
}
setInterval(function(){
next.onclick();
},2000)
</script>
</html>
2.動畫
<!DOCTYPE html>
<html>
<head>
<title>動畫</title>
<style type="text/css">
.redDiv{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
animation-name: run;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.4,0.4,0.6,0.6);
animation-iteration-count: 2;
animation-direction: normal;
animation-fill-mode: both;
}
@keyframes run{
0%{
left: 0px;
}50%{
top: 0px;
left: 1200px;
}100%{
left: 500px;
top: 300px;
}
}
</style>
</head>
<body>
<div class="redDiv"></div>
</body>
</html>
