为了账号安全,请及时绑定邮箱和手机立即绑定

图片从左向右出现是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;

            }

正在回答

2 回答

.slideLeft 是html部分定义的类名

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

@-webkit-keyframes 'slideLeft' {

            0% { left: -100%; }

            100% { left: 0%; }

            }

0 回复 有任何疑惑可以回复我~
#1

qq_楠笙_0 提问者

非常感谢!
2017-10-12 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信