logo DevAnswer - Developers Answer

CSS Moving Clouds in the Web Page Background

20th October

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>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>                        



Other Codes