CSS3 animated notification badge which animates on value change
Forked from sjmcpherso's Pen CSS animated notification badge.
Forked from sjmcpherso's Pen CSS animated notification badge.
A Pen by Alecia Vogel on CodePen.
CSS3 animated notification badge which animates on value change
Forked from sjmcpherso's Pen CSS animated notification badge.
Forked from sjmcpherso's Pen CSS animated notification badge.
A Pen by Alecia Vogel on CodePen.
<head> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
</head> | |
<div class="container" id="badge"> | |
<span id="badge-envelope" class="icon-hover"><i class="fa fa-bell"></i> | |
</div> |
(function(d){ | |
var i = 1; | |
var badge = document.getElementById('badge'); | |
var int = window.setInterval(updateBadge, 2000); //Update the badge every 5 seconds | |
var badgeNum; | |
function updateBadge(){//To rerun the animation the element must be re-added back to the DOM | |
var badgeChild = badge.children[0]; | |
if(badgeChild.className==='badge-num') | |
badge.removeChild(badge.children[0]); | |
badgeNum = document.createElement('div'); | |
badgeNum.setAttribute('class','badge-num'); | |
badgeNum.innerHTML = i++; | |
var insertedElement = badge.insertBefore(badgeNum,badge.firstChild); | |
console.log(badge.children[0]); | |
} | |
})(document); |
html, body { | |
height: 100%; | |
} | |
body { | |
background: #0099FF; | |
align-items: center; | |
display: flex; | |
font-family: sans-serif; | |
justify-content: center; | |
background-image: -webkit-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%); | |
background-image: -moz-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%); | |
background-image: -o-radial-gradient(top, circle cover, #97d0e1, #0099FF 80%); | |
background-image: radial-gradient(top, circle cover, #97d0e1, #0099FF 80%); | |
} | |
.container { | |
position:relative; | |
-webkit-perspective: 1000; | |
-webkit-backface-visibility: hidden; | |
} | |
.badge-num { | |
box-sizing:border-box; | |
font-family: 'Trebuchet MS', sans-serif; | |
background: #0099FF; | |
cursor:default; | |
border-radius: 50%; | |
color: #fff; | |
font-weight:bold; | |
font-size: 16px; | |
height: 30px; | |
line-height:1.55em; | |
top:-9px; | |
right:-11px; | |
border:2px solid #fff; | |
position: absolute; | |
text-align: center; | |
width: 30px; | |
box-shadow: 1px 1px 5px rgba(0,0,0, .2); | |
animation: pulse 1.5s 1; | |
} | |
.badge-num:after { | |
content: ''; | |
position: absolute; | |
top:-2px; | |
left:-2px; | |
border:2px solid rgba(0,155,243,.5); | |
opacity:0; | |
border-radius: 50%; | |
width:100%; | |
height:100%; | |
animation: sonar 1.5s 1; | |
} | |
@keyframes sonar { | |
0% {transform: scale(.9); opacity:1;} | |
100% {transform: scale(2);opacity: 0;} | |
} | |
@keyframes pulse { | |
0% {transform: scale(1);} | |
20% {transform: scale(1.4); } | |
50% {transform: scale(.9);} | |
80% {transform: scale(1.2);} | |
100% {transform: scale(1);} | |
} | |
#badge-envelope :before { | |
font-size:45px; | |
text-decoration: none; | |
} | |
.icon-hover { | |
color: fade(white, 40%); | |
transition: color 500ms ease; | |
cursor: pointer; | |
&:hover { | |
color: fade(white, 70%); | |
} | |
} |