基于css的轮播

来源：互联网发布：凯佰赫战盾数据编辑：程序博客网时间：2024/05/29 17:36

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title></title>
<style type="text/css">
.content-carousel{
margin: 0 auto;
width: 10rem;
height: 10rem;
background-color:#f86000;
/*position: relative;*/
overflow: hidden;
}
.content-photo{
position: relative;
width: 400%;
height: 10rem;
margin: 0;
padding: 0;
left:0%;

animation-name:myfirst;
animation-duration: 20s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
.content-photo li{
float: left;
width: 10rem;
height: 10rem;
list-style-type: none;
text-align: center;
line-height: 10rem;
color: white;
}

@keyframes myfirst{
0% {left:0%; top:0px;}
30% {left:-100%; top:0px;}
35% {left:-100%; top:0px;}

65% {left:-200%; top:0px;}
70% {left:-200%; top:0px;}

100% {left:-300%; top:0px;}
/*100% {left:-400%; top:0px;}*/
}
</style>
</head>
<body>

<div class="content-carousel">
<ul class="content-photo">
<li style="background: red">1</li>
<li style="background: blue">2</li>
<li style="background: green">3</li>
<li style="background: black">4</li>
</ul>
</div>
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">

</script>
</body>
</html>

阅读全文

0 0