就是本人一直使用handsome主题以来的修改记录,就顺便当做是笔记啦,具体请参照本博客~

1.Mac风格代码高亮

Mac风格代码高亮

  system out println 'hello world!';

这里我是使用了Xcnte大佬的Typecho代码高亮插件Code Prettify实现的,具体方法就不再复制粘贴了,直接画个传送阵

2.博主介绍的闪字特效

博主介绍的闪字特效

食用方法

  • 把下方代码复制粘贴到后台的博主介绍即可,修改的地方在代码中有中文提示,只需修改文字即可
  <!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["这个位置,自定义你的内容" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

3.头像呼吸光环和鼠标悬停旋转放大

头像呼吸光环和鼠标悬停旋转放大

  • 将下方代码复制粘贴到后台的自定义CSS即可
  /*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}
  • 如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:
/*头像呼吸光环和鼠标悬停旋转放大*/
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

    to {
        box-shadow: 0 0 16px #f00;
    }
}

4.复制弹框版权提示

复制弹框版权提示

食用方法

  • 第一步,先复制下方代码,粘贴至 开发者设置-自定义输出body尾部的HTML代码
  <!-- 复制弹框版权提醒 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  • 第二步,再复制下方代码,粘贴至 开发者设置-自定义JavaScript
<!-- 复制弹框版权提醒 -->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};

5.超链接文字颜色和加粗

超链接文字颜色和加粗

超链接文字颜色和加粗:Demo

食用方法

  • 将下方代码复制粘贴到 开发者设置 - 自定义CSS 即可
  /*超链接文字颜色和加粗*/
.comment-content-true a, .wrapper-lg .entry-content a {
    color: #23b7e5;
    border-bottom-color: #7266ba;
    border-bottom: 1px solid #23b7e5;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: bold;
}

6.文章内头图和文章图片悬停放大并将超出范围隐藏

文章内头图和文章图片悬停放大并将超出范围隐藏

食用方法

  • 将下方代码复制粘贴到 开发者设置- 自定义CSS
  /*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

未完待续。。。

Last modification:December 28th, 2019 at 06:17 pm
如果觉得我的文章对你有用,请随意赞赏