Animated Cloud Effect With This Source Code
HTML Code
<!doctype html>
<html>
<head>
<title>Animation Cloud</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="Box">
<div class="cloude1"><img src="http://pngimg.com/uploads/cloud/cloud_PNG24.png"></div>
<div class="cloude2"><img src="http://pngimg.com/uploads/cloud/cloud_PNG24.png"></div>
<center><font color="red"><h1> Hello Guys <br>Follow & Share <br>To Maa Blogger <br>I Hope That U Are Enjoying This Session <br>Please Be Continue To See This Blog<br> And Guys Please Follow & Share To Maa Blogger</h1></font></center>
</div>
</body>
</html>
CSS Code
body{
margin:0px;
padding:0px;
background:url('https://i.pinimg.com/originals/da/d7/96/dad7967d732c8119ed35942cb8f16471.jpg')center center fixed;
}
.Box{
background-size:cover;
height:650px;
width:100%;
position:relative;
overflow:hidden;
}
.Box img {
width:100%;
}
.Box .cloude1{
position:absolute;
top:-10%;
animation:cloud1 infinite 30s linear;
}
@keyframes cloud1{
0%{
transform:translateX(-100%);
}
100%{
transform:translateX(100%);
}
}
.Box .cloude2{
position:absolute;
top:-10%;
animation:cloud2 infinite 30s linear;
}
@keyframes cloud2{
0%{
transform:translateX(-70%);
}
100%{
transform:translateX(70%);
}
}
Posts
42 Comments
Wow
ReplyDeleteKallu
ReplyDeleteWonder
Kallu
ReplyDeleteExcellent
Perfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeletePerfect 👌
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteSuperb
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeletefantastic
ReplyDeletefantastic
ReplyDeletefantastic
ReplyDeletefantastic
ReplyDeletefantastic
ReplyDeletefantastic
ReplyDeletebrilliant
ReplyDeletebrilliant
ReplyDeletebrilliant
ReplyDeletebrilliant
ReplyDeletefabulous
ReplyDeletefabulous
ReplyDeletefabulous
ReplyDeletefabulous
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteAmazing
ReplyDeleteWow Wonderful
ReplyDeleteWow Wonderful
ReplyDeleteWow Interesting
ReplyDeleteWow Interesting
ReplyDeleteWow Interesting
ReplyDeleteWow Interesting
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDelete