之前写的一个练习,还算是一个demo吧,为一些初学者提供一个无限滚动的思路

效果:

  • 图片会无限匀速滚动,由右到左
  • 鼠标停留图片时,滚动会暂停
  • 鼠标停留在图片上时,其他图片会变暗
  • 就这了,没得了

效果图:


鼠标移上去时:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6_动画模块_无限滚动</title>
    <style> * {
     margin: 0; padding: 0; } ul {
     width: 2000px; height: 188px; background: #000000; border: 1px solid #000; margin: 0 auto; animation: move 10s linear 0s infinite normal; } ul:hover{
     animation-play-state: paused; } ul:hover li{
     opacity: 0.5; } ul li:hover{
     opacity: 1; } @keyframes move {
     from {
     margin-left: 0; } to {
     margin-left: -1200px; } } ul li {
     list-style: none; width: 300px; height: 188px; border: 1px solid #000; box-sizing: border-box; float: left; } div {
     width: 600px; height: 188px; border: 1px solid #000; margin: 100px auto; overflow: hidden; } img{
     width: 90px; height: 188px; } </style>
</head>
<body>
<div>
    <ul>
        <li><img src="pic/1.jpg"></li>
        <li><img src="pic/2.jpg"></li>
        <li><img src="pic/3.jpg"></li>
        <li><img src="pic/4.jpg"></li>
        <li><img src="pic/1.jpg"></li>
        <li><img src="pic/2.jpg"></li>
    </ul>
</div>
</body>
</html>

图片就自己整吧,整啥图片都差不多,比例和我的差不多就行