CSS - Ampliar y desplazar círculo

 
Vista:
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por Marta (32 intervenciones) el 05/03/2021 11:15:37
Buenas, tengo un círculo que me gustaría que al inicio de visualizar en su 30% del tamaño hasta llegar al tamaño original, desplazándose desde un punto, para abajo.
El crecimiento se produce, se desplaza bien para abajo, pero no recto, sino hacia la derecha. Supongo que el desplazamiento tendría que indicarse desde el centro, pero voy perdida,
Alguien me puede ayudar? Gracias

Código HTML:
1
2
3
4
5
<div id="capitulo1">
    <div class="pos1 motor"></div>
    <div class="pos2 circulo"></div>
    <div class="marco"></div>
</div>

Código CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.circulo{
    background: url(../img/circulo.png) no-repeat right;
    background-size: 10vw;
    opacity: 1;
    animation: avall 5s;
    animation-fill-mode: forwards;
}
 
.pos2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 30vw;
    height: 45vh;
 
@keyframes avall {
    0%   {top: 0px; transform:scale(0.3);}
    100% {top: 30%; transform:scale(1);}
}
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por joel (252 intervenciones) el 05/03/2021 13:49:03
Hola Marta, eso te pasa porque estas transformando su tamaño con el scale()... si lo quitas, simplemente te bajara.

ten cuidado, que en el código que has pegado el @keyframes esta dentro del .pos2 {}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por Marta (32 intervenciones) el 05/03/2021 14:34:42
Hola Joel, pero yo quiero que además de bajar, se vaya ampliando, es decir, empieze con el 30€ de su tamaño hasta completarse.

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por joel (252 intervenciones) el 05/03/2021 16:08:05
entonces tiene que crecer, no?
si en vez de que crezca solo hacia la derecha quieres que crezca tambien hacia la izquierda y derecha, tienes que utilizar el left en su proporcion para que a medida que crezca se vaya posicionando hacia la iquierda un poco para compensar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por Marta (32 intervenciones) el 06/03/2021 13:19:59
Conseguido. Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por joel (252 intervenciones) el 06/03/2021 20:23:15
Hola Marta, puedes compartir el código?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 82
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por Marta (32 intervenciones) el 07/03/2021 12:27:33
Hola Joel, sí, claro que lo puedo compartir. Lo he cambiado un poco, en lugar de imagen, dibujo directamente el círculo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.circulo {
    position: absolute;
    top: -600px;
    right: 10%;
    width: 10vw;
    height: 20vh;
    opacity: 0.5;
    border-radius: 50%;
    background: #d01318;
    animation-name: avall;
    animation-duration: 5s;
    animation-delay: 5s;
    animation-fill-mode: forwards;
    z-index: 1;
}
 
@keyframes avall {
    0%   {top: 18vh; transform:scale(0.3, 0.3);}
    100% {top: 50%; transform:scale(1, 1);}
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ampliar y desplazar círculo

Publicado por joel (252 intervenciones) el 07/03/2021 14:24:39
Gracias Marta muy bien conseguido!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar