SaveText.Ru

SaveText.Ru

sakura petals
  1. /* Персонаж в углу */
  2. .mychar {
  3.     position: fixed;
  4.     z-index: 10;
  5.     pointer-events: none;
  6.     left: 0;
  7.     right: 29rem;
  8.     bottom: 21.7rem;
  9.     transform-origin: bottom right;
  10.     font-size: 1em;
  11. }
  12. .mychar::after {
  13.     content: '';
  14.     display: block;
  15.     pointer-events: auto;
  16.     float: right;
  17.     width: 900px;
  18.     height: 900px;
  19.     background-repeat: no-repeat;
  20.     background-position: right bottom;
  21.     background-size: contain;
  22.     background-image: url(https://i.gifer.com/Z6W8.gif);
  23.     filter: grayscale(57%) sepia(60%);
  24. }
  25. @media screen and (max-width: 599px) {
  26.     .mychar {
  27.         left: -53.8462%;
  28.         transform: scale(0.65);
  29.     }
  30.     .mychar .speech {
  31.         transform: scale(1.5385);
  32.         font-size: 0.85em;
  33.     }
  34. }
  35. @media screen and (min-width: 600px) and (max-width: 1024px),
  36. screen and (max-width: 599px) and (min-height: 720px)
  37. {
  38.     .mychar {
  39.         left: -33.3333%;
  40.         transform: scale(0.75);
  41.     }
  42.     .mychar .speech {
  43.         transform: scale(1.3333);
  44.         font-size: 0.85em;
  45.     }
  46. }

Share with your friends:

Print