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

Звёздное небо с облаками на CSS3

  1. Стиль:
  2.  
  3. @keyframes move-twink-back {
  4. from {
  5. background-position: 0 0;
  6. }
  7.  
  8. to {
  9. background-position: -10000px 5000px;
  10. }
  11. }
  12.  
  13. @-webkit-keyframes move-twink-back {
  14. from {
  15. background-position: 0 0;
  16. }
  17.  
  18. to {
  19. background-position: -10000px 5000px;
  20. }
  21. }
  22.  
  23. @-moz-keyframes move-twink-back {
  24. from {
  25. background-position: 0 0;
  26. }
  27.  
  28. to {
  29. background-position: -10000px 5000px;
  30. }
  31. }
  32.  
  33. @-ms-keyframes move-twink-back {
  34. from {
  35. background-position: 0 0;
  36. }
  37.  
  38. to {
  39. background-position: -10000px 5000px;
  40. }
  41. }
  42.  
  43. @keyframes move-clouds-back {
  44. from {
  45. background-position: 0 0;
  46. }
  47.  
  48. to {
  49. background-position: 10000px 0;
  50. }
  51. }
  52.  
  53. @-webkit-keyframes move-clouds-back {
  54. from {
  55. background-position: 0 0;
  56. }
  57.  
  58. to {
  59. background-position: 10000px 0;
  60. }
  61. }
  62.  
  63. @-moz-keyframes move-clouds-back {
  64. from {
  65. background-position: 0 0;
  66. }
  67.  
  68. to {
  69. background-position: 10000px 0;
  70. }
  71. }
  72.  
  73. @-ms-keyframes move-clouds-back {
  74. from {
  75. background-position: 0;
  76. }
  77.  
  78. to {
  79. background-position: 10000px 0;
  80. }
  81. }
  82.  
  83. .stars,.twinkling,.clouds {
  84. position: absolute;
  85. top: 0;
  86. left: 0;
  87. right: 0;
  88. bottom: 0;
  89. width: 100%;
  90. height: 100%;
  91. display: block;
  92. }
  93.  
  94. .stars {
  95. background: #000 url(/img/stars.png) repeat top center;
  96. z-index: 0;
  97. }
  98.  
  99. .twinkling {
  100. background: transparent url(/img/twinkling.png) repeat top center;
  101. z-index: 1;
  102. -moz-animation: move-twink-back 200s linear infinite;
  103. -ms-animation: move-twink-back 200s linear infinite;
  104. -o-animation: move-twink-back 200s linear infinite;
  105. -webkit-animation: move-twink-back 200s linear infinite;
  106. animation: move-twink-back 200s linear infinite;
  107. }
  108.  
  109. .clouds {
  110. background: transparent url(/img/clouds.png) repeat top center;
  111. z-index: 3;
  112. -moz-animation: move-clouds-back 200s linear infinite;
  113. -ms-animation: move-clouds-back 200s linear infinite;
  114. -o-animation: move-clouds-back 200s linear infinite;
  115. -webkit-animation: move-clouds-back 200s linear infinite;
  116. animation: move-clouds-back 200s linear infinite;
  117. }
  118.  
  119.  
  120. HTML код в любое место
  121.  
  122. <div class="stars"></div>
  123. <div class="twinkling"></div>
  124. <div class="clouds"></div>
» Описание: Смотрится шикарно)))
» Время добавления: 19 Сент 2016 в 14:38
» Посмотров: 2429
» textarea
» Рейтинг: [+3 | -1]
Комментарии [3]
Онлайн: 10
Реклама