0
163
ViewsCómo hacer que un fondo suave se llene de izquierda a derecha junto con la entrada y el envío al pasar el mouse por encima
Disculpa mi pobre ingles. ¿Cómo implementar esto? Es necesario aparecer y desaparecer suavemente al señalar. Lo intenté, pero resulta bastante diferente. es necesario que no solo se rellene con un rectángulo, sino que se redondee. también, para que al pasar "input" y "submit", también los pinte encima. todo es como en la foto ( 
.feedback { display:flex; padding: 40px; background: linear-gradient(to right, #000 50%, #FA5C45 50%); background-size: 200% 100%; background-position: 100%; transition:all 2s ease; } .title__block { width: 50%; } form { display: flex; flex-direction: column; } .input { margin-bottom: 20px; } .feedback:hover { background-position: 0 100%; } h3 { color: #fff; } <div class="feedback"> <div class="title__block"> <h3> Оставьте заявку</h3> </div> <div class="form__block"> <form> <input type="name" class="input"> <input type="phone" class="input"> <input type="submit" class="submit"> </form> </div> </div>2 answers
Answer question0
me tomó un tiempo, pero espero que funcione para usted :)
Lo cambié de linear-gradient radial-gradient , la razón es porque no puedes obtener una forma redondeada con un linear-gradient .
Luego cambié el tamaño un poco para que se vea casi igual a como nos mostró las capturas de pantalla, cambié el tamaño del fondo para que saliera de la pantalla, traté de usar % pero no funcionó, así que en lugar de eso usé viewport para ambos width y height . Después de eso, cambié la posición para que salga del rango de la viewport y en su :hover función de desplazamiento simplemente cambió la posición para que llene su div .
Si encuentra que la animación es demasiado lenta, es porque puse números demasiado grandes en los tamaños de la viewport gráfica, por lo tanto, si desea que sea más rápido, simplemente cambie el valor de transition en su div .feedback a un valor más pequeño.
https://codepen.io/qnecro/pen/PomdVLr
.feedback { display:flex; padding: 40px; background: radial-gradient(ellipse, #000 40%, #FA5C45 40%); background-size: 500vw 300vh; background-position: -392vw 50%; transition:all 2s ease; } .title__block { width: 50%; } form { display: flex; flex-direction: column; } .input { margin-bottom: 20px; } .feedback:hover { background-position: -288vw 50%; } h3 { color: #fff; }¡Pero sea CONSCIENTE!
Hice una Elipse, así que ahora se ve así cuando la miras desde lejos y no activas tu :hover función de desplazamiento: 
Entonces, cuando se :hover su función de desplazamiento, mueve la elipse negra hacia el lado derecho como lo muestra la flecha azul en su :hover de desplazamiento, termina con esto: 
Pero si cambia el valor de su viewport a demasiado grande, puede terminar luciendo así: 
Su div en el lado izquierdo ya no estará cubierto por la elipse negra.
0
Para que emita mejor, use pseudo-element como capa adicional. Y para las etiquetas de input para establecer el background: transparent .
.feedback { display: flex; padding: 40px; background-color: #fa5c45; position: relative; overflow: hidden; } .feedback::after { content: ''; position: absolute; height: 300px; width: calc(100% + 300px); top: 50%; bottom: 0; left: 0; right: 0; background-color: #000; border-radius: 0 300px 300px 0 / 0 250px 250px 0; transform: translate(-110%, -50%); transition: all 2s ease; z-index: 1; } .feedback:hover::after { transform: translate(0%, -50%); } .title__block { width: 50%; position: relative; z-index: 5; } form { display: flex; flex-direction: column; position: relative; z-index: 5; } .input { margin-bottom: 20px; background: transparent; border: none; } .input[type='name'], .input[type='phone'] { width: 100%; padding: 8px 0; color: white; border-bottom: 1px solid white; } ::placeholder { color: white; } .feedback:hover { background-position: 0 100%; } h3 { color: #fff; } <div class="feedback"> <div class="title__block"> <h3>Оставьте заявку</h3> </div> <div class="form__block"> <form> <input type="name" class="input" placeholder="Имя" /> <input type="phone" class="input" placeholder="Телефон" /> <input type="submit" class="submit" /> </form> </div> </div>