Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React, Framer-motion

@mbeka02

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do I make multiple ripple effects appear at the same time instead of just one.

Community feedback

@BrunoGafanhoto

Posted

Hello @mbeka02, for this purpose I used 3 divs inside the circle, and created a @keyframe pulse where the animation started with opacity 0.2 and scale 1 and goes to opacity 0 and scale 2.5.

For the second and third div I applied a delay on the animation.

Take a look at the result: https://rocker-paper-scissors.vercel.app/

I'm Brazilian, ignore the confusing language. Hugs!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord