zoukankan      html  css  js  c++  java
  • CSS动画实现滚动播放

    通过CSS3动画实现内容在特定区域滚动播放,当鼠标指上去的时候停止滚动

    这里是ul列表内容总共十张图片,但是为了播放的连续性,又复制了一份li,这样就不会出现间断

    通过animation-play-state:paused实现鼠标指上去停止滚动播放

    给ul列表加了display:flex让li横向排列

    说明:CSS里设置的100%时候向左移动的1200px是原来的一份ul的宽度,也就是下面10个li的总宽度

    HTML代码部分

    <div id="medialist" class="medialist">
                            <ul id="media">
                                <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15584288435189.png" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15572118197009.png" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576901324.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576575982.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518576232618.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518575784042.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518575355299.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574954387.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574552475.jpg" alt=""></a></li>
                                <li><a href="javascript:;"><img src="img-shouye/15518574162281.jpg" alt=""></a></li>
                            </ul>
                        </div>

    CSS代码部分

    #media{
        animation:rolling 20s infinite linear;
    }
    #media:hover{
        animation-play-state:paused;
    }
    @keyframes rolling{
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-1200px);
        }
    }

    页面显示

    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    get和post区别
    linux查看是否被入侵
    (转)MSSQL 各个发行版本版本号以及Compact 版本号
    (转)玩转-数据库行列转换
    (转)理解SQL SERVER中的分区表
    (转)使用CruiseControl+SVN+ANT实现持续集成之三
    (转)使用CruiseControl+SVN+ANT实现持续集成之二
    (转)使用SVN+CruiseControl+ANT实现持续集成之一
    (转)持续化集成工具CruiseControl.NET
    (转)DockPanel 右键增加关闭,除此之外全部关闭的功能
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11027828.html
Copyright © 2011-2022 走看看