Skip to content

Instantly share code, notes, and snippets.

Created March 22, 2015 04:22
Show Gist options
  • Save anonymous/578753525582b8cd7b90 to your computer and use it in GitHub Desktop.
Save anonymous/578753525582b8cd7b90 to your computer and use it in GitHub Desktop.
CSS3 Flat Circle/Round Icon Animation

CSS3 Flat Circle/Round Icon Animation

Use any image with this. The image does not have to be round and can be any size but it should have an aspect ratio of 1:1.

Just a variation of my other pen: Water Drop Circle Effect as CSS3 Animation

A Pen by Jascha Goltermann on CodePen.

License.

<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="icon"></div>
/*
jaschagoltermann.de
Sorry for all the outdated prefxes - they are for mobile browsers mostly.
Use any picture. Does not have to be round.
Picture should have an aspect ratio of 1:1.
Variation of my other pen:
Water Drop Circle Effect as CSS3 Animation
*/
body {
overflow: hidden;
background-color: DarkSeaGreen;
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(https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-twitter-256.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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment