Вход Регистрация
* [Mc]Laren

Снежинки на сайт

  1. Сам код:
  2.  
  3. <style type="text/css">
  4. #container{
  5. width: 100%;
  6. height: 480px;
  7. position: relative;
  8. background-color: #808991;
  9. }
  10.  
  11. @-webkit-keyframes fade{
  12. 0% { opacity: 0; }
  13. 10% { opacity: 0.8; }
  14. 100% { opacity: 0; }
  15. }
  16. @-webkit-keyframes fall{from {top: 10px;} to {top: 470px;}}
  17.  
  18. @-webkit-keyframes accumulate{
  19. from {height: 0px; opacity: 0}
  20. to {height: 20px; opacity: .75;}}
  21.  
  22. @-webkit-keyframes spin1{
  23. 0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
  24. 100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
  25. }
  26.  
  27. @-moz-keyframes fade{
  28. 0% { opacity: 0; }
  29. 10% { opacity: 0.8; }
  30. 100% { opacity: 0; }
  31. }
  32. @-moz-keyframes fall{
  33. from {top: 10px;}
  34. to {top: 470px;}
  35. }
  36. @-moz-keyframes accumulate{
  37. from {height: 0px; opacity: 0}
  38. to {height: 20px; opacity: .75;}
  39. }
  40. @-moz-keyframes spin1{
  41. 0% { -moz-transform: rotate(-180deg) translate(0px, 0px);}
  42. 100% { -moz-transform: rotate(180deg) translate(10px, 75px);}
  43. }
  44.  
  45. #snow div {
  46. position: absolute;
  47. top: -40px;
  48. -webkit-animation-name: fall, fade, spin1;
  49. -webkit-animation-iteration-count: infinite;
  50. -webkit-animation-direction: normal;
  51. -webkit-animation-timing-function: ease-in;
  52. -moz-animation-name: fall, fade, spin1;
  53. -moz-animation-iteration-count: infinite;
  54. -moz-animation-direction: normal;
  55. -moz-animation-timing-function: ease-in;
  56. }
  57. .snowflake {
  58. color: #fff;
  59. font-size: 2em;
  60. position: absolute;
  61. }
  62. .snowflake.f1 {
  63. left: 40px;
  64. -webkit-animation-duration: 5s;
  65. -moz-animation-duration: 5s;
  66. }
  67. .snowflake.f2 {
  68. font-size: 1.8em;
  69. left: 120px;
  70. -webkit-animation-duration: 7s;
  71. -moz-animation-duration: 7s;
  72. }
  73. .snowflake.f3 {
  74. left: 200px;
  75. -webkit-animation-duration: 8s;
  76. -moz-animation-duration: 8s;
  77. }
  78. .snowflake.f4 {
  79. font-size: 1.5em;
  80. left: 280px;
  81. -webkit-animation-duration: 6s;
  82. -moz-animation-duration: 6s;
  83. }
  84. #ground{
  85. background-color: #fff;
  86. width: 100%;
  87. position: absolute;
  88. bottom: 0;
  89. height: 20px;
  90. -webkit-animation-name: accumulate;
  91. -webkit-animation-duration: 60s;
  92. -moz-animation-name: accumulate;
  93. -moz-animation-duration: 60s;
  94. }
  95. </style>
  96.  
  97. Вывод:
  98.  
  99. <div id="container">
  100. <div id="snow" class="snow">
  101. <div class="snowflake f1">&#10053;</div>
  102. <div class="snowflake f2">&#10052;</div>
  103. <div class="snowflake f3">&#10053;</div>
  104. <div class="snowflake f4">&#10052;</div>
  105. </div>
  106. <div id="ground"></div>
  107. </div>
» Описание: Снежинки на сайт с помощью CSS
» Время добавления: 27 Марта 2015 в 10:54
» Посмотров: 1872
» textarea
» Рейтинг: [+0 | -0]
Комментарии [0]
Онлайн: 0
Реклама