基于css的轮播

最新推荐文章于 2025-03-06 10:59:33 发布

原创最新推荐文章于 2025-03-06 10:59:33 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用纯CSS实现的图片轮播图效果，详细展示了如何通过关键帧动画实现平滑过渡，以及如何设置动画属性来达到循环播放的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>