CSS
body {
background-color: #F35E5C;
background-image:
-webkit-linear-gradient(
90deg, rgba(0,0,0,.1) 50%,
transparent 25%, transparent 50%,
rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 90%,
transparent 75%, transparent);
background-image:
-moz-linear-gradient(
90deg, rgba(0,0,0,.1) 50%,
transparent 25%, transparent 50%,
rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 90%,
transparent 75%, transparent);
background-image:
linear-gradient(
90deg, rgba(0,0,0,.1) 50%,
transparent 25%, transparent 50%,
rgba(0,0,0,.1) 50%, rgba(0,0,0,.1) 90%,
transparent 75%, transparent);
background-size: 50px 50px;
}
.icon{
position: absolute;
width: 180px;
height: 180px;
background: url(http://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/chat-2-icon.png) no-repeat;
background-size: 180px 180px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 3;
-webkit-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
-moz-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 25px 2px rgba(0,0,0,.4),
inset 0 0 0 15px rgba(255,255,155,.4);
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
/* border-radius: 50% has issues on some mobile browsers */
}
.pulse1 {
position: absolute;
width: 200px;
height: 200px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 1;
opacity: 0;
border: 3px solid rgba(255,255,255,.1);
-webkit-animation: pulsejg1 4s linear infinite;
-moz-animation: pulsejg1 4s linear infinite;
animation: pulsejg1 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pulse2 {
position: absolute;
width: 200px;
height: 200px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 2;
opacity: 0;
border: 1px solid rgba(255,255,255,0);
-webkit-animation: pulsejg2 4s linear infinite;
-moz-animation: pulsejg2 4s linear infinite;
animation: pulsejg2 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@-webkit-keyframes pulsejg1 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
50% {
-webkit-transform: scale(.6);
opacity: 0;
}
60% {
-webkit-transform: scale(.9);
opacity: .2;
}
70% {
-webkit-transform: scale(1.1);
opacity: .35;
}
80% {
-webkit-transform: scale(1.25);
opacity: .2;
}
100% {
-webkit-transform: scale(1.4);
opacity: 0;
}
}
@-moz-keyframes pulsejg1 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
50% {
-moz-transform: scale(.6);
opacity: 0;
}
60% {
-moz-transform: scale(.9);
opacity: .2;
}
70% {
-moz-transform: scale(1.1);
opacity: .35;
}
80% {
-moz-transform: scale(1.25);
opacity: .2;
}
100% {
-moz-transform: scale(1.4);
opacity: 0;
}
}
@keyframes pulsejg1 {
0% {
transform: scale(.6);
opacity: 0;
}
50% {
transform: scale(.6);
opacity: 0;
}
60% {
transform: scale(.9);
opacity: .1;
}
70% {
transform: scale(1.1);
opacity: .25;
}
80% {
transform: scale(1.25);
opacity: .1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
@-webkit-keyframes pulsejg2 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
40% {
-webkit-transform: scale(.8);
opacity: .05;
}
50% {
-webkit-transform: scale(1);
opacity: .1;
}
60% {
-webkit-transform: scale(1.1);
opacity: .3;
}
80% {
-webkit-transform: scale(1.2);
opacity: .1;
}
100% {
-webkit-transform: scale(1.3);
opacity: 0;
}
}
@-moz-keyframes pulsejg2 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
40% {
-moz-transform: scale(.8);
opacity: .05;
}
50% {
-moz-transform: scale(1);
opacity: .1;
}
60% {
-moz-transform: scale(1.1);
opacity: .3;
}
80% {
-moz-transform: scale(1.2);
opacity: .1;
}
100% {
-moz-transform: scale(1.3);
opacity: 0;
}
}
@keyframes pulsejg2 {
0% {
transform: scale(.6);
opacity: 0;
}
40% {
transform: scale(.8);
opacity: .05;
}
50% {
transform: scale(1);
opacity: .1;
}
60% {
transform: scale(1.1);
opacity: .3;
}
80% {
transform: scale(1.2);
opacity: .1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
