search

PButcher / flipdown

⏰ A lightweight and performant flip styled countdown clock
https://pbutcher.uk/flipdown/
MIT License
384 stars 123 forks source link

How do I need to set up the animation if the numbers are transparent in my code? #38

Open Algorush opened 3 years ago

Algorush commented 3 years ago

Hello! Thank you for a great project! I want to change it a little, make the numbers transparent so that the background can be seen through them. I did it, but now the animation is not working correctly. Could you help me with this? How do I make everything look beautiful and make the animation work correctly? Thanks https://codepen.io/algorush/pen/LYyqOQz

By the way, I made the numbers transparent by adding this line for the classes:

/* Rotor tops */
.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-top,
.flipdown.flipdown__theme-dark .rotor-leaf-front {
  color: #FFFFFF;
  background-color: #151515;
  mix-blend-mode: multiply; /* -------------added this for transparent numbers-------------*/