zoukankan      html  css  js  c++  java
  • 动画实现无缝滚动

    <style>
    *{
    padding: 0;
    margin: 0;
    }
    div{
    882px;
    height: 86px;
    margin:100px auto;
    background-color: #ddd;
    overflow: hidden;
    }
    div >ul{
    200%;
    list-style: none;
    /*1.设置的名称*/
    animation-name: move;
    /*2.设置动画的耗时*/
    animation-duration: 8s;
    /*3.市场无限循环*/
    animation-iteration-count: infinite;
    /*4.设置时间函数*/
    animation-timing-function: linear;
    }

    div > ul > li{
    126px;
    float: left;
    }
    div > ul > li > img{
    100%;
    }
    /*鼠标上移,停止动画*/
    div:hover > ul{
    cursor: pointer;
    animation-play-state: paused;
    }

    /*创建动画*/
    @keyframes move {
    from{
    transform: translateX(0);
    }
    to{
    transform: translateX(-882px);
    }
    }
    </style>
    </head>
    <body>
    <div>
    <ul>
    <li><img src="images/img/1.jpg" alt=""></li>
    <li><img src="images/img/2.jpg" alt=""></li>
    <li><img src="images/img/3.jpg" alt=""></li>
    <li><img src="images/img/4.jpg" alt=""></li>
    <li><img src="images/img/5.jpg" alt=""></li>
    <li><img src="images/img/6.jpg" alt=""></li>
    <li><img src="images/img/7.jpg" alt=""></li>
    <li><img src="images/img/1.jpg" alt=""></li>
    <li><img src="images/img/2.jpg" alt=""></li>
    <li><img src="images/img/3.jpg" alt=""></li>
    <li><img src="images/img/4.jpg" alt=""></li>
    <li><img src="images/img/5.jpg" alt=""></li>
    <li><img src="images/img/6.jpg" alt=""></li>
    <li><img src="images/img/7.jpg" alt=""></li>
    </ul>
    </div>
  • 相关阅读:
    pyecharts 0.5.11介绍
    Python并发写入一个文件
    subprocess模块详解(二)
    subprocess模块详解(一)
    大数据环境下的数据仓库建设
    Java计算字符串相似度
    Pandas matplotlib无法显示中文解决办法
    Hadoop YARN参数介绍(四)[推荐]
    Hadoop YARN参数介绍(三)
    wsl2 ubuntu20.04 上使用 kubeadm 创建一个单主集群
  • 原文地址:https://www.cnblogs.com/lujieting/p/10230706.html
Copyright © 2011-2022 走看看