Space Floating Molecules

February 10, 2018
How To Create floating molecules  by using HTML and CSS In below show the code and output

Space Floating Molecules





<html>

<head>
<title>Space</title>
</head>

<style>
.molecules1
{
width:50px;
height:50px;
background-color:red;
border-radius:100%;
border:1px solid;
-webkit-animation:my 15s infinite;
}
@-webkit-keyframes my
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

.molecules2
{
width:45px;
height:45px;
background-color:purple;
border-radius:100%;
border:1px solid;
-webkit-animation:first 9s infinite;
}
@-webkit-keyframes first
{
0%{transform:translate3d(30px,50px,100px)}
20%{transform:translate3d(150px,200px,300px)}
40%{transform:translate3d(420px,500px,570px)}
}

.molecules3
{
width:40px;
height:40px;
background-color:#7FE0E1;
border-radius:100%;
border:1px solid;
-webkit-animation:second 10s infinite;
}
@-webkit-keyframes second
{
0%{transform:translate3d(10px,50px,100px)}
20%{transform:translate3d(200px,310px,400px)}
40%{transform:translate3d(550px,640px,710px)}
}

.molecules4
{
width:39px;
height:39px;
background-color:#92E17F;
border-radius:100%;
border:1px solid;
-webkit-animation:third 15s infinite;
}
@-webkit-keyframes third
{
0%{transform:translate3d(40px,100px,150px)}
20%{transform:translate3d(290px,390px,480px)}
40%{transform:translate3d(560px,650px,870px)}
}

.molecules5
{
width:45px;
height:45px;
background-color:#7FBDE1;
border-radius:100%;
border:1px solid;
-webkit-animation:four 12s infinite;
}
@-webkit-keyframes four
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

.molecules6
{
width:40px;
height:40px;
background-color:#CB7FE1;
border-radius:100%;
border:1px solid;
-webkit-animation:five 10s infinite;
}
@-webkit-keyframes five
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

.molecules7
{
width:48px;
height:48px;
background-color:#FC39F0;
border-radius:100%;
border:1px solid;
-webkit-animation:seven 14s infinite;
}
@-webkit-keyframes seven
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

.molecules8
{
width:38px;
height:38px;
background-color:#FC39B8;
border-radius:100%;
border:1px solid;
-webkit-animation:second 12s infinite;
}
@-webkit-keyframes second
{
0%{transform:translate3d(10px,50px,100px)}
20%{transform:translate3d(200px,310px,400px)}
40%{transform:translate3d(550px,640px,710px)}
}

.molecules9
{
width:39px;
height:39px;
background-color:#FCE739;
border-radius:100%;
border:1px solid;
-webkit-animation:seven 14s infinite;
}
@-webkit-keyframes seven
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

.molecules10
{
width:55px;
height:55px;
background-color:#F0FC39;
border-radius:100%;
border:1px solid;
-webkit-animation:seven 8s infinite;
}
@-webkit-keyframes seven
{
0%{transform:translate3d(10px,20px,30px)}
20%{transform:translate3d(50px,80px,100px)}
40%{transform:translate3d(120px,150px,170px)}
60%{transform:translate3d(180px,200px,250px)}
80%{transform:translate3d(310px,400px,500px)}
100%{transform:translate3d(600px,90px,1000px)}
}

</style>


<body>
<div class="molecules1"></div>
<div class="molecules2"></div>
<div class="molecules3"></div>
<div class="molecules4"></div>
<div class="molecules5"></div>
<div class="molecules6"></div>
<div class="molecules7"></div>
<div class="molecules8"></div>
<div class="molecules9"></div>
<div class="molecules10"></div>
</body>



</html>



Post a Comment

No comments

Subscribe to: Post Comments ( Atom )