<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Rahul thakur</h2>
</div>
<div class="effect-left">
<div class="ripples"></div>
</div>
<div class="effect-right">
<div class="ripples"></div>
</div>
</div>
body{
background: -webkit-gradient(linear,left top,right top,from(#A34FFE),to(#5934FC))
}
.effect-left, .effect-right{
position: absolute;
left: 0;
top:0;
}
.effect-left {
margin-bottom: -80vh;
margin-left: -80vh;
width: 160vh;
height: 160vh;
bottom: 0;
position: absolute;
left: 0;
}
.effect-right {
margin-top: -80vh;
margin-right: -80vh;
width: 160vh;
height: 160vh;
position: absolute;
top: 0;
right: 0;
}
.ripples, .ripples:after, .ripples:before {
width: 100%;
height: 100%;
}
.ripples {
text-align: center;
}
.ripples:before {
content:"";
background: -webkit-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: -moz-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: -o-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: radial-gradient(ellipse at center,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
border: .5px solid #fff;
border-radius: 50%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation-name: k1;
-moz-animation-name: k1;
-o-animation-name: k1;
animation-name: k1;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
.ripples:after {
content:"";
background: -webkit-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: -moz-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: -o-radial-gradient(center,ellipse,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
background: radial-gradient(ellipse at center,rgba(182,225,235,0) 0,rgba(182,225,235,.05) 40%,rgba(182,225,235,.4) 100%);
border: .5px solid #fff;
border-radius: 50%;
opacity: 0;
-webkit-animation-name: k1;
-moz-animation-name: k1;
-o-animation-name: k1;
animation-name: k1;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes k1 {
0% {
-webkit-transform: scale(.01);
transform: scale(.01);
opacity: 0
}
33% {
-webkit-transform: scale(.4);
transform: scale(.4);
opacity: .8
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@-moz-keyframes k1 {
0% {
-moz-transform: scale(.01);
transform: scale(.01);
opacity: 0
}
33% {
-moz-transform: scale(.4);
transform: scale(.4);
opacity: .8
}
100% {
-moz-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@-o-keyframes k1 {
0% {
-o-transform: scale(.01);
transform: scale(.01);
opacity: 0
}
33% {
-o-transform: scale(.4);
transform: scale(.4);
opacity: .8
}
100% {
-o-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
@keyframes k1 {
0% {
-webkit-transform: scale(.01);
-moz-transform: scale(.01);
-o-transform: scale(.01);
transform: scale(.01);
opacity: 0
}
33% {
-webkit-transform: scale(.4);
-moz-transform: scale(.4);
-o-transform: scale(.4);
transform: scale(.4);
opacity: .8
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
