<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1000px;
margin:300px auto;
border:1px solid #ccc;
overflow: hidden;
}
ul{
list-style: none;
width:2000px; //與js寫出來的無縫原理一樣，都是通過在輪播圖后面增加同樣的圖片來遮擋每次移動結束后的空白間隙，所以需要給足夠容納ul里面所有圖片的長度的值
animation: imgAnimation 10s linear infinite ; //infinite為無限循環，讓輪播無止盡的循環下去
}
ul>li{
float: left;
}
@keyframes imgAnimation{
from{}
to{
transform:translate(-1000px);//設置讓動畫每移動到添加之前的長度之后從新恢復到起始位置
}
}
ul:hover{
animation-play-state:paused; //通過偽元素控制鼠標的移入輪播圖的變化，如果圖片為a標簽嵌套的話就可以實現不用js注冊事件都可以點擊的輪播圖效果
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="images/1.jpg" alt="" style="width:200px;"></li>
<li><img src="images/2.jpg" alt="" style="width:200px;"></li>
<li><img src="images/3.jpg" alt="" style="width:200px;"></li>
<li><img src="images/4.jpg" alt="" style="width:200px;"></li>
<li><img src="images/5.jpg" alt="" style="width:200px;"></li>
<li><img src="images/1.jpg" alt="" style="width:200px;"></li>
<li><img src="images/2.jpg" alt="" style="width:200px;"></li>
<li><img src="images/3.jpg" alt="" style="width:200px;"></li>
<li><img src="images/4.jpg" alt="" style="width:200px;"></li>
<li><img src="images/5.jpg" alt="" style="width:200px;"></li>
</ul>
</div>
</body>
</html>
css3無縫輪播圖案例
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。