<!-- code by gs code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: #36688d;
}
.hydrogen{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
border: 2px solid #fff;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 0 50px 10px #fff;
animation: syhydro 4s infinite linear;
}
.hydrogen:before{
content: "";
position: absolute;
top:40%;
left: 40%;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 50px 10px #fff;
}
.hydrogen:after{
content: "";
position: absolute;
top:10px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 50px 10px #fff;
}
@keyframes syhydro {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(359deg);
}
}
</style>
</head>
<body>
<div class="hydrogen">
</div>
</body>
</html>
