长毛象猫耳补丁

为长毛象用户头像添加猫耳效果

  1. /* ==UserStyle==
  2. @name 长毛象猫耳补丁
  3. @description 为长毛象用户头像添加猫耳效果
  4. @namespace https://blog.bgme.me
  5. @version 1.0.0
  6. ==/UserStyle== */
  7.  
  8. @-moz-document url-prefix("https://bgme.bid"), url-prefix("https://bgme.me"), url-prefix("https://c.bgme.bid") {
  9. .notification .status__avatar::before,
  10. .notification .status__avatar::after {
  11. display: none !important;
  12. }
  13.  
  14. .status__wrapper .status:first-child .status__avatar::before,
  15. .status__wrapper .status:first-child .status__avatar::after,
  16. .entry.h-entry .status__avatar div::before,
  17. .entry.h-entry .status__avatar div::after,
  18. .entry.entry-reblog .status__avatar div::before,
  19. .entry.entry-reblog .status__avatar div::after {
  20. content: "";
  21. display: inline-block;
  22. border: 2px solid;
  23. box-sizing: border-box;
  24. width: 50%;
  25. height: 50%;
  26. background-color: inherit;
  27. border-color: #F6948E;
  28. position: absolute;
  29. z-index: 0;
  30. }
  31.  
  32. .status__avatar::before,
  33. .entry.h-entry .status__avatar div::before,
  34. .entry.entry-reblog .status__avatar div::before {
  35. border-radius: 60% 40% 100% 100%;
  36. transform: rotate(-37.6deg) skew(-30deg);
  37. right: 0;
  38. }
  39.  
  40. .status__avatar::after,
  41. .entry.h-entry .status__avatar div::after,
  42. .entry.entry-reblog .status__avatar div::after {
  43. border-radius: 40% 60% 100% 100%;
  44. transform: rotate(37.6deg) skew(30deg);
  45. top: 0;
  46. left: 0;
  47. }
  48.  
  49. .detailed-status__display-name {
  50. overflow: visible !important;
  51. }
  52.  
  53. .status__avatar .account__avatar {
  54. background-color: #d9e1e8;
  55. border-radius: 100%;
  56. z-index: 1;
  57. }
  58.  
  59. .status__avatar:hover::before,
  60. .entry.h-entry .status__avatar div:hover::before,
  61. .entry.entry-reblog .status__avatar div:hover::before {
  62. animation: earwiggleright 1s infinite;
  63. }
  64.  
  65. .status__avatar:hover::after,
  66. .entry.h-entry .status__avatar div:hover::after,
  67. .entry.entry-reblog .status__avatar div:hover::after {
  68. animation: earwiggleleft 1s infinite;
  69. }
  70.  
  71. @keyframes earwiggleleft {
  72. from {
  73. transform: rotate(50deg) skew(30deg);
  74. }
  75. 25% {
  76. transform: rotate(20deg) skew(30deg);
  77. }
  78. 50% {
  79. transform: rotate(30deg) skew(30deg);
  80. }
  81. 75% {
  82. transform: rotate(15deg) skew(30deg);
  83. }
  84. to {
  85. transform: rotate(50deg) skew(30deg);
  86. }
  87. }
  88.  
  89. @keyframes earwiggleright {
  90. from {
  91. transform: rotate(-50deg) skew(-30deg);
  92. }
  93. 30% {
  94. transform: rotate(-20deg) skew(-30deg);
  95. }
  96. 55% {
  97. transform: rotate(-30deg) skew(-30deg);
  98. }
  99. 75% {
  100. transform: rotate(-15deg) skew(-30deg);
  101. }
  102. to {
  103. transform: rotate(-50deg) skew(-30deg);
  104. }
  105. }
  106. }