简介

增加CSS片段，将RemNote右下角的问号改成可爱的看板娘！🥰

效果

20220129181451.png

使用方法

将CSS片段中的url地址换成喜爱的图片地址即可，推荐使用png透明底图片

  1. #help-button{
  2.     background: url(换成图片的地址即可) no-repeat;/*图片地址*/
  3.     background-size: 80px; /*图片大小*/
  4.     width: 120px;/*宽度*/
  5.     height: 110px;/*高度*/
  6.     bottom: -20px;/*距离底部*/
  7.     right: -25px;/*距离右边*/ 
  8.     font-size:0;
  9.     border:1px slolid rgba(0,0,0,0);
  10.     border-color:rgba(0,0,0,0);
  11.     box-shadow:none;
  12.     border-radius:0;
  14. }
  15. #help-button:hover, #help-button:focus, #help-button:active {
  16.   -webkit-animation-name: hvr-wobble-bottom;
  17.   animation-name: hvr-wobble-bottom;
  18.   -webkit-animation-duration: 1s;
  19.   animation-duration: 1s;
  20.   -webkit-animation-timing-function: ease-in-out;
  21.   animation-timing-function: ease-in-out;
  22.   -webkit-animation-iteration-count: 1;
  23.   animation-iteration-count: 1;
  24.   background-color:rgba(255,255,255,0)
  26. }
  27. @-webkit-keyframes hvr-wobble-bottom {
  28.   16.65% {
  29.     -webkit-transform: skew(-12deg);
  30.     transform: skew(-12deg);
  31.   }
  32.   33.3% {
  33.     -webkit-transform: skew(10deg);
  34.     transform: skew(10deg);
  35.   }
  36.   49.95% {
  37.     -webkit-transform: skew(-6deg);
  38.     transform: skew(-6deg);
  39.   }
  40.   66.6% {
  41.     -webkit-transform: skew(4deg);
  42.     transform: skew(4deg);
  43.   }
  44.   83.25% {
  45.     -webkit-transform: skew(-2deg);
  46.     transform: skew(-2deg);
  47.   }
  48.   100% {
  49.     -webkit-transform: skew(0);
  50.     transform: skew(0);
  51.   }
  52. }
  53. @keyframes hvr-wobble-bottom {
  54.   16.65% {
  55.     -webkit-transform: skew(-12deg);
  56.     transform: skew(-12deg);
  57.   }
  58.   33.3% {
  59.     -webkit-transform: skew(10deg);
  60.     transform: skew(10deg);
  61.   }
  62.   49.95% {
  63.     -webkit-transform: skew(-6deg);
  64.     transform: skew(-6deg);
  65.   }
  66.   66.6% {
  67.     -webkit-transform: skew(4deg);
  68.     transform: skew(4deg);
  69.   }
  70.   83.25% {
  71.     -webkit-transform: skew(-2deg);
  72.     transform: skew(-2deg);
  73.   }
  74.   100% {
  75.     -webkit-transform: skew(0);
  76.     transform: skew(0);
  77.   }
  78. }