wave.css 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /* 波浪动画 */
  2. #banner_wave_1 {
  3. width: auto;
  4. height: 65px;
  5. _filter: alpha(opacity=80);
  6. position: absolute;
  7. bottom: 0;
  8. width: 400%;
  9. left: -236px;
  10. z-index: 4;
  11. opacity: 1;
  12. transiton-property: opacity,bottom;
  13. transition-duration: .4s,.4s;
  14. animation-name: move2;
  15. animation-duration: 240s;
  16. animation-fill-mode: backwards;
  17. animation-timing-function: linear;
  18. animation-iteration-count: infinite;
  19. }
  20. #banner_wave_2 {
  21. width: auto;
  22. height: 80px;
  23. _filter: alpha(opacity=80);
  24. position: absolute;
  25. bottom: 0;
  26. width: 400%;
  27. left: 0;
  28. z-index: 3;
  29. opacity: 1;
  30. transiton-property: opacity,bottom;
  31. transition-duration: .4s,.4s;
  32. animation-name: move2;
  33. animation-duration: 160s;
  34. animation-fill-mode: backwards;
  35. animation-timing-function: linear;
  36. animation-iteration-count: infinite;
  37. }
  38. @keyframes move1 {
  39. 100%{
  40. background-position: 100% 0;
  41. }
  42. }
  43. @keyframes move2 {
  44. 100%{
  45. background-position: -100% 0;
  46. }
  47. }
  48. /* 波浪动画 END */