Demo for CSS Moving Clouds in the Web Page Background

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body{
  height:400px;
  background-color:#BFDFEC;
    background-repeat:repeat-x;
 background-image:url("http://www.devanswer.com/img/cloud.png");
  animation: movement 10s linear infinite; 
}
@keyframes movement{
  0% {
    background-position:0px 0px;
  }
  100%{
    background-position:560px 0px;
  }
}
adiv{
  display:block;
  position:absolute;
  font-size:2rem;
  text-align:center;
  color:white;
  border:1px solid white;
  padding:2rem;
  border-radius:5px;
  margin-left: auto;
  margin-right: auto;
  
}
.centered {
  font-size:2rem;
  text-align:center;
  color:white;
  border:1px solid white;
  padding:2rem;

}
</style>

</head>
<body>
<div class="centered">devanswer.com</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

HTML Dynamic Jellys Shape in Gradient Background

In this background code, we have a gradient with pink and orange colors. A black shape is also constantly moving in the middle of the screen.

Pure CSS Background Effect on Mouse Hover

The background consists of black tiles in this code, which lighten the color of these tiles for a few seconds by moving the mouse, and then return to . . .

Pure CSS Raining Background

In this code we have a background that shows a rainy road. The road is fixed in this code, but the rain runs animated.

Moving Fireflies on Webpage Background Snippet

You can use these beautiful backgrounds for your website. In this post, you will see the background of the forest night where the fireflies are moving.