<div class="container">
<div class="container__content">
<div class="bell">
<div class="notification"></div>
<svg class="bell-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 545 520"><defs><style>.cls-1{fill:none;stroke:#4c5158;stroke-miterlimit:10;stroke-width:48px;}</style></defs><title>Bell</title><path class="cls-1" d="M715.5,941.51v-172c0-108.8-88.2-197-197-197h0c-108.8,0-197,88.2-197,197v172H321A51.5,51.5,0,0,0,269.5,993h0a51.5,51.5,0,0,0,51.5,51.5H715A51.5,51.5,0,0,0,766.5,993h0A51.49,51.49,0,0,0,715.5,941.51Z" transform="translate(-245.5 -548.5)"/>
<div class="bell-icon__circle"></div>
</svg>
</div>
</div>
<!-- Social Connections -->
<div class="social-icons">
<a class="social-icon social-icon--codepen" href="https://codepen.io/braydoncoyer" target="_blank">
<i class="fa fa-codepen"></i>
<div class="tooltip">Codepen</div>
</a>
<a class="social-icon social-icon--twitter" href="https://twitter.com/BraydonCoyer" target="_blank">
<i class="fa fa-twitter"></i>
<div class="tooltip">Twitter</div>
</a>
</div>
</div>
html {
margin: 0;
padding: 0;
background: #F0F2F7;
}
.container {
width: 100%;
min-height:100vh;
display: flex;
justify-content: center;
align-items: center;
&__content {
}
}
.bell-icon {
width: 100px;
// cursor: pointer;
position: relative;
&__circle {
position: absolute;
left: 38%;
bottom: -5%;
height: 15px;
width: 30px;
background: #4C5158;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
}
.notification {
background: rgba(255, 82, 82, 1);
position: absolute;
right: 5px;
top: 6px;
z-index: 2;
border-radius: 50%;
height: 30px;
width: 30px;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% {
transform: scale(0.85);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 25px rgba(255, 82, 82, 0);
}
100% {
transform: scale(0.85);
box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
}
}
/* --------Social Icons-------- */
/* Color Variables */
$color-codepen: #000;
$color-twitter: #2b97f1;
/* Social Icon Mixin */
@mixin social-icon($color) {
background: $color;
color: #fff;
.tooltip {
background: $color;
color: currentColor;
&:after {
border-top-color: $color;
}
}
}
.social-icons {
display: flex;
position: absolute;
bottom: 25px;
right: 25px;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
margin: 0 0.7rem;
border-radius: 50%;
cursor: pointer;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 1.5rem;
text-decoration: none;
transition: all 0.15s ease;
&:hover {
color: #fff;
.tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, -150%);
}
}
&:active {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
}
&--twitter { @include social-icon($color-twitter); }
&--codepen { @include social-icon($color-codepen); }
i {
position: relative;
top: 1px;
}
}
/* Tooltips */
.tooltip {
display: block;
position: absolute;
top: 0;
left: 50%;
padding: 0.4rem 0.6rem;
border-radius: 40px;
font-size: 0.4rem;
font-weight: bold;
opacity: 0;
pointer-events: none;
text-transform: uppercase;
transform: translate(-50%, -100%);
transition: all 0.3s ease;
z-index: 1;
&:after {
display: block;
position: absolute;
bottom: 1px;
left: 50%;
width: 0;
height: 0;
content: "";
border: solid;
border-width: 10px 10px 0 10px;
border-color: transparent;
transform: translate(-50%, 100%);
}
}
View Compiled
CustomWiggle.create("wiggle", {wiggles:4, type:"easeOut"})
CustomWiggle.create("bell-circle", {wiggles:6, type:"easeOut"});
TweenLite.set(".bell", {transformOrigin:"center top"});
TweenMax.to(".bell", 3, {rotation:-20, ease:"wiggle"})
TweenMax.to(".bell-icon__circle", 4.5, {x: -20, ease: "bell-circle"})
View Compiled
This Pen doesn't use any external CSS resources.