SCSS
$w: #fdfdfd;
$p: #ff5d50;
$pu: #8856ff;
$b: #2ec8f7;
body{
display:flex;
width:100vw;
height:100vh;
background:#333;
align-items:center;
justify-content:center;
.icon{
width:37vmin;
height:37vmin;
border-radius:500%;
background:linear-gradient(to bottom, $w, darken($w, 15%));
position:relative;
box-shadow:0 15vmin 10vmin -5vmin rgba(0,0,0,0.15);
&:after{
content:'';
position:absolute;
width:110%;
height:110%;
background:radial-gradient(circle at center, $p, transparent 50%), linear-gradient(155deg, $pu, $b 80%);
background-position:-27vmin -40vmin, center;
background-size:200% 200%, 100%;
border-radius:100%;
left:-5%;
top:-5%;
z-index:-1;
animation:pulsing 1s linear infinite;
@keyframes pulsing{
0%{
transform:scale(1);
}
5%{
transform:scale(1.025);
}
10%{
transform:scale(1);
}
60%{
transform:scale(1);
}
64%{
transform:scale(1.05);
}
68%{
transform:scale(1);
}
}
}
.note{
position:absolute;
left:50%;
top:50%;
transform:translateX(-50%) translateY(-50%) skewY(-7.5deg) skewX(-5deg) scale(0.9) scaleX(0.9) rotate(-5deg);
margin-left:1.5vmin;
width:17.5vmin;
height:18vmin;
background:radial-gradient(circle at center, $p, transparent 50%), linear-gradient(to right, $pu, $b 80%);
background-position:-41vmin -19.5vmin, center;
border-radius:1vmin 1vmin 0 0;
background-size:500% 200%, 100%;
margin-top:-3.5vmin;
&:after{
content:'';
position:absolute;
width:8.5vmin;
height:7vmin;
background:linear-gradient(to bottom, $p -220%, $pu);
border-radius:4vmin 0vmin 4vmin 4vmin;
bottom:-6.95vmin;
left:-6.25vmin;
box-shadow:15.25vmin 0 0 $b;
}
&:before{
content:'';
position:absolute;
width:13vmin;
height:12vmin;
left:50%;
transform:translateX(-50%);
bottom:0;
background:linear-gradient(to bottom, darken($w, 5%), darken($w, 10%));
border-radius:1vmin 1vmin 1vmin 0;
}
}
}
}
