【Misskey】アイコンの周りに★を飛ばすカスタムCSS 

  1. /* アイコンの周りに★を飛ばす */
  2. .x5yeR {
  3.     ._noSelect {
  4.         position: relative;
  5.     }
  6.     ._noSelect::before,
  7.     ._noSelect::after {
  8.         content: "★";
  9.         line-height: 1;
  10.         color: transparent;
  11.         z-index: 10;
  12.         display: block;
  13.         position: absolute;
  14.         background-image: linear-gradient(135deg, #fc00ff, #00dbde);
  15.         -webkit-background-clip: text;
  16.     }
  17.     ._noSelect::before {
  18.         top: 5px;
  19.         left: -5px;
  20.         font-size: 1.5em;
  21.         animation: twinkle 1.8s infinite;
  22.     }
  23.     ._noSelect::after {
  24.         bottom: 0px;
  25.         right: 0px;
  26.         font-size: 1em;
  27.         animation: twinkle 2.0s infinite;
  28.     }
  29. }
  30. @keyframes twinkle {
  31. 0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  32. 85% { opacity: 0.9; transform: scale(1) rotate(360deg); }
  33. 100% { opacity: 0.5; transform: scale(0.7) rotate(361deg); }
  34. }