Creé tres formas (círculos) en mi página web que se colocan en el fondo de otros elementos en la página usando el índice z en CSS y la posición es absoluta.
Estoy tratando de moverlos alrededor de mi página tan pronto como se carga.
El siguiente es el código que escribí tratando de hacer lo anterior. No estoy seguro de lo que estoy haciendo mal. La ayuda será muy apreciada.
$(function() { $("shape-1").animate({ "margin-top": "+= 200px" }, 2000); $("shape-2").animate({ "margin-right": "+= 200px" }, 2000); $("shape-3").animate({ "margin-bottom": "+= 200px" }, 2000); }); .shape-1, .shape-2, .shape-3 { position: absolute; border-radius: 50%; background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37)); z-index: 1; } .shape-1 { top: 1%; left: 13%; height: 3rem; width: 3rem; } .shape-2 { top: 21%; right: 17%; height: 6rem; width: 6rem; } .shape-3 { width: 10rem; height: 10rem; bottom: 25%; left: 40%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="shape-1"></div> <div class="shape-2"></div> <div class="shape-3"></div>$("shape-1") no selecciona nada. $(".shape-1") lo hace.margin-bottom no hará nada por ti. Los elementos están anclados en su lugar por top , bottom , left y right . Necesitas animarlos.+= 50% . Puede animar un elemento desde su posición absoluta original (p. ej., 1% ) a una nueva posición absoluta (p. ej., 50% ). $(function() { $(".shape-1").animate({top: "50%", left: "50%"}, 2000); $(".shape-2").animate({right: "50%"}, 2000); $(".shape-3").animate({bottom: "10%"}, 2000); }); .shape-1, .shape-2, .shape-3 { position: absolute; border-radius: 50%; background: linear-gradient(to right bottom, rgba(197, 96, 223, 0.904), rgba(255, 255, 255, 0.37)); z-index: 1; } .shape-1 { top: 1%; left: 13%; height: 3rem; width: 3rem; } .shape-2 { top: 21%; right: 17%; height: 6rem; width: 6rem; } .shape-3 { width: 10rem; height: 10rem; bottom: 25%; left: 40%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="shape-1"></div> <div class="shape-2"></div> <div class="shape-3"></div>