【CSS】通知ベル作成【HTML】 - 頑張りすぎず頑張ろう

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLとCSS3で作る通知ベル</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
<div class="notifier new">
<i class="bell fa fa-bell-o"></i>
<div class="badge">999</div>
</div>
</p>
<p>
<div class="notifier green">
<i class="bell fa fa-envelope-o"></i>
<div class="badge">5</div>
</div>
</p>
</body>
</html>

style.css【ドックンドックン２回脈打つベル】

body {
padding: 20px;
background: #073B4C;
}

.notifier {
display: inline-block;
position: relative;
}

.bell {
font-size: 26px;
transition: 0.3s;
color: #FFF;
}

.bell:hover {
color: #EF476F;
}

.badge {
position: absolute;
top: -5px;
left: 24px;
background: #EF476F;
padding: 0 5px;
height: 22px;
border-radius: 11px;
font-size: 14px;
color: #FFF;
line-height: 22px;
white-space: nowrap;
}

.notifier.green .badge {
background: #06D6A0;
}

.notifier.green .bell:hover {
color: #06D6A0;
}

.notifier.new .badge {
animation: pulse 2s;
animation-iteration-count: infinite
}

@keyframes pulse {
40% {
transform: scale3d(1, 1, 1);
}

50% {
transform: scale3d(1.3, 1.3, 1.3);
}

55% {
transform: scale3d(1, 1, 1);
}
60% {
transform: scale3d(1.3, 1.3, 1.3);
}

65% {
transform: scale3d(1, 1, 1);
}
}