css3走马灯动画效果·会用其7个参数即可

        动画,两个状态之间的转换,可以使用过度来解决。如果是多个状态之间的转换,就需要使用动画了,并且动画过程是可按的,例如是否循环,是否捆住,最终画面等等。
        白龙网特别提醒,动画要先定义(关键词、花括号、从A到B),后使用(关键词:动画名称 动画时间,两个参数之间用空格隔开)。可以定义两个状态之间的转换(from/to),也可以定义多个状态之间的转换(百分比)。
(1)两个状态之间的动画
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color:red;
            /* 调用已定义的动画:动画名称、动画时间 */
            animation: change 5s;
        }
        /* 用from/to定义两种宽度变化的动画 */
        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        }
    </style>
</head>
<body>
(2)多种动画之间的转换
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color:red;
            /* 调用已定义的动画:动画名称、动画时间 */
            animation: change 5s;
        }
        /* 用百分比定义多种宽度变化的动画 */
        @keyframes change {        
           0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 800px;
            }
            100% {
                width: 800px;
                height: 300px;
            }
        }
    </style>
</head>
<body>
(3)调用动画的参数
animation:动画名称 动画时长 速度曲线(linear/step()) 延迟时间 重复次数(4/infinite) 动画方向(alternate) 结束状态(backwards/forwards),各参数之间用空格隔开。
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color:red;
            /* 动画名称、动画时长,这两个参数必须要出现;参数不分先后顺序;如果有两个数值,那么第一个数值表示时长,第二个数值表示延迟时长。 */
             animation: change 5s;
             /* 速度曲线:匀速、非匀速 */
            animation: change 2s linear;
            animation: change 2s steps(3);
            /* 延迟时间 */
            animation: change 2s 3s;
            /* 重新次数:指定次数,则写数字即可;无限循环,使用infinite关键词即可。 */
            animation: change 2s 5;
            animation: change 2s infinite;
            /* 动画方向,常用,与无限循环配合使用 */
            animation:  change 2s infinite alternate;
            /* 动画结束后状态有两个,backwards是默认状态,无效果;forwards是结束时的状态,需要注意的是,该关键词不能与无限循环一起使用 */
            animation: change 2s backwards;
            animation: change 2s forwards;
        }
        @keyframes change {        
            from {
                width: 200px;
            }
            to  {
                width: 600px;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
另外,动画的所有参数都可以拆分开来单独书写,如下:
            animation-name: change;
            animation-duration: 3s;
            animation-timing-function: linear;
            animation-timing-function: steps(3);
            animation-delay: 4s;
            animation-iteration-count: infinite;
            animation-iteration-count: 5;
            animation-direction: alternate;
            animation-fill-mode: backwards;
            animation-fill-mode: forwards;
            animation-play-state: paused;
   (4)动画类型
    精灵图+速度曲线steps,可以制作逐帧动画。而另外一种匀速的动画,叫补间动画。
    逐帧动画的实现方法,分为三步,首先是布局盒子,盒子的宽高与每个精灵图的宽高相同,根据精灵图的宽度W以及精灵图中小图的数量C,求出每个小图的宽度W/C,高度就是精灵图的高度,根据上述两个参数亮度、高度,新建一个盒子,并把精灵图设置为盒子的背景图片。其次是要定义动画,即:在动画中定义背景精灵图的水平、垂直位置的初值与最终值;最后在盒子中调用定义的动画即可,而动画的参数分别为:动画名、动画时间、速度曲线(steps(12)属性要设置成小精灵图片的个数)、重复次数(无限循环infinite)。
    <style>
        div {
            width: 103px;
            height: 103px;
            background-image: url(./sp.jpg);
            animation: move 2s steps(12) infinite;
        }
        @keyframes move {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1237px 0;
            }
        }
    </style>
</head>
<body>
 
(5)奔跑效果
多组动画-小人从一个位置跑到另外一个位置
多组动画,可以复加使用。方法是用逗号隔开每一动画的名称与其属性。另外,如果动画的初始位置与盒子的初始样式相同时,可以省略from。
    <style>
        div {
            width: 103px;
            height: 103px;
            background-image: url(./sp.jpg);
            animation: move 2s steps(12) infinite,
            run 3s forwards;
        }
        @keyframes move {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -1237px 0;
            }
        }
        @keyframes run {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(800px);
            }
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
(6)走马灯效果
7张图片的走马灯效果,每次展示3张图片。根据题意可知,首先,布局的盒子宽度是3张图片的宽度,高度是图片的高度;7张图片放到UL/LI之中,浮动之后,由于.box盒子装不下7张图片的宽度,有故而LI会换行,此时把UL设置成7张图片的宽度,.box设置成超出隐藏,即可让7张图片显示在一行。其次,定义使用动画,其实就是让图片在UL中移动7张图片的宽度,即定义7张图片宽度的动画,让UL调用;但是,此时会出现一个问题,即7张图片移动之后,.box成空白了。故而需要把前3张图片复制一份放到7张图片的后面用以占位,那么此时UL的宽度应该变为10张图片的宽度了。再次,可以设置一个HOVER效果,当鼠标经过.box盒子时,让UL移动效果暂停下来。
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style:none;
        }
        .box {
            margin: 0 auto;
            width: 957px;
            height: 319px;
            border: 1px solid black;
            overflow: hidden;
        }
        .box ul {
            width: 3190px;
            height: 319px;
            animation: move 5s infinite;
        }
        .box ul li {
            float: left;
        }
        @keyframes move {
            to {
                transform: translateX(-2233px);
            }
        }
        .box:hover ul {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./image/clothes_goods_1.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_2.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_3.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_4.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_5.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_6.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_7.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_1.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_2.jpg" alt=""></li>
            <li><img src="./image/clothes_goods_3.jpg" alt=""></li>
        </ul>
    </div>
</body>
(7)布局经验
        当给body添加背景图片占满浏览器位置时,必须给html/body一个100%的高度,否则无法占满整个浏览器窗口。
        动画效果的实现,一般是先引入内容,再定义动画,最后调用动画,即可。