zoukankan      html  css  js  c++  java
  • 前端学习笔记 day07 无缝滚动

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }    
            ul {
                list-style: none;
            }
            nav {
                width: 882px;
                height: 86px;
                border: 1px solid red;
                margin: 50px auto;
                overflow: hidden;
            }
            nav ul li {
                float: left;
            }
            nav ul {
                width: 200%;
                animation: moving 2s linear infinite;
            }
            @keyframes moving {
                from {
                    transform: translateX(0);
                }
                to {
                    transform: translateX(-882px);
                }
    
            }
            nav:hover ul {
                animation-play-state: paused;
            }
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><img src="images/nav1.jpg"></li>
                <li><img src="images/nav2.jpg"></li>
                <li><img src="images/nav3.jpg"></li>
                <li><img src="images/nav4.jpg"></li>
                <li><img src="images/nav5.jpg"></li>
                <li><img src="images/nav6.jpg"></li>
                <li><img src="images/nav7.jpg"></li>
                <li><img src="images/nav1.jpg"></li>
                <li><img src="images/nav2.jpg"></li>
                <li><img src="images/nav3.jpg"></li>
                <li><img src="images/nav4.jpg"></li>
                <li><img src="images/nav5.jpg"></li>
                <li><img src="images/nav6.jpg"></li>
                <li><img src="images/nav7.jpg"></li>
            </ul>
        </nav>
    </body>
    </html>

    运行结果:

  • 相关阅读:
    MySQL DATE_SUB和SUBDATE函数:日期减法运算
    stream将list转化为map
    HackLab-脚本1
    隐写术-2
    Bug-变量
    Bug-you must stop it
    Bug-域名解析
    Bug-web3
    Bug-矛盾
    Bug-web基础$_POST 30
  • 原文地址:https://www.cnblogs.com/xuanxuanlove/p/10108852.html
Copyright © 2011-2022 走看看