This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Get some random advice, every time they click the dice button.
- Semantic HTML5 markup
- CSS custom properties
- Mobile-first workflow
- SASS
I learned to make animation.
.dot-flashing {
display: none;
position: relative;
width: 8px;
height: 8px;
margin: 10px auto;
border-radius: 50%;
background-color: lighten($color-green-200, 20);
// animation: dotFlashing 1s infinite alternate;
animation: dot-flashing 0.5s alternate 0.25s infinite;
&::before,
&::after {
content: "";
position: absolute;
display: block;
width: 8px;
height: 8px;
margin: 0 auto;
border-radius: 50%;
background-color: lighten($color-green-200, 20);
// animation: 5s linear infinite reverse both dot-flasing;
}
&::before {
left: -16px;
animation: dot-flashing 0.5s alternate infinite;
}
&::after {
right: -16px;
animation: dot-flashing 0.5s alternate 0.5s infinite;
}
}
@keyframes dot-flashing {
to {
background-color: darken($color-green-200, 10);
// background-color: red;
}
}
- Use typescript
- CSS Loaders Animation - This is an article full of animation examples.
- Frontend Mentor - @zqwirp