Wie kann ich ein div beim Klick vom Bildschirm entfernen?

Question

Okay, ich habe diese Runde div.

Mit diesem Styling fliegt es vom Bildschirm, wenn Sie darüber schweben.

#dot { 
    height: 75px; 
    width: 75px; 
    background-color: red; 
    border-radius: 50%; 
    margin: 0 auto; 
    position: relative; 
    top: 30vh; 
    transition: all 2s; 
} 

#dot:hover { 
    top: -1000vh; 
} 

#dot { 
    -webkit-transition-timing-function: ease-in-out; 
    transition-timing-function: ease-in-out; 
} 

Ich mag der Fly-off-the-Bildschirm Übergang auftreten, wenn der Punkt geklickt wird, und ich bin auf der Suche nach einer Lösung, die reinen CSS oder Javascript Vanille ist. Wenn es von Bedeutung ist, wird der Punkt schließlich in ein Link-Element eingepackt, und sein dramatischer Ausgang wird die Last einer neuen Seite verkünden.

Bonus Frage: Wenn diese Runde div schließlich ein SVG hat, wird das negativ auf seine Leistung/Aussehen?

Answer 1

Sie können dies erreichen, indem Sie eine tabindex zu Ihrem div hinzufügen und Ihr CSS von :hover zu :focus ändern.

(Vergessen Sie nicht, den Umriss zu entfernen).

#dot { 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: 30vh; 
 
    transition: all 2s; 
 
} 
 

 
#dot:focus { 
 
    top: -1000vh; 
 
    outline: none; 
 
} 
 

 
#dot { 
 
    -webkit-transition-timing-function: ease-in-out; 
 
    transition-timing-function: ease-in-out; 
 
}

<div tabindex='1' id = "dot"></div>