图片从左向右出现是slideLeft 从右向左是slideRight？还有自动播放。。。。
qq_楠笙_0
2017-09-25 14:49
.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回答
-
- 爱上慕婉清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的那个图片
十天精通CSS3
242553 学习 · 2623 问题
相似问题