---
title: Little Circle Custom Style
tags: Styles
---
{%hackmd BJrTq20hE %}

<style>
h1:hover{
animation: rainbow 2.5s linear;
animation-iteration-count: infinite;

}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
img.ui-avatar{
animation: spin 1s linear;
animation-iteration-count: infinite;
}

@keyframes rainbow{
100%,0%{
color: rgb(255,0,0);
}
8%{
color: rgb(255,127,0);
}
16%{
color: rgb(255,255,0);
}
25%{
color: rgb(127,255,0);
}
33%{
color: rgb(0,255,0);
}
41%{
color: rgb(0,255,127);
}
50%{
color: rgb(0,255,255);
}
58%{
color: rgb(0,127,255);
}
66%{
color: rgb(0,0,255);
}
75%{
color: rgb(127,0,255);
}
83%{
color: rgb(255,0,255);
}
91%{
color: rgb(255,0,127);
}
}
@keyframes boing {
15%, 40%, 75%, 100% {
transform-origin: center center;
}
15% {
transform: scale(1.2, 1.1);
}
40% {
transform: scale(0.95, 0.95);
}
75% {
transform: scale(1.05, 1);
}
100% {
transform: scale(1, 1);
}
}

@keyframes zoom {

100% {
transform: scale(2,2)
}
}
</style>