                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /十天精通CSS3

圖片從左向右出現(xiàn)是slideLeft 從右向左是slideRight？還有自動(dòng)播放。。。。

.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

源自：十天精通CSS3 7-8

關(guān)注問(wèn)題我要回答

4724

操作

收起

2 回答

愛(ài)上慕婉清6262634 回答被采納 +2 積分
2017-10-09

.slideLeft?是html部分定義的類名

-webkit-animation-name: slideLeft;這是?下面那個(gè)定義的動(dòng)畫名字，都是可以隨意改變的，重點(diǎn)是下面里面的參數(shù)（left），定義的初始位置（0% { left: -100%; }）和結(jié)束位置（? 100% { left: 0%; }）

@-webkit-keyframes 'slideLeft' {

? ? ? ? ? ? 0% { left: -100%; }

? ? ? ? ? ? 100% { left: 0%; }

? ? ? ? ? ? }