<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bigbox{
height: 180px;
background-color: red;
/* 解决.big中的图片溢出 */
overflow: hidden;
}
.big{
width: 500%;/*这里定义500%使轮播的图片可以行排序*/
height: 345px;
/* 可以移动的盒子调用动画 */
/*
animation ==> 不需要出发鼠标事件就能执行
mover ==> 动画的名字
10s ==> 完整的动画执行需要的时间
steps(5) ==> 动画执行步骤
infinite ==> 反复执行
*/
animation: mover 10s steps(5) infinite;
}
.big>div{
width: 20%;
height: 345px;
font-size: 100px;
text-align: center;
line-height: 345px;
/* 添加浮动 */
float: left;
}
.box1{
/*未定义height和width默认为列排列,但是width最多是100%*/
background-color: black;
background-repeat:no-repeat;
}
.box2{
background-color: gold;
background-repeat:no-repeat;
}
.box3{
background-color: red;
background-repeat:no-repeat;
}
/* 使用到动画属性 */
/* 声明动画 */
@keyframes mover{
0%{
margin-left: 0px ;
}
100%{
margin-left:-500%;
}
}
</style>
</head>
<body>
<!-- 轮播图区域 -->
<!-- 外侧有一个可视区域的盒子 -->
<div class="bigbox">
<!-- 可以移动的盒子 -->
<div class="big">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</div>
</body>
</html>