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:
Código CSS:
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


0