index.css 649 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. .point {
  2. width: var(--point-width);
  3. height: var(--point-height);
  4. background: var(--point-background);
  5. position: relative;
  6. border-radius: var(--point-border-radius);
  7. }
  8. .point-flicker:after {
  9. background: var(--point-background);
  10. }
  11. .point-flicker:before,
  12. .point-flicker:after {
  13. content: "";
  14. width: 100%;
  15. height: 100%;
  16. top: 0;
  17. left: 0;
  18. position: absolute;
  19. border-radius: var(--point-border-radius);
  20. animation: flicker 1.2s ease-out infinite;
  21. }
  22. @keyframes flicker {
  23. 0% {
  24. transform: scale(0.5);
  25. opacity: 1;
  26. }
  27. 30% {
  28. opacity: 1;
  29. }
  30. 100% {
  31. transform: scale(var(--point-scale));
  32. opacity: 0;
  33. }
  34. }