Básicamente, tengo un botón en mi página y quiero un div con contenido (videos, texto, etc.) dentro. Mi objetivo es crear el div y cuando se hace clic en el botón, se ampliará desde el centro del botón y cubrirá el contenido actual en la pantalla. Puedo agregar fácilmente un css de radio de borde para que comience como un círculo pero luego se convierta en el rectángulo que envuelve la ventana.
Es una solicitud un poco complicada, lo sé, pero no puedo encontrar ningún tutorial en línea para algo ni remotamente similar a este concepto. Originalmente encontré esta idea en el siguiente sitio: http://christophe-kerebel.com/ si eso te ayuda a tener una idea de lo que estoy tratando de hacer.
¡Gracias por adelantado! (:
Para otros que pueden estar confundidos, cuando vaya al sitio, debe hacer clic en uno de los enlaces en la parte inferior para ver el círculo en expansión al que se refiere OP. No estoy seguro exactamente de lo que está pidiendo, pero creo que la clave de lo que está pidiendo son las transiciones CSS.
Establezca el tamaño del div y una propiedad de transición a través de css
#myDiv{ width: 10px; transition: width 5s ease; }Con la propiedad de transición establecida, una vez que cambie la propiedad de transición de 'ancho' especificada, pasará lentamente al nuevo tamaño utilizando el intervalo de tiempo especificado, en este ejemplo, 5 segundos. Puede alternar el ancho usando javascript, algo como document.getElementById("myDiv").style.width = "500px"; Lo más probable es que se desencadene al hacer clic en el botón.
<button onClick="document.getElementById('myDiv').style.width = '500px' ">Expand</button>También vale la pena señalar que puede agregar el efecto de transición a prácticamente cualquier estilo css, no solo ancho y alto, sino también color, posición, etc.