How to Create Bubble scrolling effect in website background using Html and Css

Hello guys 


i will tell you a website amazing bubble automatic scrolling effect with using HTML and CSS only.

Lets start
1) open your notepad and other editor in your computer.
2) Write html code

and also create External Style sheet in your notepad and atteched with your html page with using

<link rel="stylesheet" type="text/css" href="Your-file -name.css">

tag in your head section. and don't forget his extension write .css.

3)Know Lets start cooding

write your body section
<ul class="bubbles">

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>


</ul>

Your html Show Like THIS

In my html sheet i give name of Ul  Class name is bubbles.

Know Copy this code write in Your style sheet

body{
background-color:black;
}

.bubbles{
position: absolute;
top: 0;
left:0;
width: 100%
height:100%;
z-index: 0;
transform: translateZ(0);
}

.bubbles li{
position: absolute;
list-style: none;
display: block;
background-color: rgba(255,255,255,0.15);
bottom: 100px;
animation: square 20s infinite;
transition-timing-function: linear;
}

.bubbles li:nth-child(1){


width: 40px;
height: 40px;
left: 105px;
background-color: ;
background-color:#f3f3f6;
}


.bubbles li:nth-child(2){

width: 60px;
height: 60px;
left: 225px;
animation-delay: 2s;
animation-duration: 5s;
background-color:#f3f3f6;

}

.bubbles li:nth-child(3){

width: 70px;
height: 70px;
left: 15px;
animation-delay: 3s;
animation-duration: 13s;
background-color:#f3f3f6;

}

.bubbles li:nth-child(4){

width: 50px;
height: 50px;
left: 750px;
animation-delay: 4s;
animation-duration: 17s;
background-color:#f3f3f6;

}

.bubbles li:nth-child(5){

width: 90px;
height: 90px;
left: 480px;
animation-delay: 6s;
animation-duration: 10s;
background-color:#f3f3f6;

}

/*   If you want to create many bubble then you have to increase li  Tag in page and 
li:nth-chld(  li-count){

write same code but another value

}             */

@keyframes square{

0% {

-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {

-webkit-transform: translateY(1080px) rotate(630deg);

transform: translateY(1080px) rotate(630deg);



}

}


Thanku for reading my blog...