Javascript 如何使div在单击时从屏幕上飞出？

好的，我有一个圆形的div

<div id = "dot"></div>

我希望点击点时会出现屏幕上的过渡，我正在寻找一个纯CSS或香草javascript的解决方案。如果有任何意义的话，这个点最终将被包装在一个链接元素中，它戏剧性的退出将预示着一个新页面的加载

---

附加问题：如果这一轮div最终有了SVG，这会对其性能/外观产生负面影响吗

您可以通过在

div

中添加

tabindex

并将CSS从

：hover

更改为

：focus

来实现这一点

（别忘了删除轮廓）

#点{
高度：75px；
宽度：75px；
背景色：红色；
边界半径：50%；
保证金：0自动；
位置：相对位置；
顶部：30vh；
过渡：所有2；
}
#点：焦点{
顶部：-1000vh；
大纲：无；
}
#圆点{
-webkit转换计时功能：轻松输入输出；
过渡定时功能：易进易出；
}

---

您可以通过在

div

中添加一个

选项卡index

并将CSS从

：hover

更改为

：focus

来实现这一点

（别忘了删除轮廓）

#点{
高度：75px；
宽度：75px；
背景色：红色；
边界半径：50%；
保证金：0自动；
位置：相对位置；
顶部：30vh；
过渡：所有2；
}
#点：焦点{
顶部：-1000vh；
大纲：无；
}
#圆点{
-webkit转换计时功能：轻松输入输出；
过渡定时功能：易进易出；
}

---

为什么它需要一个

tabindex

？默认情况下，Div、span、table等不可聚焦，但如果应用了tabindex，则可以接收聚焦。在纯CSS中可能还有其他方法可以做到这一点。但我只有这些；）

我有一个目的，让我们向屏幕阅读器解释一下，用户不需要tabindex就可以获得焦点，并且会像键盘用户预期的那样表现你是对的。我使用的是OP的原始HTML，并进行了相应的修改，假设这是他想要的！这非常有效，但您知道是什么参数导致点最终返回？为什么它需要一个
tabindex
？默认情况下，Div、span、table等不可聚焦，但如果应用了tabindex，则可以接收聚焦。在纯CSS中可能还有其他方法可以做到这一点。但我只有这些；）
我有一个目的，让我们向屏幕阅读器解释一下，用户不需要tabindex就可以获得焦点，并且会像键盘用户预期的那样表现你是对的。我使用的是OP的原始HTML，并进行了相应的修改，假设这是他想要的！这是完美的，但是你知道是什么参数导致圆点最终回来了吗？
#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;
}