In this tutorial I will create animated CSS3 background with floating clouds. It is a lightweight yet great way to create beautiful website backgrounds. Heavy SWF files are no longer needed to create such animations. I will only be using CSS3 and HTML to create animated clouds background.
Now I will show you how you can implement CSS3 cloud animated background to your website. I will be using basic code from here.
HTML:
Insert the below code just after the start of <body> tag in an HTML file.
|
1 2 3 4 5 6 7 8 |
<div id="clouds"> <div class="cloud x1"></div> <div class="cloud x2"></div> <div class="cloud x3"></div> <div class="cloud x4"></div> <div class="cloud x5"></div> </div> |
CSS:
Insert below code in <head> section of your HTML file or into CSS file which is included in your HTML file. The code below is simple and is easily understandable to anyone with basic CSS3 knowledge.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<style> *{ margin: 0; padding: 0;} body{ position: relative; overflow: hidden; } #clouds{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; background-color: rgba(0,0,0,0.5); /*dim the background*/ } #clouds{ padding: 100px 0; background: #c9dbe9; background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%); background: -linear-gradient(top, #c9dbe9 0%, #fff 100%); background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%); } .cloud { width: 200px; height: 60px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: relative; } .cloud:before, .cloud:after { content: ''; position: absolute; background: #fff; width: 100px; height: 80px; position: absolute; top: -15px; left: 10px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform: rotate(30deg); } .cloud:after { width: 120px; height: 120px; top: -55px; left: auto; right: 15px; } .x1 { -webkit-animation: moveclouds 15s linear infinite; -moz-animation: moveclouds 15s linear infinite; -o-animation: moveclouds 15s linear infinite; } .x2 { left: 200px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.6; /*opacity proportional to the size*/ /*Speed will also be proportional to the size and opacity*/ /*More the speed. Less the time in 's' = seconds*/ -webkit-animation: moveclouds 25s linear infinite; -moz-animation: moveclouds 25s linear infinite; -o-animation: moveclouds 25s linear infinite; } .x3 { left: -250px; top: -200px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.8; /*opacity proportional to the size*/ -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; -o-animation: moveclouds 20s linear infinite; } .x4 { left: 470px; top: -250px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.75; /*opacity proportional to the size*/ -webkit-animation: moveclouds 18s linear infinite; -moz-animation: moveclouds 18s linear infinite; -o-animation: moveclouds 18s linear infinite; } .x5 { left: -150px; top: -150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.8; /*opacity proportional to the size*/ -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; -o-animation: moveclouds 20s linear infinite; } @-webkit-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } @-moz-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } @-o-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } </style> |
Complete Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html" /> <meta name="author" content="umar hassan" /> <title>CSS3 Animated Clouds Background</title> <style> *{ margin: 0; padding: 0;} body{ position: relative; overflow: hidden; } #clouds{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; background-color: rgba(0,0,0,0.5); /*dim the background*/ } #clouds{ padding: 100px 0; background: #c9dbe9; background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%); background: -linear-gradient(top, #c9dbe9 0%, #fff 100%); background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%); } /*Time to finalise the cloud shape*/ .cloud { width: 200px; height: 60px; background: #fff; border-radius: 200px; -moz-border-radius: 200px; -webkit-border-radius: 200px; position: relative; } .cloud:before, .cloud:after { content: ''; position: absolute; background: #fff; width: 100px; height: 80px; position: absolute; top: -15px; left: 10px; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -webkit-transform: rotate(30deg); transform: rotate(30deg); -moz-transform: rotate(30deg); } .cloud:after { width: 120px; height: 120px; top: -55px; left: auto; right: 15px; } /*Time to animate*/ .x1 { -webkit-animation: moveclouds 15s linear infinite; -moz-animation: moveclouds 15s linear infinite; -o-animation: moveclouds 15s linear infinite; } /*variable speed, opacity, and position of clouds for realistic effect*/ .x2 { left: 200px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.6; /*opacity proportional to the size*/ /*Speed will also be proportional to the size and opacity*/ /*More the speed. Less the time in 's' = seconds*/ -webkit-animation: moveclouds 25s linear infinite; -moz-animation: moveclouds 25s linear infinite; -o-animation: moveclouds 25s linear infinite; } .x3 { left: -250px; top: -200px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.8; /*opacity proportional to the size*/ -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; -o-animation: moveclouds 20s linear infinite; } .x4 { left: 470px; top: -250px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.75; /*opacity proportional to the size*/ -webkit-animation: moveclouds 18s linear infinite; -moz-animation: moveclouds 18s linear infinite; -o-animation: moveclouds 18s linear infinite; } .x5 { left: -150px; top: -150px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.8; /*opacity proportional to the size*/ -webkit-animation: moveclouds 20s linear infinite; -moz-animation: moveclouds 20s linear infinite; -o-animation: moveclouds 20s linear infinite; } @-webkit-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } @-moz-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } @-o-keyframes moveclouds { 0% {margin-left: 1000px;} 100% {margin-left: -1000px;} } </style> </head> <body> <div id="clouds"> <div class="cloud x1"></div> <div class="cloud x2"></div> <div class="cloud x3"></div> <div class="cloud x4"></div> <div class="cloud x5"></div> </div> <h1 style="padding-top: 100px;">This is a sample text. Please visit <a href="http://earlysandwich.com">EarlySandwich</a> for complete tutorial </h1> </body> </html> |
