Want a bubble profile picture like what I have?

A few weeks ago, I made a bubble profile picture after learning the < style > tag, so I decided to show you how to add it to your profile?

It's pretty simple! All you need to do is copy my code below!

.general-about .profile-pic img {
border-radius: 50%;


animation: yay 0.6s infinite, starthing 0.5s}


.general-about .profile-pic img:hover {
animation: endthing 0.3s;
opacity: 0
}


@keyframes yay{
from {transform: scale(1); border: 3px solid blue; opacity: 0.8}
50% {transform: scale(1.08); border: 1.3px solid blue; opacity: 0.75}
70% {transform: scale(1.08); border: 2px dotted blue; opacity: 0.75}
50% {transform: scale(1.07); border: 2.3px dotted blue; opacity: 0.78}
80% {transform: scale(1.05);border: 2.8px solid blue; opacity: 0.79}
to {transform: scale(1); border: 3px solid blue; opacity: 0.8}
}


@keyframes starthing{
from {transform: scale(0.6);border: 1px solid blue; opacity: 0}
10% {transform: scale(0.7);border: 1.5px solid blue; opacity: 0.6}
40% {transform: scale(1.05);border: 2px dotted blue; opacity: 0.7}
60% {transform: scale(1);border: 3px solid blue; opacity: 0.8}
}


@keyframes endthing{
from {transform: scale(1);border: 1px solid blue; opacity: 0.7}
10% {transform: scale(1);border: 1px solid blue; opacity: 0.7}
90% {transform: scale(0.9);border: 1px solid blue; opacity: 0.1}
}




Have fun with your bubble pfp!