zoukankan      html  css  js  c++  java
  • css动画属性--轮播图效果

    通过css的动画属性实现轮播图的显示效果

    代码如下:

               主体部分:

    <div id="move">
            <ul>
                <li><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
    <li><img src="images/1.jpg" alt=""></li>
        </ul>
    </div>

    div作为视窗位置和大小

    ul和li作为布局的样式定位到div视窗位置

    最后一张图片起到衔接和无缝过渡的效果

    css样式部分:

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #move {
            width: 400px;
            height: 300px;
            margin: 200px;
            border: 4px solid red;
            overflow: hidden;
            position: relative;
        }
        
        ul {
            width: 2000px;
            position: absolute;
            left: 0;
            top: 0;
            animation: move 10s ease 0s infinite normal;
        }
        
        li {
            float: left;
        }
        
        @keyframes move {
            0% {
                left: 0px;
            }
            25% {
                left: -400px;
            }
            50% {
                left: -800px;
            }
            75% {
                left: -1200px;
            }
            100% {
                left: -1600px;
            }
        }
        </style>

    如有不足,虚心请教

    不积跬步,无以至千里;不积小流,无以成江海。
  • 相关阅读:
    [NOIP2011提高组]聪明的质监员
    NOIP 2010 关押罪犯
    题目:埃及分数
    用scanf输入long long 型的数
    poj 1014 Dividing
    Cactus
    SQLite数据库的增删改查代码
    UltraGrid常用方法属性代码
    维护数据表常用SQL语句
    C#备份收藏夹代码
  • 原文地址:https://www.cnblogs.com/caoruichun/p/7210748.html
Copyright © 2011-2022 走看看