Advertisement
thuechen

ANIMATED BACKGROUND FOR WEBSITE

Jun 4th, 2015
449
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.60 KB | None | 0 0
  1. <!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. /*Lets start with the cloud formation rather*/
  6.  
  7. /*The container will also serve as the SKY*/
  8.  
  9. *{ margin: 0; padding: 0;}
  10.  
  11. body {
  12. /*To hide the horizontal scroller appearing during the animation*/
  13. overflow: hidden;
  14. }
  15.  
  16. #clouds{
  17. padding: 100px 0;
  18. background: #c9dbe9;
  19. background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  20. background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
  21. background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  22. }
  23.  
  24. /*Time to finalise the cloud shape*/
  25. .cloud {
  26. width: 200px; height: 60px;
  27. background: #fff;
  28.  
  29. border-radius: 200px;
  30. -moz-border-radius: 200px;
  31. -webkit-border-radius: 200px;
  32.  
  33. position: relative;
  34. }
  35.  
  36. .cloud:before, .cloud:after {
  37. content: '';
  38. position: absolute;
  39. background: #fff;
  40. width: 100px; height: 80px;
  41. position: absolute; top: -15px; left: 10px;
  42.  
  43. border-radius: 100px;
  44. -moz-border-radius: 100px;
  45. -webkit-border-radius: 100px;
  46.  
  47. -webkit-transform: rotate(30deg);
  48. transform: rotate(30deg);
  49. -moz-transform: rotate(30deg);
  50. }
  51.  
  52. .cloud:after {
  53. width: 120px; height: 120px;
  54. top: -55px; left: auto; right: 15px;
  55. }
  56.  
  57. /*Time to animate*/
  58. .x1 {
  59. -webkit-animation: moveclouds 15s linear infinite;
  60. -moz-animation: moveclouds 15s linear infinite;
  61. -o-animation: moveclouds 15s linear infinite;
  62. }
  63.  
  64. /*variable speed, opacity, and position of clouds for realistic effect*/
  65. .x2 {
  66. left: 200px;
  67.  
  68. -webkit-transform: scale(0.6);
  69. -moz-transform: scale(0.6);
  70. transform: scale(0.6);
  71. opacity: 0.6; /*opacity proportional to the size*/
  72.  
  73. /*Speed will also be proportional to the size and opacity*/
  74. /*More the speed. Less the time in 's' = seconds*/
  75. -webkit-animation: moveclouds 25s linear infinite;
  76. -moz-animation: moveclouds 25s linear infinite;
  77. -o-animation: moveclouds 25s linear infinite;
  78. }
  79.  
  80. .x3 {
  81. left: -250px; top: -200px;
  82.  
  83. -webkit-transform: scale(0.8);
  84. -moz-transform: scale(0.8);
  85. transform: scale(0.8);
  86. opacity: 0.8; /*opacity proportional to the size*/
  87.  
  88. -webkit-animation: moveclouds 20s linear infinite;
  89. -moz-animation: moveclouds 20s linear infinite;
  90. -o-animation: moveclouds 20s linear infinite;
  91. }
  92.  
  93. .x4 {
  94. left: 470px; top: -250px;
  95.  
  96. -webkit-transform: scale(0.75);
  97. -moz-transform: scale(0.75);
  98. transform: scale(0.75);
  99. opacity: 0.75; /*opacity proportional to the size*/
  100.  
  101. -webkit-animation: moveclouds 18s linear infinite;
  102. -moz-animation: moveclouds 18s linear infinite;
  103. -o-animation: moveclouds 18s linear infinite;
  104. }
  105.  
  106. .x5 {
  107. left: -150px; top: -150px;
  108.  
  109. -webkit-transform: scale(0.8);
  110. -moz-transform: scale(0.8);
  111. transform: scale(0.8);
  112. opacity: 0.8; /*opacity proportional to the size*/
  113.  
  114. -webkit-animation: moveclouds 20s linear infinite;
  115. -moz-animation: moveclouds 20s linear infinite;
  116. -o-animation: moveclouds 20s linear infinite;
  117. }
  118.  
  119. @-webkit-keyframes moveclouds {
  120. 0% {margin-left: 1000px;}
  121. 100% {margin-left: -1000px;}
  122. }
  123. @-moz-keyframes moveclouds {
  124. 0% {margin-left: 1000px;}
  125. 100% {margin-left: -1000px;}
  126. }
  127. @-o-keyframes moveclouds {
  128. 0% {margin-left: 1000px;}
  129. 100% {margin-left: -1000px;}
  130. }
  131. </style>
  132. </head>
  133. <body>
  134. <div id="clouds">
  135. <div class="cloud x1"></div>
  136. <!-- Time for multiple clouds to dance around -->
  137. <div class="cloud x2"></div>
  138. <div class="cloud x3"></div>
  139. <div class="cloud x4"></div>
  140. <div class="cloud x5"></div>
  141. </div>
  142. <div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
  143. </body>
  144. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement