84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
按讚後數字飛起來的動畫,怎麼實現的?
本來想貼程式碼,有點長 麻煩
我的煮飯是把彈出變大的那個數字單獨給一個p
然後給這個p加動畫的樣式
js檔案抽離有點麻煩,給你看我的css的`/點讚/@-webkit-keyframes niceIn {
0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } 50% { opacity: 1; -webkit-transform: scale(1.5); transform: scale(1.5) } 70% { -webkit-transform: scale(.8); transform: scale(.8) } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) }
}@keyframes niceIn {
0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { opacity: 1; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5) } 70% { -webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8) } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) }
}
@-o-keyframes niceIn{
0% { opacity: 1; -o-transform: scale(1); transform: scale(1) } 50% { opacity: 1; -o-transform: scale(1.5); transform: scale(1.5) } 70% { -o-transform: scale(.8); transform: scale(.8) } 100% { opacity: 1; -o-transform: scale(1); transform: scale(1) }
@-moz-keyframes niceIn{
0% { opacity: 1; -moz-transform: scale(1); transform: scale(1) } 50% { opacity: 1; -moz-transform: scale(1.5); transform:scale(1.5) } 70% { -o-transform: scale(.8); transform: scale(.8) } 100% { opacity: 1; -moz-transform: scale(1); transform: scale(1) }
}.niceIn {
-webkit-animation:niceIn 0.8s .2s ease; -moz-animation:niceIn 0.8s .2s ease; -o-animation:niceIn 0.8s .2s ease; animation:niceIn 0.8s .2s ease;
}`
寫好動畫的樣式,完成點擊切換一下這個樣式的class就好了
點擊觸發動畫,動畫可以用css3的animation來實現
本來想貼程式碼,有點長 麻煩
我的煮飯是把彈出變大的那個數字單獨給一個p
然後給這個p加動畫的樣式
js檔案抽離有點麻煩,給你看我的css的
`
/點讚/
@-webkit-keyframes niceIn {
}
@keyframes niceIn {
}
@-o-keyframes niceIn{
}
@-moz-keyframes niceIn{
}
.niceIn {
}
`
寫好動畫的樣式,完成點擊切換一下這個樣式的class就好了
點擊觸發動畫,動畫可以用css3的animation來實現