├── Plugin.php ├── README.md ├── css └── main.css ├── images └── scroll.png └── js └── main.js /Plugin.php: -------------------------------------------------------------------------------- 1 | header = array('GoTop_Plugin', 'header'); 25 | Typecho_Plugin::factory('Widget_Archive')->footer = array('GoTop_Plugin', 'footer'); 26 | } 27 | 28 | /** 29 | * 禁用插件方法,如果禁用失败,直接抛出异常 30 | * 31 | * @static 32 | * @access public 33 | * @return void 34 | * @throws Typecho_Plugin_Exception 35 | */ 36 | public static function deactivate() 37 | { 38 | } 39 | 40 | /** 41 | * 获取插件配置面板 42 | * 43 | * @access public 44 | * @param Typecho_Widget_Helper_Form $form 配置面板 45 | * @return void 46 | */ 47 | public static function config(Typecho_Widget_Helper_Form $form) 48 | { 49 | $rightWidth = new Typecho_Widget_Helper_Form_Element_Text('rightWidth', NULL, NULL, _t('右侧宽度（默认为100px）'), _t('图片距离网页右边宽度（单位px）')); 50 | $form->addInput($rightWidth->addRule('required', _t('值不能为空'))); 51 | } 52 | 53 | /** 54 | * 个人用户的配置面板 55 | * 56 | * @access public 57 | * @param Typecho_Widget_Helper_Form $form 58 | * @return void 59 | */ 60 | public static function personalConfig(Typecho_Widget_Helper_Form $form) 61 | { 62 | } 63 | 64 | /** 65 | * 页头输出相关代码 66 | * 67 | * @access public 68 | * @param unknown header 69 | * @return unknown 70 | */ 71 | public static function header() 72 | { 73 | $path = Helper::options()->pluginUrl . '/GoTop/'; 74 | echo ''; 75 | } 76 | 77 | /** 78 | * 页脚输出相关代码 79 | * 80 | * @access public 81 | * @param unknown footer 82 | * @return unknown 83 | */ 84 | public static function footer() 85 | { 86 | $path = Helper::options()->pluginUrl . '/GoTop/'; 87 | $rightWidth = Typecho_Widget::widget('Widget_Options')->plugin('GoTop')->rightWidth; 88 | if ($rightWidth) { 89 | echo '
'; 90 | } else { 91 | echo '
'; 92 | } 93 | echo ''; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # GoTop 4 | 5 | _✨ 猫耳FM置顶插件 ✨_ 6 | 7 |
8 | 9 | # Quick Start 10 | ``` 11 | # 克隆代码到本地 12 | git clone https://github.com/MisakaTAT/GoTop.git 13 | # 重命名文件夹 14 | mv GoTop-master GoTop 15 | # 将文件夹复制到你的Typecho插件目录 16 | cp -R ./GoTop /webroot/usr/plugins/ 17 | ``` 18 | 19 | # Preiwer 20 | ![](https://mikuac.com/images/gotop-preview.png) 21 | 22 | # Stargazers over time 23 | [![Stargazers over time](https://starchart.cc/MisakaTAT/GoTop.svg)](https://starchart.cc/MisakaTAT/GoTop) -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Typecho猫耳FM置顶插件 3 | * 4 | * @author Zero 5 | * @link https://github.com/MisakaTAT/GoTop 6 | */ 7 | @media (max-width: 1000px) { 8 | .back-to-top { 9 | display: none !important; 10 | } 11 | } 12 | @-webkit-keyframes wrench { 13 | 0% { 14 | -webkit-transform: rotate(-12deg); 15 | transform: rotate(-12deg); 16 | } 17 | 8% { 18 | -webkit-transform: rotate(12deg); 19 | transform: rotate(12deg); 20 | } 21 | 10% { 22 | -webkit-transform: rotate(24deg); 23 | transform: rotate(24deg); 24 | } 25 | 18%, 26 | 20% { 27 | -webkit-transform: rotate(-24deg); 28 | transform: rotate(-24deg); 29 | } 30 | 28%, 31 | 30% { 32 | -webkit-transform: rotate(24deg); 33 | transform: rotate(24deg); 34 | } 35 | 38%, 36 | 40% { 37 | -webkit-transform: rotate(-24deg); 38 | transform: rotate(-24deg); 39 | } 40 | 48%, 41 | 50% { 42 | -webkit-transform: rotate(24deg); 43 | transform: rotate(24deg); 44 | } 45 | 58%, 46 | 60% { 47 | -webkit-transform: rotate(-24deg); 48 | transform: rotate(-24deg); 49 | } 50 | 68% { 51 | -webkit-transform: rotate(24deg); 52 | transform: rotate(24deg); 53 | } 54 | 100%, 55 | 75% { 56 | -webkit-transform: rotate(0deg); 57 | transform: rotate(0deg); 58 | } 59 | } 60 | @keyframes wrench { 61 | 0% { 62 | -webkit-transform: rotate(-12deg); 63 | -ms-transform: rotate(-12deg); 64 | transform: rotate(-12deg); 65 | } 66 | 8% { 67 | -webkit-transform: rotate(12deg); 68 | -ms-transform: rotate(12deg); 69 | transform: rotate(12deg); 70 | } 71 | 10% { 72 | -webkit-transform: rotate(24deg); 73 | -ms-transform: rotate(24deg); 74 | transform: rotate(24deg); 75 | } 76 | 18%, 77 | 20% { 78 | -webkit-transform: rotate(-24deg); 79 | -ms-transform: rotate(-24deg); 80 | transform: rotate(-24deg); 81 | } 82 | 28%, 83 | 30% { 84 | -webkit-transform: rotate(24deg); 85 | -ms-transform: rotate(24deg); 86 | transform: rotate(24deg); 87 | } 88 | 38%, 89 | 40% { 90 | -webkit-transform: rotate(-24deg); 91 | -ms-transform: rotate(-24deg); 92 | transform: rotate(-24deg); 93 | } 94 | 48%, 95 | 50% { 96 | -webkit-transform: rotate(24deg); 97 | -ms-transform: rotate(24deg); 98 | transform: rotate(24deg); 99 | } 100 | 58%, 101 | 60% { 102 | -webkit-transform: rotate(-24deg); 103 | -ms-transform: rotate(-24deg); 104 | transform: rotate(-24deg); 105 | } 106 | 68% { 107 | -webkit-transform: rotate(24deg); 108 | -ms-transform: rotate(24deg); 109 | transform: rotate(24deg); 110 | } 111 | 100%, 112 | 75% { 113 | -webkit-transform: rotate(0deg); 114 | -ms-transform: rotate(0deg); 115 | transform: rotate(0deg); 116 | } 117 | } 118 | .faa-parent.animated-hover:hover > .faa-wrench, 119 | .faa-wrench.animated, 120 | .faa-wrench.animated-hover:hover { 121 | -webkit-animation: wrench 2.5s ease infinite; 122 | animation: wrench 2.5s ease infinite; 123 | transform-origin-x: 90%; 124 | transform-origin-y: 35%; 125 | transform-origin-z: initial; 126 | } 127 | .faa-parent.animated-hover:hover > .faa-wrench.faa-fast, 128 | .faa-wrench.animated-hover.faa-fast:hover, 129 | .faa-wrench.animated.faa-fast { 130 | -webkit-animation: wrench 1.2s ease infinite; 131 | animation: wrench 1.2s ease infinite; 132 | } 133 | .faa-parent.animated-hover:hover > .faa-wrench.faa-slow, 134 | .faa-wrench.animated-hover.faa-slow:hover, 135 | .faa-wrench.animated.faa-slow { 136 | -webkit-animation: wrench 3.7s ease infinite; 137 | animation: wrench 3.7s ease infinite; 138 | } 139 | @-webkit-keyframes ring { 140 | 0% { 141 | -webkit-transform: rotate(-15deg); 142 | transform: rotate(-15deg); 143 | } 144 | 2% { 145 | -webkit-transform: rotate(15deg); 146 | transform: rotate(15deg); 147 | } 148 | 4% { 149 | -webkit-transform: rotate(-18deg); 150 | transform: rotate(-18deg); 151 | } 152 | 6% { 153 | -webkit-transform: rotate(18deg); 154 | transform: rotate(18deg); 155 | } 156 | 8% { 157 | -webkit-transform: rotate(-22deg); 158 | transform: rotate(-22deg); 159 | } 160 | 10% { 161 | -webkit-transform: rotate(22deg); 162 | transform: rotate(22deg); 163 | } 164 | 12% { 165 | -webkit-transform: rotate(-18deg); 166 | transform: rotate(-18deg); 167 | } 168 | 14% { 169 | -webkit-transform: rotate(18deg); 170 | transform: rotate(18deg); 171 | } 172 | 16% { 173 | -webkit-transform: rotate(-12deg); 174 | transform: rotate(-12deg); 175 | } 176 | 18% { 177 | -webkit-transform: rotate(12deg); 178 | transform: rotate(12deg); 179 | } 180 | 100%, 181 | 20% { 182 | -webkit-transform: rotate(0deg); 183 | transform: rotate(0deg); 184 | } 185 | } 186 | @keyframes ring { 187 | 0% { 188 | -webkit-transform: rotate(-15deg); 189 | -ms-transform: rotate(-15deg); 190 | transform: rotate(-15deg); 191 | } 192 | 2% { 193 | -webkit-transform: rotate(15deg); 194 | -ms-transform: rotate(15deg); 195 | transform: rotate(15deg); 196 | } 197 | 4% { 198 | -webkit-transform: rotate(-18deg); 199 | -ms-transform: rotate(-18deg); 200 | transform: rotate(-18deg); 201 | } 202 | 6% { 203 | -webkit-transform: rotate(18deg); 204 | -ms-transform: rotate(18deg); 205 | transform: rotate(18deg); 206 | } 207 | 8% { 208 | -webkit-transform: rotate(-22deg); 209 | -ms-transform: rotate(-22deg); 210 | transform: rotate(-22deg); 211 | } 212 | 10% { 213 | -webkit-transform: rotate(22deg); 214 | -ms-transform: rotate(22deg); 215 | transform: rotate(22deg); 216 | } 217 | 12% { 218 | -webkit-transform: rotate(-18deg); 219 | -ms-transform: rotate(-18deg); 220 | transform: rotate(-18deg); 221 | } 222 | 14% { 223 | -webkit-transform: rotate(18deg); 224 | -ms-transform: rotate(18deg); 225 | transform: rotate(18deg); 226 | } 227 | 16% { 228 | -webkit-transform: rotate(-12deg); 229 | -ms-transform: rotate(-12deg); 230 | transform: rotate(-12deg); 231 | } 232 | 18% { 233 | -webkit-transform: rotate(12deg); 234 | -ms-transform: rotate(12deg); 235 | transform: rotate(12deg); 236 | } 237 | 100%, 238 | 20% { 239 | -webkit-transform: rotate(0deg); 240 | -ms-transform: rotate(0deg); 241 | transform: rotate(0deg); 242 | } 243 | } 244 | .faa-parent.animated-hover:hover > .faa-ring, 245 | .faa-ring.animated, 246 | .faa-ring.animated-hover:hover { 247 | -webkit-animation: ring 2s ease infinite; 248 | animation: ring 2s ease infinite; 249 | transform-origin-x: 50%; 250 | transform-origin-y: 0; 251 | transform-origin-z: initial; 252 | } 253 | .faa-parent.animated-hover:hover > .faa-ring.faa-fast, 254 | .faa-ring.animated-hover.faa-fast:hover, 255 | .faa-ring.animated.faa-fast { 256 | -webkit-animation: ring 1s ease infinite; 257 | animation: ring 1s ease infinite; 258 | } 259 | .faa-parent.animated-hover:hover > .faa-ring.faa-slow, 260 | .faa-ring.animated-hover.faa-slow:hover, 261 | .faa-ring.animated.faa-slow { 262 | -webkit-animation: ring 3s ease infinite; 263 | animation: ring 3s ease infinite; 264 | } 265 | @-webkit-keyframes vertical { 266 | 0% { 267 | -webkit-transform: translate(0, -3px); 268 | transform: translate(0, -3px); 269 | } 270 | 4% { 271 | -webkit-transform: translate(0, 3px); 272 | transform: translate(0, 3px); 273 | } 274 | 8% { 275 | -webkit-transform: translate(0, -3px); 276 | transform: translate(0, -3px); 277 | } 278 | 12% { 279 | -webkit-transform: translate(0, 3px); 280 | transform: translate(0, 3px); 281 | } 282 | 16% { 283 | -webkit-transform: translate(0, -3px); 284 | transform: translate(0, -3px); 285 | } 286 | 20% { 287 | -webkit-transform: translate(0, 3px); 288 | transform: translate(0, 3px); 289 | } 290 | 100%, 291 | 22% { 292 | -webkit-transform: translate(0, 0); 293 | transform: translate(0, 0); 294 | } 295 | } 296 | @keyframes vertical { 297 | 0% { 298 | -webkit-transform: translate(0, -3px); 299 | -ms-transform: translate(0, -3px); 300 | transform: translate(0, -3px); 301 | } 302 | 4% { 303 | -webkit-transform: translate(0, 3px); 304 | -ms-transform: translate(0, 3px); 305 | transform: translate(0, 3px); 306 | } 307 | 8% { 308 | -webkit-transform: translate(0, -3px); 309 | -ms-transform: translate(0, -3px); 310 | transform: translate(0, -3px); 311 | } 312 | 12% { 313 | -webkit-transform: translate(0, 3px); 314 | -ms-transform: translate(0, 3px); 315 | transform: translate(0, 3px); 316 | } 317 | 16% { 318 | -webkit-transform: translate(0, -3px); 319 | -ms-transform: translate(0, -3px); 320 | transform: translate(0, -3px); 321 | } 322 | 20% { 323 | -webkit-transform: translate(0, 3px); 324 | -ms-transform: translate(0, 3px); 325 | transform: translate(0, 3px); 326 | } 327 | 100%, 328 | 22% { 329 | -webkit-transform: translate(0, 0); 330 | -ms-transform: translate(0, 0); 331 | transform: translate(0, 0); 332 | } 333 | } 334 | .faa-parent.animated-hover:hover > .faa-vertical, 335 | .faa-vertical.animated, 336 | .faa-vertical.animated-hover:hover { 337 | -webkit-animation: vertical 2s ease infinite; 338 | animation: vertical 2s ease infinite; 339 | } 340 | .faa-parent.animated-hover:hover > .faa-vertical.faa-fast, 341 | .faa-vertical.animated-hover.faa-fast:hover, 342 | .faa-vertical.animated.faa-fast { 343 | -webkit-animation: vertical 1s ease infinite; 344 | animation: vertical 1s ease infinite; 345 | } 346 | .faa-parent.animated-hover:hover > .faa-vertical.faa-slow, 347 | .faa-vertical.animated-hover.faa-slow:hover, 348 | .faa-vertical.animated.faa-slow { 349 | -webkit-animation: vertical 4s ease infinite; 350 | animation: vertical 4s ease infinite; 351 | } 352 | @-webkit-keyframes horizontal { 353 | 0% { 354 | -webkit-transform: translate(0, 0); 355 | transform: translate(0, 0); 356 | } 357 | 6% { 358 | -webkit-transform: translate(5px, 0); 359 | transform: translate(5px, 0); 360 | } 361 | 12% { 362 | -webkit-transform: translate(0, 0); 363 | transform: translate(0, 0); 364 | } 365 | 18% { 366 | -webkit-transform: translate(5px, 0); 367 | transform: translate(5px, 0); 368 | } 369 | 24% { 370 | -webkit-transform: translate(0, 0); 371 | transform: translate(0, 0); 372 | } 373 | 30% { 374 | -webkit-transform: translate(5px, 0); 375 | transform: translate(5px, 0); 376 | } 377 | 100%, 378 | 36% { 379 | -webkit-transform: translate(0, 0); 380 | transform: translate(0, 0); 381 | } 382 | } 383 | @keyframes horizontal { 384 | 0% { 385 | -webkit-transform: translate(0, 0); 386 | -ms-transform: translate(0, 0); 387 | transform: translate(0, 0); 388 | } 389 | 6% { 390 | -webkit-transform: translate(5px, 0); 391 | -ms-transform: translate(5px, 0); 392 | transform: translate(5px, 0); 393 | } 394 | 12% { 395 | -webkit-transform: translate(0, 0); 396 | -ms-transform: translate(0, 0); 397 | transform: translate(0, 0); 398 | } 399 | 18% { 400 | -webkit-transform: translate(5px, 0); 401 | -ms-transform: translate(5px, 0); 402 | transform: translate(5px, 0); 403 | } 404 | 24% { 405 | -webkit-transform: translate(0, 0); 406 | -ms-transform: translate(0, 0); 407 | transform: translate(0, 0); 408 | } 409 | 30% { 410 | -webkit-transform: translate(5px, 0); 411 | -ms-transform: translate(5px, 0); 412 | transform: translate(5px, 0); 413 | } 414 | 100%, 415 | 36% { 416 | -webkit-transform: translate(0, 0); 417 | -ms-transform: translate(0, 0); 418 | transform: translate(0, 0); 419 | } 420 | } 421 | .faa-horizontal.animated, 422 | .faa-horizontal.animated-hover:hover, 423 | .faa-parent.animated-hover:hover > .faa-horizontal { 424 | -webkit-animation: horizontal 2s ease infinite; 425 | animation: horizontal 2s ease infinite; 426 | } 427 | .faa-horizontal.animated-hover.faa-fast:hover, 428 | .faa-horizontal.animated.faa-fast, 429 | .faa-parent.animated-hover:hover > .faa-horizontal.faa-fast { 430 | -webkit-animation: horizontal 1s ease infinite; 431 | animation: horizontal 1s ease infinite; 432 | } 433 | .faa-horizontal.animated-hover.faa-slow:hover, 434 | .faa-horizontal.animated.faa-slow, 435 | .faa-parent.animated-hover:hover > .faa-horizontal.faa-slow { 436 | -webkit-animation: horizontal 3s ease infinite; 437 | animation: horizontal 3s ease infinite; 438 | } 439 | @-webkit-keyframes flash { 440 | 0%, 441 | 100%, 442 | 50% { 443 | opacity: 1; 444 | } 445 | 25%, 446 | 75% { 447 | opacity: 0; 448 | } 449 | } 450 | @keyframes flash { 451 | 0%, 452 | 100%, 453 | 50% { 454 | opacity: 1; 455 | } 456 | 25%, 457 | 75% { 458 | opacity: 0; 459 | } 460 | } 461 | .faa-flash.animated, 462 | .faa-flash.animated-hover:hover, 463 | .faa-parent.animated-hover:hover > .faa-flash { 464 | -webkit-animation: flash 2s ease infinite; 465 | animation: flash 2s ease infinite; 466 | } 467 | .faa-flash.animated-hover.faa-fast:hover, 468 | .faa-flash.animated.faa-fast, 469 | .faa-parent.animated-hover:hover > .faa-flash.faa-fast { 470 | -webkit-animation: flash 1s ease infinite; 471 | animation: flash 1s ease infinite; 472 | } 473 | .faa-flash.animated-hover.faa-slow:hover, 474 | .faa-flash.animated.faa-slow, 475 | .faa-parent.animated-hover:hover > .faa-flash.faa-slow { 476 | -webkit-animation: flash 3s ease infinite; 477 | animation: flash 3s ease infinite; 478 | } 479 | @-webkit-keyframes bounce { 480 | 0%, 481 | 10%, 482 | 100%, 483 | 20%, 484 | 50%, 485 | 80% { 486 | -webkit-transform: translateY(0); 487 | transform: translateY(0); 488 | } 489 | 40%, 490 | 60% { 491 | -webkit-transform: translateY(-15px); 492 | transform: translateY(-15px); 493 | } 494 | } 495 | @keyframes bounce { 496 | 0%, 497 | 10%, 498 | 100%, 499 | 20%, 500 | 50%, 501 | 80% { 502 | -webkit-transform: translateY(0); 503 | -ms-transform: translateY(0); 504 | transform: translateY(0); 505 | } 506 | 40%, 507 | 60% { 508 | -webkit-transform: translateY(-15px); 509 | -ms-transform: translateY(-15px); 510 | transform: translateY(-15px); 511 | } 512 | } 513 | .faa-bounce.animated, 514 | .faa-bounce.animated-hover:hover, 515 | .faa-parent.animated-hover:hover > .faa-bounce { 516 | -webkit-animation: bounce 2s ease infinite; 517 | animation: bounce 2s ease infinite; 518 | } 519 | .faa-bounce.animated-hover.faa-fast:hover, 520 | .faa-bounce.animated.faa-fast, 521 | .faa-parent.animated-hover:hover > .faa-bounce.faa-fast { 522 | -webkit-animation: bounce 1s ease infinite; 523 | animation: bounce 1s ease infinite; 524 | } 525 | .faa-bounce.animated-hover.faa-slow:hover, 526 | .faa-bounce.animated.faa-slow, 527 | .faa-parent.animated-hover:hover > .faa-bounce.faa-slow { 528 | -webkit-animation: bounce 3s ease infinite; 529 | animation: bounce 3s ease infinite; 530 | } 531 | @-webkit-keyframes spin { 532 | 0% { 533 | -webkit-transform: rotate(0deg); 534 | transform: rotate(0deg); 535 | } 536 | 100% { 537 | -webkit-transform: rotate(359deg); 538 | transform: rotate(359deg); 539 | } 540 | } 541 | @keyframes spin { 542 | 0% { 543 | -webkit-transform: rotate(0deg); 544 | -ms-transform: rotate(0deg); 545 | transform: rotate(0deg); 546 | } 547 | 100% { 548 | -webkit-transform: rotate(359deg); 549 | -ms-transform: rotate(359deg); 550 | transform: rotate(359deg); 551 | } 552 | } 553 | .faa-parent.animated-hover:hover > .faa-spin, 554 | .faa-spin.animated, 555 | .faa-spin.animated-hover:hover { 556 | -webkit-animation: spin 1.5s linear infinite; 557 | animation: spin 1.5s linear infinite; 558 | } 559 | .faa-parent.animated-hover:hover > .faa-spin.faa-fast, 560 | .faa-spin.animated-hover.faa-fast:hover, 561 | .faa-spin.animated.faa-fast { 562 | -webkit-animation: spin 0.7s linear infinite; 563 | animation: spin 0.7s linear infinite; 564 | } 565 | .faa-parent.animated-hover:hover > .faa-spin.faa-slow, 566 | .faa-spin.animated-hover.faa-slow:hover, 567 | .faa-spin.animated.faa-slow { 568 | -webkit-animation: spin 2.2s linear infinite; 569 | animation: spin 2.2s linear infinite; 570 | } 571 | @-webkit-keyframes float { 572 | 0% { 573 | -webkit-transform: translateY(0); 574 | transform: translateY(0); 575 | } 576 | 50% { 577 | -webkit-transform: translateY(-6px); 578 | transform: translateY(-6px); 579 | } 580 | 100% { 581 | -webkit-transform: translateY(0); 582 | transform: translateY(0); 583 | } 584 | } 585 | @keyframes float { 586 | 0% { 587 | -webkit-transform: translateY(0); 588 | -ms-transform: translateY(0); 589 | transform: translateY(0); 590 | } 591 | 50% { 592 | -webkit-transform: translateY(-6px); 593 | -ms-transform: translateY(-6px); 594 | transform: translateY(-6px); 595 | } 596 | 100% { 597 | -webkit-transform: translateY(0); 598 | -ms-transform: translateY(0); 599 | transform: translateY(0); 600 | } 601 | } 602 | .faa-float.animated, 603 | .faa-float.animated-hover:hover, 604 | .faa-parent.animated-hover:hover > .faa-float { 605 | -webkit-animation: float 2s linear infinite; 606 | animation: float 2s linear infinite; 607 | } 608 | .faa-float.animated-hover.faa-fast:hover, 609 | .faa-float.animated.faa-fast, 610 | .faa-parent.animated-hover:hover > .faa-float.faa-fast { 611 | -webkit-animation: float 1s linear infinite; 612 | animation: float 1s linear infinite; 613 | } 614 | .faa-float.animated-hover.faa-slow:hover, 615 | .faa-float.animated.faa-slow, 616 | .faa-parent.animated-hover:hover > .faa-float.faa-slow { 617 | -webkit-animation: float 3s linear infinite; 618 | animation: float 3s linear infinite; 619 | } 620 | @-webkit-keyframes pulse { 621 | 0% { 622 | -webkit-transform: scale(1.1); 623 | transform: scale(1.1); 624 | } 625 | 50% { 626 | -webkit-transform: scale(0.8); 627 | transform: scale(0.8); 628 | } 629 | 100% { 630 | -webkit-transform: scale(1.1); 631 | transform: scale(1.1); 632 | } 633 | } 634 | @keyframes pulse { 635 | 0% { 636 | -webkit-transform: scale(1.1); 637 | -ms-transform: scale(1.1); 638 | transform: scale(1.1); 639 | } 640 | 50% { 641 | -webkit-transform: scale(0.8); 642 | -ms-transform: scale(0.8); 643 | transform: scale(0.8); 644 | } 645 | 100% { 646 | -webkit-transform: scale(1.1); 647 | -ms-transform: scale(1.1); 648 | transform: scale(1.1); 649 | } 650 | } 651 | .faa-parent.animated-hover:hover > .faa-pulse, 652 | .faa-pulse.animated, 653 | .faa-pulse.animated-hover:hover { 654 | -webkit-animation: pulse 2s linear infinite; 655 | animation: pulse 2s linear infinite; 656 | } 657 | .faa-parent.animated-hover:hover > .faa-pulse.faa-fast, 658 | .faa-pulse.animated-hover.faa-fast:hover, 659 | .faa-pulse.animated.faa-fast { 660 | -webkit-animation: pulse 1s linear infinite; 661 | animation: pulse 1s linear infinite; 662 | } 663 | .faa-parent.animated-hover:hover > .faa-pulse.faa-slow, 664 | .faa-pulse.animated-hover.faa-slow:hover, 665 | .faa-pulse.animated.faa-slow { 666 | -webkit-animation: pulse 3s linear infinite; 667 | animation: pulse 3s linear infinite; 668 | } 669 | .faa-parent.animated-hover:hover > .faa-shake, 670 | .faa-shake.animated, 671 | .faa-shake.animated-hover:hover { 672 | -webkit-animation: wrench 2.5s ease infinite; 673 | animation: wrench 2.5s ease infinite; 674 | } 675 | .faa-parent.animated-hover:hover > .faa-shake.faa-fast, 676 | .faa-shake.animated-hover.faa-fast:hover, 677 | .faa-shake.animated.faa-fast { 678 | -webkit-animation: wrench 1.2s ease infinite; 679 | animation: wrench 1.2s ease infinite; 680 | } 681 | .faa-parent.animated-hover:hover > .faa-shake.faa-slow, 682 | .faa-shake.animated-hover.faa-slow:hover, 683 | .faa-shake.animated.faa-slow { 684 | -webkit-animation: wrench 3.7s ease infinite; 685 | animation: wrench 3.7s ease infinite; 686 | } 687 | @-webkit-keyframes tada { 688 | 0% { 689 | -webkit-transform: scale(1); 690 | transform: scale(1); 691 | } 692 | 10%, 693 | 20% { 694 | -webkit-transform: scale(0.9) rotate(-8deg); 695 | transform: scale(0.9) rotate(-8deg); 696 | } 697 | 30%, 698 | 50%, 699 | 70% { 700 | -webkit-transform: scale(1.3) rotate(8deg); 701 | transform: scale(1.3) rotate(8deg); 702 | } 703 | 40%, 704 | 60% { 705 | -webkit-transform: scale(1.3) rotate(-8deg); 706 | transform: scale(1.3) rotate(-8deg); 707 | } 708 | 100%, 709 | 80% { 710 | -webkit-transform: scale(1) rotate(0); 711 | transform: scale(1) rotate(0); 712 | } 713 | } 714 | @keyframes tada { 715 | 0% { 716 | -webkit-transform: scale(1); 717 | -ms-transform: scale(1); 718 | transform: scale(1); 719 | } 720 | 10%, 721 | 20% { 722 | -webkit-transform: scale(0.9) rotate(-8deg); 723 | -ms-transform: scale(0.9) rotate(-8deg); 724 | transform: scale(0.9) rotate(-8deg); 725 | } 726 | 30%, 727 | 50%, 728 | 70% { 729 | -webkit-transform: scale(1.3) rotate(8deg); 730 | -ms-transform: scale(1.3) rotate(8deg); 731 | transform: scale(1.3) rotate(8deg); 732 | } 733 | 40%, 734 | 60% { 735 | -webkit-transform: scale(1.3) rotate(-8deg); 736 | -ms-transform: scale(1.3) rotate(-8deg); 737 | transform: scale(1.3) rotate(-8deg); 738 | } 739 | 100%, 740 | 80% { 741 | -webkit-transform: scale(1) rotate(0); 742 | -ms-transform: scale(1) rotate(0); 743 | transform: scale(1) rotate(0); 744 | } 745 | } 746 | .faa-parent.animated-hover:hover > .faa-tada, 747 | .faa-tada.animated, 748 | .faa-tada.animated-hover:hover { 749 | -webkit-animation: tada 2s linear infinite; 750 | animation: tada 2s linear infinite; 751 | } 752 | .faa-parent.animated-hover:hover > .faa-tada.faa-fast, 753 | .faa-tada.animated-hover.faa-fast:hover, 754 | .faa-tada.animated.faa-fast { 755 | -webkit-animation: tada 1s linear infinite; 756 | animation: tada 1s linear infinite; 757 | } 758 | .faa-parent.animated-hover:hover > .faa-tada.faa-slow, 759 | .faa-tada.animated-hover.faa-slow:hover, 760 | .faa-tada.animated.faa-slow { 761 | -webkit-animation: tada 3s linear infinite; 762 | animation: tada 3s linear infinite; 763 | } 764 | @-webkit-keyframes passing { 765 | 0% { 766 | -webkit-transform: translateX(-50%); 767 | transform: translateX(-50%); 768 | opacity: 0; 769 | } 770 | 50% { 771 | -webkit-transform: translateX(0%); 772 | transform: translateX(0%); 773 | opacity: 1; 774 | } 775 | 100% { 776 | -webkit-transform: translateX(50%); 777 | transform: translateX(50%); 778 | opacity: 0; 779 | } 780 | } 781 | @keyframes passing { 782 | 0% { 783 | -webkit-transform: translateX(-50%); 784 | -ms-transform: translateX(-50%); 785 | transform: translateX(-50%); 786 | opacity: 0; 787 | } 788 | 50% { 789 | -webkit-transform: translateX(0%); 790 | -ms-transform: translateX(0%); 791 | transform: translateX(0%); 792 | opacity: 1; 793 | } 794 | 100% { 795 | -webkit-transform: translateX(50%); 796 | -ms-transform: translateX(50%); 797 | transform: translateX(50%); 798 | opacity: 0; 799 | } 800 | } 801 | .faa-parent.animated-hover:hover > .faa-passing, 802 | .faa-passing.animated, 803 | .faa-passing.animated-hover:hover { 804 | -webkit-animation: passing 2s linear infinite; 805 | animation: passing 2s linear infinite; 806 | } 807 | .faa-parent.animated-hover:hover > .faa-passing.faa-fast, 808 | .faa-passing.animated-hover.faa-fast:hover, 809 | .faa-passing.animated.faa-fast { 810 | -webkit-animation: passing 1s linear infinite; 811 | animation: passing 1s linear infinite; 812 | } 813 | .faa-parent.animated-hover:hover > .faa-passing.faa-slow, 814 | .faa-passing.animated-hover.faa-slow:hover, 815 | .faa-passing.animated.faa-slow { 816 | -webkit-animation: passing 3s linear infinite; 817 | animation: passing 3s linear infinite; 818 | } 819 | @-webkit-keyframes passing-reverse { 820 | 0% { 821 | -webkit-transform: translateX(50%); 822 | transform: translateX(50%); 823 | opacity: 0; 824 | } 825 | 50% { 826 | -webkit-transform: translateX(0%); 827 | transform: translateX(0%); 828 | opacity: 1; 829 | } 830 | 100% { 831 | -webkit-transform: translateX(-50%); 832 | transform: translateX(-50%); 833 | opacity: 0; 834 | } 835 | } 836 | @keyframes passing-reverse { 837 | 0% { 838 | -webkit-transform: translateX(50%); 839 | -ms-transform: translateX(50%); 840 | transform: translateX(50%); 841 | opacity: 0; 842 | } 843 | 50% { 844 | -webkit-transform: translateX(0%); 845 | -ms-transform: translateX(0%); 846 | transform: translateX(0%); 847 | opacity: 1; 848 | } 849 | 100% { 850 | -webkit-transform: translateX(-50%); 851 | -ms-transform: translateX(-50%); 852 | transform: translateX(-50%); 853 | opacity: 0; 854 | } 855 | } 856 | .faa-parent.animated-hover:hover > .faa-passing-reverse, 857 | .faa-passing-reverse.animated, 858 | .faa-passing-reverse.animated-hover:hover { 859 | -webkit-animation: passing-reverse 2s linear infinite; 860 | animation: passing-reverse 2s linear infinite; 861 | } 862 | .faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast, 863 | .faa-passing-reverse.animated-hover.faa-fast:hover, 864 | .faa-passing-reverse.animated.faa-fast { 865 | -webkit-animation: passing-reverse 1s linear infinite; 866 | animation: passing-reverse 1s linear infinite; 867 | } 868 | .faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow, 869 | .faa-passing-reverse.animated-hover.faa-slow:hover, 870 | .faa-passing-reverse.animated.faa-slow { 871 | -webkit-animation: passing-reverse 3s linear infinite; 872 | animation: passing-reverse 3s linear infinite; 873 | } 874 | @-webkit-keyframes burst { 875 | 0% { 876 | opacity: 0.6; 877 | } 878 | 50% { 879 | -webkit-transform: scale(1.8); 880 | transform: scale(1.8); 881 | opacity: 0; 882 | } 883 | 100% { 884 | opacity: 0; 885 | } 886 | } 887 | @keyframes burst { 888 | 0% { 889 | opacity: 0.6; 890 | } 891 | 50% { 892 | -webkit-transform: scale(1.8); 893 | -ms-transform: scale(1.8); 894 | transform: scale(1.8); 895 | opacity: 0; 896 | } 897 | 100% { 898 | opacity: 0; 899 | } 900 | } 901 | .faa-burst.animated, 902 | .faa-burst.animated-hover:hover, 903 | .faa-parent.animated-hover:hover > .faa-burst { 904 | -webkit-animation: burst 2s infinite linear; 905 | animation: burst 2s infinite linear; 906 | } 907 | .faa-burst.animated-hover.faa-fast:hover, 908 | .faa-burst.animated.faa-fast, 909 | .faa-parent.animated-hover:hover > .faa-burst.faa-fast { 910 | -webkit-animation: burst 1s infinite linear; 911 | animation: burst 1s infinite linear; 912 | } 913 | .faa-burst.animated-hover.faa-slow:hover, 914 | .faa-burst.animated.faa-slow, 915 | .faa-parent.animated-hover:hover > .faa-burst.faa-slow { 916 | -webkit-animation: burst 3s infinite linear; 917 | animation: burst 3s infinite linear; 918 | } 919 | @-webkit-keyframes falling { 920 | 0% { 921 | -webkit-transform: translateY(-50%); 922 | transform: translateY(-50%); 923 | opacity: 0; 924 | } 925 | 50% { 926 | -webkit-transform: translateY(0%); 927 | transform: translateY(0%); 928 | opacity: 1; 929 | } 930 | 100% { 931 | -webkit-transform: translateY(50%); 932 | transform: translateY(50%); 933 | opacity: 0; 934 | } 935 | } 936 | @keyframes falling { 937 | 0% { 938 | -webkit-transform: translateY(-50%); 939 | -ms-transform: translateY(-50%); 940 | transform: translateY(-50%); 941 | opacity: 0; 942 | } 943 | 50% { 944 | -webkit-transform: translateY(0%); 945 | -ms-transform: translateY(0%); 946 | transform: translateY(0%); 947 | opacity: 1; 948 | } 949 | 100% { 950 | -webkit-transform: translateY(50%); 951 | -ms-transform: translateY(50%); 952 | transform: translateY(50%); 953 | opacity: 0; 954 | } 955 | } 956 | .faa-falling.animated, 957 | .faa-falling.animated-hover:hover, 958 | .faa-parent.animated-hover:hover > .faa-falling { 959 | -webkit-animation: falling 2s linear infinite; 960 | animation: falling 2s linear infinite; 961 | } 962 | .faa-falling.animated-hover.faa-fast:hover, 963 | .faa-falling.animated.faa-fast, 964 | .faa-parent.animated-hover:hover > .faa-falling.faa-fast { 965 | -webkit-animation: falling 1s linear infinite; 966 | animation: falling 1s linear infinite; 967 | } 968 | .faa-falling.animated-hover.faa-slow:hover, 969 | .faa-falling.animated.faa-slow, 970 | .faa-parent.animated-hover:hover > .faa-falling.faa-slow { 971 | -webkit-animation: falling 3s linear infinite; 972 | animation: falling 3s linear infinite; 973 | } 974 | 975 | .back-to-top { 976 | cursor: pointer; 977 | position: fixed; 978 | /* right: 100px; */ 979 | top: -900px; 980 | z-index: 2; 981 | width: 70px; 982 | height: 900px; 983 | background: url(../images/scroll.png); 984 | transition: all 0.5s ease-in-out; 985 | opacity: 1; 986 | } 987 | -------------------------------------------------------------------------------- /images/scroll.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MisakaTAT/GoTop/20792baf31d114cef4181965769968b532683467/images/scroll.png -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Typecho猫耳FM置顶插件 3 | * 4 | * @author Zero 5 | * @link https://github.com/MisakaTAT/GoTop 6 | */ 7 | $(function () { 8 | $(window).scroll(function () { 9 | var scroHei = $(window).scrollTop(); 10 | if (scroHei > 500) { 11 | $(".back-to-top").css("top", "-200px"); 12 | } else { 13 | $(".back-to-top").css("top", "-999px"); 14 | } 15 | }); 16 | $(".back-to-top").click(function () { 17 | $("body,html").animate( 18 | { 19 | scrollTop: 0, 20 | }, 21 | 600 22 | ); 23 | }); 24 | }); 25 | --------------------------------------------------------------------------------