pullfresh.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. #pulldown, #pullup {
  2. background:#fff;
  3. height:2.5em;
  4. line-height:2.5em;
  5. padding:0.3125em 0.625em;
  6. border-bottom:0.0625em solid #ccc;
  7. font-weight:bold;
  8. font-size:0.875em;
  9. color:#888;
  10. }
  11. #pulldown .pulldown-icon, #pullup .pullup-icon {
  12. display:block;
  13. position: relative;
  14. width:2.5em; height:2.5em;
  15. background:url(img/pull-icon@2x.png) 0 0 no-repeat;
  16. -webkit-background-size:2.5em 5.0em; background-size:2.5em 5.0em;
  17. -webkit-transition-property:-webkit-transform;
  18. -webkit-transition-duration:250ms;
  19. }
  20. #pulldown .pulldown-icon {
  21. -webkit-transform:rotate(0deg) translateZ(0);
  22. }
  23. #pullup .pullup-icon {
  24. -webkit-transform:rotate(-180deg) translateZ(0);
  25. }
  26. #pulldown.flip .pulldown-icon {
  27. -webkit-transform:rotate(-180deg) translateZ(0);
  28. }
  29. #pullup.flip .pullup-icon {
  30. -webkit-transform:rotate(0deg) translateZ(0);
  31. }
  32. #pulldown.loading .pulldown-icon, #pullup.loading .pullup-icon {
  33. background-position:0 100%;
  34. -webkit-transform:rotate(0deg) translateZ(0);
  35. -webkit-transition-duration:0ms;
  36. -webkit-animation-name:loading;
  37. -webkit-animation-duration:2s;
  38. -webkit-animation-iteration-count:infinite;
  39. -webkit-animation-timing-function:linear;
  40. }
  41. @-webkit-keyframes loading {
  42. from { -webkit-transform:rotate(0deg) translateZ(0); }
  43. to { -webkit-transform:rotate(360deg) translateZ(0); }
  44. }