movimientos en emojis

[Dec0rArte]

hola! es posible hacer ''rebotar'' el emoji de diamante ?

web: https://decorartestore.com/

[theycallmemakka]

Hola @Dec0rArte ,

Por favor, elimina el emoji de diamante del título y agrega el siguiente código. He añadido un diamante que rebota mediante CSS. Sigue estos pasos:

1) Ve a la Tienda en Línea
2) Edita el Código
3) Encuentra el archivo theme.liquid
4) Agrega el siguiente código justo arriba de la etiqueta </body>

<style>
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.collection.section-template--22439561101625__featured_collection_qNcKK6-padding h2.title.inline-richtext.h1.scroll-trigger.animate--slide-in:after {
    content: "💎";
    display: inline-block;
    animation: bounce 1s infinite;
}

</style>

Si necesitas más ayuda para optimizar tu tienda, no dudes en comunicarte. Si encuentras útil esta información, un "Me gusta" sería muy apreciado. Y si esto resuelve el problema, ¡por favor, márquelo como solución!

Saludos cordiales,
Makka

[Dec0rArte]

hola makka muchas gracias por tu ayuda

tengo un problema, al agregar el código arriba de </body> no se realiza el cambio, me puedes ayudar?,  creo que estoy realizando mal un paso 

 

[theycallmemakka · Accepted solution]

¡Hola! Claro, estaré encantado de ayudarte. Por favor, proporciona el código actualizado que deseas que revise y traduzca al español.

<style>
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.collection.section-template--22439561101625__featured_collection_qNcKK6-padding h2.title.inline-richtext.h1.scroll-trigger.animate--slide-in:after {
    content: url(https://cdn.shopify.com/s/files/1/0419/8504/8729/files/diamond.svg?v=1714144694);
    display: inline-block;
    animation: bounce 1s infinite;
}
</style>

[Dec0rArte]

muchas gracias makka , ha funcionado!!