@-webkit-keyframes bird-slow{
0% {background-position:-0%;}
100% {background-position:-300%;}
}
0% {background-position:-0%;}
100% {background-position:-300%;}
}
2016-08-29
內(nèi)容很好!??!會css3動畫,但只是淺顯的用法,見到step的用法,猶如看到了新世界。另外一個驚喜是 deffered,如此簡單的解決了很多異步調(diào)用的問題,真的很贊。主要是課程內(nèi)容由淺入深,該講的都講到了,讓我受益匪淺,真的很感謝老師。
2016-08-27
里面有幾段話要加分號不然沒法運(yùn)行 其實(shí)類似于監(jiān)聽事件 設(shè)置一個監(jiān)聽 程序運(yùn)行完了就彈框 取消監(jiān)聽就不監(jiān)聽這個函數(shù)運(yùn)行
2016-08-27
@keyframes bird-slow{
0% {background-position:0px 0px;}
100% { background-position: -273px 0px; }
}
.birdFly {
/*寫法1*/
-moz-animation: bird-slow 400ms steps(3,start) infinite;
animation:bird-slow 400ms steps(3,start) infinite;
}
0% {background-position:0px 0px;}
100% { background-position: -273px 0px; }
}
.birdFly {
/*寫法1*/
-moz-animation: bird-slow 400ms steps(3,start) infinite;
animation:bird-slow 400ms steps(3,start) infinite;
}
2016-08-26
.window-left.hover {
transform-origin: 0.1rem;
transform:rotateY(60deg) scale(0.95);
}
.window-right.hover {
transform-origin: 1.1rem;
transform:rotateY(60deg) scale(0.95);
}
transform-origin: 0.1rem;
transform:rotateY(60deg) scale(0.95);
}
.window-right.hover {
transform-origin: 1.1rem;
transform:rotateY(60deg) scale(0.95);
}
2016-08-23
@keyframes effectOut {
0% {
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
@keyframes effectIn {
0% {
transform: scale(20);/*放大20倍*/
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
0% {
opacity: 1;
}
100% {
transform: scale(20);
opacity: 0;
}
}
@keyframes effectIn {
0% {
transform: scale(20);/*放大20倍*/
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}