"ripple effects"
Bootstrap 4.1.1 Snippet by csshint

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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="wrapper">
<div class="ripple_circle">
<div id="ripple"></div>
<div id="ripple2"></div>
<div id="ripple3"></div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
background: -webkit-gradient(linear,left top,right top,from(#A34FFE),to(#5934FC));
}
.wrapper {
overflow: hidden;
width: 400px;
height: 400px;
background-color: #FFF;
border-radius: 100%;
margin: 50px auto;
}
.ripple_circle{
z-index: 1;
position: relative;
width: 340px;
height: 340px;
background: -webkit-radial-gradient(circle,#FDC800,#FF4137);
background: -moz-radial-gradient(circle,#FDC800,#FF4137);
background: -o-radial-gradient(circle,#FDC800,#FF4137);
background: radial-gradient(circle,#FDC800,#FF4137);
top: 30px;
left: 30px;
border-radius: 100%;
-webkit-box-shadow: -2px 3px 26px 0 #FF4137;
box-shadow: -2px 3px 26px 0 #FF4137;
}
#ripple, #ripple2, #ripple3 {
border-radius: 9999px;
border: 1px solid rgba(255,255,255,.4);
-webkit-box-shadow: 0 0 20px rgba(255,255,255,.4);
box-shadow: 0 0 20px rgba(255,255,255,.4);
position: absolute;
bottom: 50%;
margin-bottom: -326px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Hipster As F*** Cards
Ripple Dot Animation
Modal Login with jQuery Effects
Close Panel Effects

Questions / Comments: