问答详情
源自:7-8 切换背景图像综合练习题

图片从左向右出现是slideLeft 从右向左是slideRight?还有自动播放。。。。

.slideLeft:target{

            z-index: 100;

            -webkit-animation-name: slideLeft;

            -webkit-animation-duration: 1s;

            -webkit-animation-iteration-count: 1;

            -moz-animation-name: slideLeft;

            -moz-animation-duration: 1s;

            -moz-animation-iteration-count: 1;

            -ms-animation-name: slideLeft;

            -ms-animation-duration: 1s;

            -ms-animation-iteration-count: 1;

            -o-animation-name: slideLeft;

            -o-animation-duration: 1s;

            -o-animation-iteration-count: 1;

            animation-name: slideLeft;

            animation-duration: 1s;

            animation-iteration-count: 1;

            }

提问者:qq_楠笙_0 2017-09-25 14:49

个回答

  • 爱上慕婉清6262634
    2017-10-09 17:41:11
    已采纳

    .slideLeft 是html部分定义的类名

    -webkit-animation-name: slideLeft;这是 下面那个定义的动画名字,都是可以随意改变的,重点是下面里面的参数(left),定义的初始位置(0% { left: -100%; })和结束位置(  100% { left: 0%; })

    @-webkit-keyframes 'slideLeft' {

                0% { left: -100%; }

                100% { left: 0%; }

                }

  • Dva_Come_to_web
    2017-09-26 15:52:25

    下面的animation是以后要学的动画部分。这节课主要练习CSS的选择器的使用,  .slideLeft实际上是选择了文档中img中类为slideLeft的那个图片