OlineExperience [Coding Problem]

<FIRST PROBLEM>


When I do the third page, I wanted to make that Pacman(user) leave marks(data) and ghost(s) is eating/following/tracing Pacman. In order to look like leaving marks, I tried a lot of ways to express.

1. Using JavaScript with Span tag

Output

Problem
- I wanted to give animation effect moving right to left with Pacman, Dots and Ghost(s). But when it does not work well. It worked only once when I recover the website but after it did not work. I was not able to see 11 dots.


2. Using two animation

Output
( It is deleted I do not know why)

Problem

I tried to use two animations but it does not work since I put 'transform' animation after 'content' in 0% and 100% like above. Another problem was I cannot change the size of ghosts.gif. when I use this animation. The problem is that it did not look like Pacman is leaving traces.



----------> Have I fixed it? No
I searched loop javascript but it did not work well
So I just put with the first option(Javascript)

<SECOND PROBLEM>

I wanted to put a tag inside of div tag to change the colour of font and give hover effect, but it did not work.

(Experiment1)

->

(Experiment2)

->

Solution: Use a span tag with a tag and give hove effect on a tag.