我需要帮助创建一个DIV，该DIV单击按钮后，将其扩展到页面的大小

Question

从本质上讲，我的页面上有一个按钮，我想要一个带有内容(视频，文本等(的div。我的目标是创建DIV，当单击按钮时，它将从按钮的中心扩展并覆盖屏幕上的当前内容。我可以轻松地添加一个边界-Dradius CSS以使其从圆圈开始，然后将其变成吞噬窗户的矩形。

这是我知道的一个复杂的请求，但是我在网上找不到任何与此概念相似的东西。我最初在以下网站上找到了这个想法：http：//christophe-kerebel.com/如果这可以帮助您了解我要制作的东西。

预先感谢！(：

Answer 1

对于其他可能会感到困惑的人，当您访问网站时，您需要单击底部的链接之一，以查看扩展的圆圈OP是指的。不确定您的要求，但我认为您要问的是CSS过渡的关键。

通过CSS

设置DIV的大小和过渡属性

#myDiv{
        width: 10px;
        transition: width 5s ease;
      }

在过渡属性集中，一旦指定的"宽度"过渡属性更改，它将在此示例5秒钟内使用指定的时间间隔慢慢过渡到新大小。您可以使用JavaScript切换宽度，例如document.getElementById(" mydiv"(。style.width =" 500px";那很可能是由按钮点击触发的。

 <button onClick="document.getElementById('myDiv').style.width = '500px' ">Expand</button>

也值得注意的是，您可以将过渡效果添加到几乎任何CSS样式中，而不仅仅是宽度和高度，而是颜色，位置等