首页 > 其他分享 >[洛谷]美化

[洛谷]美化

时间：2024-01-28 11:58:30浏览次数：21  
标签：洛谷 rgba color am important background btn 美化

洛谷美化指南

\(\color{pink}\mathbf{大家好，相比很多洛谷党都觉得洛谷的界面特别单一（丑陋)。 }\)

\(\color{red}\mathbf{那我们就可以借助一下这个东西：Tampermonkey。（注：在扩展商店里搜索英文名）}\)

1.安装“篡改猴Tampermonkey”

网址：Tampermonkey

2.安装脚本：氢洛谷

下载脚本：氢洛谷脚本

如果无法打开，使用一下代码复制到篡改猴的添加脚本（兼容性差）

// ==UserScript==
// @name          氢洛谷
// @namespace     http://userstyles.org
// @description	  洛谷美化
// @author        陈春昊
// @homepage      https://userstyles.org/styles/174057
// @run-at        document-start
// @version       0.20190922030246
// ==/UserScript==
(function() {var css = "";
if (false || (new RegExp("^https://www\\.luogu(\\.org|\\.com\\.cn)/(?!blog).*$")).test(document.location.href))
	css += [
		".main-container .lfe-body {",
		"    background-image: url(https://s1.ax1x.com/2018/02/25/9w99XR.jpg);",
		"    background-repeat: no-repeat;",
		"    background-size: cover;",
		"    background-position: center;",
		"    background-attachment: fixed;",
		"}",
		"",
		"#app > .lfe-body > a {",
		"    color: rgb(55, 152, 255) !important;",
		"    height: 3.7em;",
		"    margin-top: 3px;",
		"}",
		"#app > .lfe-body > a > .icon {",
		"    line-height: 2.4em;",
		"    font-size: 20px;",
		"    width: 100%;",
		"    margin: 0 !important;",
		"    transition: all 0.3s ease;",
		"}",
		"#app > .lfe-body > a > .text {",
		"    opacity: 0;",
		"    margin-top: -1em;",
		"    display: block;",
		"    transition: all 0.3s ease;",
		"}",
		"#app > .lfe-body > a:hover > .icon {",
		"    line-height: 1.5em;",
		"    font-size: 17px;",
		"}",
		"#app > .lfe-body > a:hover > .text {",
		"    opacity: 1;",
		"    margin-top: 0.2em;",
		"}",
		"",
		".am-input-group {",
		"    transition: box-shadow .15s ease;",
		"    border: none;",
		"    border-radius: .5rem !important;",
		"}",
		".am-form-field {",
		"    border: none;",
		"    border-radius: .5rem !important;",
		"    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);",
		"}",
		".am-form-field:focus {",
		"    box-shadow: 0 4px 6px rgba(50, 50, 93, .08), 0 1px 3px rgba(0, 0, 0, .05) !important;",
		"}",
		".am-input-group-sm > .am-form-field,",
		".am-input-group-sm > .am-input-group-btn > .am-btn,",
		".am-input-group-sm > .am-input-group-label {",
		"    font-size: 1.35rem!important;",
		"}",
		".am-input-group-label {",
		"    background: transparent;",
		"    border: none;",
		"}",
		".am-input-group-danger,",
		".am-input-group-primary {",
		"    box-shadow: none;",
		"}",
		".am-input-group-danger > .am-input-group-label,",
		".am-input-group-primary > .am-input-group-label {",
		"    border-radius: .5rem !important;",
		"    outline: none !important;",
		"    letter-spacing: .05em;",
		"    transition: all .15s ease;",
		"    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);",
		"    color: #fff !important;",
		"    margin-bottom: 6px;",
		"    height: 33.4px;",
		"}",
		".am-input-group-danger > .am-input-group-label:hover,",
		".am-input-group-primary > .am-input-group-label:hover {",
		"    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);",
		"}",
		".am-input-group-danger > .am-input-group-label:active,",
		".am-input-group-primary > .am-input-group-label:active {",
		"    box-shadow: none;",
		"}",
		".am-input-group-danger > .am-input-group-label {",
		"    border-color: #f5365c;",
		"    background-color: #ec0c38;",
		"}",
		".am-input-group-primary > .am-input-group-label {",
		"    border-color: #5e72e4;",
		"    background-color: #5e72e4;",
		"    border-radius: .5rem !important;",
		"}",
		"textarea {",
		"    box-shadow: 0 1px 3px rgba(50, 50, 93, .15), 0 1px 0 rgba(0, 0, 0, .02);",
		"    border: none !important;",
		"}",
		"textarea:focus {",
		"    box-shadow: 0 4px 6px rgba(50, 50, 93, .08), 0 1px 3px rgba(0, 0, 0, .05) !important;",
		"}",
		".lg-input-title {",
		"    margin-bottom: 5px;",
		"    border-radius: 5px;",
		"    border-color: #ddd;",
		"}",
		"",
		"#topbar-search-text {",
		"    border-radius: .5rem 0 0 .5em !important;",
		"}",
		"#topbar-search {",
		"    border-radius: 0 .5rem .5em 0 !important;",
		"    border-color: #5e72e4;",
		"    background-color: #5e72e4;",
		"}",
		"",
		".lg-article,",
		".lg-summary,",
		".lg-article-sub {",
		"    transition: all .15s ease;",
		"    box-shadow: 0 5px 15px rgba(50, 50, 93, .1), 0 5px 8px rgba(0, 0, 0, .07)!important;",
		"    word-wrap: break-word;",
		"    border-radius: .25rem;",
		"}",
		".lg-article:hover,",
		".lg-summary:hover,",
		".lg-article-sub:hover {",
		"    box-shadow: 0 10px 30px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07)!important;",
		"}",
		"",
		".am-btn {",
		"    outline: none !important;",
		"    border: none !important;",
		"    letter-spacing: .05em;",
		"    padding: 8px 18px;",
		"    transition: all .15s ease;",
		"    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);",
		"    color: #fff !important;",
		"    margin-bottom: 6px;",
		"}",
		".lg-main-content.solution-block {",
		"    margin-top: 0 !important;",
		"}",
		".am-btn:hover {",
		"    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);",
		"    transform: translateY(-1px);",
		"}",
		".am-btn:active {",
		"    box-shadow: none;",
		"}",
		".am-btn-danger,",
		".am-btn-danger:hover,",
		".am-btn-danger:active,",
		".am-btn-danger:focus,",
		".am-btn-danger:visited {",
		"    border-color: #f5365c;",
		"    background-color: #ec0c38;",
		"}",
		".am-btn-primary,",
		".am-btn-primary:hover,",
		".am-btn-primary:active,",
		".am-btn-primary:focus,",
		"a.am-btn-primary:visited {",
		"    border-color: #5e72e4;",
		"    background-color: #5e72e4;",
		"}",
		".am-btn-success,",
		".am-btn-success:hover,",
		".am-btn-success:active,",
		".am-btn-success:focus,",
		"a.am-btn-success:visited {",
		"    border-color: #2dce89;",
		"    background-color: #2dce89;",
		"}",
		".am-btn-warning,",
		".am-btn-warning:hover,",
		".am-btn-warning:active,",
		".am-btn-warning:focus,",
		"a.am-btn-warning:visited {",
		"    border-color: #fb6340;",
		"    background-color: #fb6340;",
		"}",
		"",
		".am-badge {",
		"    border-radius: 50px !important;",
		"    padding-left: 10px;",
		"    padding-right: 10px;",
		"    padding-top: 4px;",
		"    padding-bottom: 4px;",
		"    transition: all .15s;",
		"}",
		".am-badge:hover {",
		"    transform: translateY(-1px);",
		"    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);",
		"}",
		".am-badge.lg-bg-red {",
		"    background-color: #f80031;",
		"}",
		".am-badge.lg-bg-orange {",
		"    background-color: #ff471d;",
		"}",
		".am-badge.lg-bg-yellow {",
		"    background-color: #ff9d09;",
		"}",
		".am-badge.lg-bg-green {",
		"    background-color: #1aae6f;",
		"}",
		".am-badge.lg-bg-bluelight {",
		"    background-color: #03acca;",
		"}",
		".am-badge.lg-bg-purple {",
		"    background-color: #8e44ad;",
		"}",
		".am-badge.lg-bg-bluedark {",
		"    background-color: #001277;",
		"}",
		".am-badge.am-badge-warning {",
		"    background-color: #fb6340;",
		"}"
	].join("\n");
if (false || (new RegExp("^https://www\\.luogu(\\.org|\\.com\\.cn)/(?!blog).*$")).test(document.location.href))
	css += [
		".lg-article {",
		"    background-color: rgba(255, 255, 255, 0.85);",
		"}",
		".lfe-form-sz-middle {",
		"    transition: 0.2s;",
		"}",
		".copy-btn:hover {",
		"    color: white !important;",
		"    background-color: rgb(52, 152, 219) !important;",
		"}",
		"a {",
		"    transition: 0.3s;",
		"}",
		".card {",
		"    transition: 0.3s;",
		"    opacity: 0.85;",
		"    border-radius: 5px;",
		"}",
		".lg-contact-right:hover {",
		"    background-color: rgba(255, 255, 255, 0);",
		"}",
		".lg-contact-right a:hover,",
		".lg-contact-right span:hover,",
		".lg-contact-left:hover {",
		"    background-color: rgba(255, 255, 255, 0);",
		"}",
		".am-table-striped>tbody>tr:nth-child(odd)>td,",
		".am-table-striped>tbody>tr:nth-child(odd)>th {",
		"    background-color: rgba(255, 255, 255, 0.7);",
		"}",
		"#app > .lfe-body > div:first-child {",
		"    background-color: rgb(55, 152, 255) !important;",
		"}",
		"#app > .lfe-body {",
		"    background-color: white !important;",
		"}",
		".popup-button {",
		"    color: rgb(55, 152, 255) !important;",
		"}",
		".lfe-caption {",
		"    border-radius: 10px !important;",
		"    transition: 0.3s;",
		"}",
		".lfe-caption:hover {",
		"    transform: translate(0, -2px);",
		"}",
		".items li {",
		"    transition: background-color 0.3s !important;",
		"}",
		".items li:hover {",
		"    background-color: rgb(55, 152, 255);",
		"    color: white;",
		"}",
		"button {",
		"    transition: 0.3s;",
		"}",
		".test-case {",
		"    border-radius: 5px;",
		"    transition: 0.3s;",
		"}",
		".test-case:hover {",
		"    transform: translate(0, -3px);",
		"}",
		"a[data-v-a580f5e6] {",
		"    padding: 0 0 !important;",
		"}"
	].join("\n");
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
	PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}
}
})();

3.安装脚本：洛谷点击特效

将一下代码复制到篡改猴的添加脚本

// ==UserScript==
// @name         鼠标点击特效
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.luogu.com.cn/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
function clickEffect() {
  let balls = [];
  let longPressed = false;
  let longPress;
  let multiplier = 0;
  let width, height;
  let origin;
  let normal;
  let ctx;
  const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  const pointer = document.createElement("span");
  pointer.classList.add("pointer");
  document.body.appendChild(pointer);

  if (canvas.getContext && window.addEventListener) {
    ctx = canvas.getContext("2d");
    updateSize();
    window.addEventListener('resize', updateSize, false);
    loop();
    window.addEventListener("mousedown", function(e) {
      pushBalls(randBetween(10, 20), e.clientX, e.clientY);
      document.body.classList.add("is-pressed");
      longPress = setTimeout(function(){
        document.body.classList.add("is-longpress");
        longPressed = true;
      }, 500);
    }, false);
    window.addEventListener("mouseup", function(e) {
      clearInterval(longPress);
      if (longPressed == true) {
        document.body.classList.remove("is-longpress");
        pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
        longPressed = false;
      }
      document.body.classList.remove("is-pressed");
    }, false);
    window.addEventListener("mousemove", function(e) {
      let x = e.clientX;
      let y = e.clientY;
      pointer.style.top = y + "px";
      pointer.style.left = x + "px";
    }, false);
  } else {
    console.log("canvas or addEventListener is unsupported!");
  }


  function updateSize() {
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
    ctx.scale(2, 2);
    width = (canvas.width = window.innerWidth);
    height = (canvas.height = window.innerHeight);
    origin = {
      x: width / 2,
      y: height / 2
    };
    normal = {
      x: width / 2,
      y: height / 2
    };
  }
  class Ball {
    constructor(x = origin.x, y = origin.y) {
      this.x = x;
      this.y = y;
      this.angle = Math.PI * 2 * Math.random();
      if (longPressed == true) {
        this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
      } else {
        this.multiplier = randBetween(6, 12);
      }
      this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
      this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
      this.r = randBetween(8, 12) + 3 * Math.random();
      this.color = colours[Math.floor(Math.random() * colours.length)];
    }
    update() {
      this.x += this.vx - normal.x;
      this.y += this.vy - normal.y;
      normal.x = -2 / window.innerWidth * Math.sin(this.angle);
      normal.y = -2 / window.innerHeight * Math.cos(this.angle);
      this.r -= 0.3;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }

  function pushBalls(count = 1, x = origin.x, y = origin.y) {
    for (let i = 0; i < count; i++) {
      balls.push(new Ball(x, y));
    }
  }

  function randBetween(min, max) {
    return Math.floor(Math.random() * max) + min;
  }

  function loop() {
    ctx.fillStyle = "rgba(255, 255, 255, 0)";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.r < 0) continue;
      ctx.fillStyle = b.color;
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
      ctx.fill();
      b.update();
    }
    if (longPressed == true) {
      multiplier += 0.2;
    } else if (!longPressed && multiplier >= 0) {
      multiplier -= 0.4;
    }
    removeBall();
    requestAnimationFrame(loop);
  }

  function removeBall() {
    for (let i = 0; i < balls.length; i++) {
      let b = balls[i];
      if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
        balls.splice(i, 1);
      }
    }
  }
}
clickEffect();//调用特效函数


})();

长按有惊喜

标签：洛谷,rgba,color,am,important,background,btn,美化
From： https://www.cnblogs.com/5735733ckl/p/17992665

相关文章

  • 洛谷题解-P3003 [USACO10DEC] Apple Delivery S （dijkstra）
    题目描述Bessiehastwocrispredapplestodelivertotwoofherfriendsintheherd.Ofcourse,shetravelstheC(1<=C<=200,000)cowpathswhicharearrangedastheusualgraphwhichconnectsP(1<=P<=100,000)pasturesconvenientlynumb......
  • 洛谷题单指南-排序-P1923 【深基9.例4】求第 k 小的数
    原题链接：https://www.luogu.com.cn/problem/P1923题意解读：要最快的求第k小的数，O(n)的做法是利用快排的思想对数据进行划分第一步、取分界点x，通常设x=a[(l+r)/2]第二步、将小于x的挪到x左边，将大于x的挪到x右边第三步、比较，如果x左边的个数大于k，则继续递归处理左边，否则递......
  • 洛谷题解-P1821 [USACO07FEB] Cow Party S
    https://www.luogu.com.cn/problem/P1821题目描述寒假到了，nnn头牛都要去参加一场在编号为xxx的牛的农场举行的派对，农场之间有mmm条有向路，每条路都有一定的长度。每头牛参加完派对后都必须回家，无论是去参加派对还是回家，每头牛都会选择最短路径，求这nnn头牛的最短路径（一个......
  • 洛谷题解-P1673 [USACO05FEB] Part Acquisition S
    https://www.luogu.com.cn/problem/P1673题目描述奶牛们接到了寻找一种新型挤奶机的任务，为此它们准备依次经过N(1≤N≤5×104)N(1\leN\le5\times10^4)N(1≤N≤5×104)颗行星，在行星上进行交易。为了方便，奶牛们已经给可能出现的K(1≤K≤103)K(1\leK\le10^3)K(1≤K≤103)......
  • 洛谷 P1749 [入门赛 #19] 分饼干 II 题解
    题目传送门先给结论：记\(S=1+2+\dots+k\)，则当\(N\geS\)时为YES，当\(N<S\)时为NO。严谨一点，证明如下：若能成功分配饼干，记\(k\)名小朋友拿到的饼干数量分别为\(a_1,a_2,\dots,a_k\)。由于饼干数量各不相同且均为整数，不妨设\(a_1<a_2<\dots<a_k\)，则\(a_2\gea_1+1,a_3\g......
  • 洛谷题单指南-排序-P1177 【模板】排序
    原题链接：https://www.luogu.com.cn/problem/P1177题意解读：数据量为100000，必须用小于等于N*logN复杂度的排序算法，可以直接用sort，更重要需要掌握快速排序的过程。知识点：快速排序设定数组q[n]，l，r第一步：确定分界点x可以取q[l]、q[(l+r)/2]、q[r]三种第二步：调整区间把<=x的数调......
  • 洛谷 P7906 [Ynoi2005] rpxleqxq
    洛谷传送门考虑莫队二次离线。剩下是平衡插入和查询复杂度的问题。考虑现在的问题：要求\(O(\sqrt{n})\)往集合里插入一个数，\(O(1)\)回答集合内有多少个数\(x\)满足\(z\oplusx\lem\)（\(z\)给定）。考虑高低位分块。先钦定\(z\)在前\(9\)位时\(z\oplusx<m\)，枚举......
  • 洛谷题解-P2712 摄像头
    https://www.luogu.com.cn/problem/P2712可以看出是拓扑排序，因为是有前后关系的，但是坑点在于点并不连续，值得记录一下（刚开始70分，后来才AC）注意坑点：拓扑排序，遍历的点不连续 #include<bits/stdc++.h>usingnamespacestd;constintN=1e5+5;intn,x,m,y,d[N],cnt=0,v......
  • 洛谷题单指南-排序-P1271 【深基9.例1】选举学生会
    原题链接：https://www.luogu.com.cn/problem/P1271题意解读：最直接的计数排序问题，借助一个桶h[N]，对被投票的候选人x执行h[x]++，再按顺序遍历输出即可。100分代码：#include<bits/stdc++.h>usingnamespacestd;constintN=1005;inth[N];intmain(){intn,m;......
  • 洛谷题单指南-模拟和高精度-P1045 [NOIP2003 普及组] 麦森数
    原题链接：https://www.luogu.com.cn/problem/P1045题意解读：要计算2p-1的位数和最后500位，实际上只需要计算2p，两者位数一致，前者比后者个位减1即可，且个位肯定不会是0，比较容易处理。解题思路：如果直接采用高精度乘法计算2p，p最大3.1*106,高精度所用数组最长大概9*105，一共最多计算3.......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99