me preguntaba cómo hacer un círculo que se transforme en un cuadro más ancho en html/css. He intentado esto pero no se transforma correctamente.
Si ustedes tienen alguna idea sobre cómo hacer esto, realmente lo agradecería mucho, ¡gracias!
.circle{ width: 700px; height:700px; margin:0 auto; background-color: #14b1e7; animation-name: stretch; animation-duration:6s; animation-timing-function:ease-out; animation-delay:0s; animation-duration:alternate; animation-iteration-count: 1; animation-fill-mode:forwards; animation-play-state: running; opacity: 100%; text-align: center; text-shadow: 5px; font-size: 60px; font-weight: bold; border-radius: 30px; } @keyframes stretch { 0%{ transform: scale(.1); background-color:#14b1e7; border-radius: 100%; } 50%{ background-color: #14b1e7; } 100%{ transform:scale(.7); background-color: #14b1e7; } }Simplemente puede cambiar border-radius acuerdo con los fotogramas clave.
.animation { margin: 0 auto; margin-top: 20px; width: 100px; height: 100px; background-color: black; border: 1px solid #337ab7; border-radius: 100% 100% 100% 100%; animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate; } @keyframes circle-to-square { 0% { border-radius:100% 100% 100% 100%; background:black; } 25% { border-radius:75% 75% 75% 75%; background:black; } 50% { border-radius:50% 50% 50% 50%; background:black; } 75% { border-radius:25% 25% 25% 25%; background:black; } 100% { border-radius:0 0 0 0; background:black; } <div class="container animated zoomIn"> <div class="row"> <div class="animation"></div> </div> </div>Aquí hay un ejemplo en vivo: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle { width: 100px; border-radius: 50%; transition: all 1s; } .circle:hover { border-radius: 0; width: 200px; } En el ejemplo, el círculo inicialmente tiene un radio de borde del 50 % y un ancho de 100 px. Al pasar el mouse, el radio del borde se establece en 0 y el ancho en 200 px. Debido a la propiedad de transition , el cambio está animado.
La transition: all 1s hacen que cada propiedad cambie gradualmente y dure 1 segundo. Consulte los documentos para obtener más información: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions