Loading... ## 针对 handsome 所做的具体的代码优化 <div class="tip inlineBlock success"> 建议直接使用插件解决美化问题 [AliceStyle 插件](https://racns.com/374.html) </div> --- ## 首页文章版式圆角化页 css <div class="tip inlineBlock info"> 修改文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS </div> ```css #圆角大小可修改16px数值(别复制该行) /*首页文章版式圆角化*/ .panel{ border: none; border-radius: 16px; } .panel-small{ border: none; border-radius: 16px; } .item-thumb{ border-radius: 16px; } ``` ## 首页文章图片获取焦点放大 css ```css #放大的时间和大小自行修改以下数值(别复制该行) /*首页文章图片获取焦点放大*/ .item-thumb{ cursor: pointer; transition: all 0.6s; } .item-thumb:hover{ transform: scale(1.05); } .item-thumb-small{ cursor: pointer; transition: all 0.6s; } .item-thumb-small:hover{ transform: scale(1.05); } ``` --- ## 首页头像转动并放大 css ```css #转动快慢和头像大小自行修改数值(别复制该行) /*首页头像自动旋转*/ .thumb-lg{ width:130px; } .avatar{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; } .avatar:hover{ transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } #aside-user span.avatar{ animation-timing-function:cubic-bezier(0,0,.07,1)!important; border:0 solid } #aside-user span.avatar:hover{ transform:rotate(360deg) scale(1.2); border-width:5px; animation:avatar .5s } ``` --- ## 首页头像放大并自动旋转 css ```css #旋转速度请修改3s数值(别复制该行) /*首页头像放大并自动旋转*/ .thumb-lg{ width:130px; } @-webkit-keyframes rotation{ from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .img-full{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } ``` --- ## 文章标题居中 css ```css /*文章标题居中*/ .panel h2{ text-align: center; } .post-item-foot-icon{ text-align: center; } ``` --- ## 首页文章版式阴影化 css ```css #阴影颜色修改rgba后面的值 /*panel阴影*/ .panel{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel:hover{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel-small{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } .panel-small:hover{ box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35); } #如果也想使盒子四周也有阴影,加上以下代码 .app.container { box-shadow: 0 0 30px rgba(255, 112, 173, 0.35); } ``` --- ## 自定义滚动条滑块 css ```css /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar{ width: 7px; height: 16px; background-color: rgba(255,255,255,0); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8); border-radius: 10px; background-color: rgba(255,192,203,0.8); } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,191,255,0.8); background-color: #555; ``` --- ## 鼠标点击特效 js ```javascript #字体自行修改 <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); var $i = $("<span/>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "#ff6651" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> ``` --- ## 输入框烟花特效 js ```javascript (function webpackUniversalModuleDefinition(a, b) { if (typeof exports === "object" && typeof module === "object") { module.exports = b() } else { if (typeof define === "function" && define.amd) { define([], b) } else { if (typeof exports === "object") { exports["POWERMODE"] = b() } else { a["POWERMODE"] = b() } } } })(this, function() { return (function(a) { var b = {}; function c(e) { if (b[e]) { return b[e].exports } var d = b[e] = { exports: {}, id: e, loaded: false }; a[e].call(d.exports, d, d.exports, c); d.loaded = true; return d.exports } c.m = a; c.c = b; c.p = ""; return c(0) })([function(c, g, b) { var d = document.createElement("canvas"); d.width = window.innerWidth; d.height = window.innerHeight; d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999"; window.addEventListener("resize", function() { d.width = window.innerWidth; d.height = window.innerHeight }); document.body.appendChild(d); var a = d.getContext("2d"); var n = []; var j = 0; var k = 120; var f = k; var p = false; o.shake = true; function l(r, q) { return Math.random() * (q - r) + r } function m(r) { if (o.colorful) { var q = l(0, 360); return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")" } else { return window.getComputedStyle(r).color } } function e() { var t = document.activeElement; var v; if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) { var u = b(1)(t, t.selectionStart); v = t.getBoundingClientRect(); return { x: u.left + v.left, y: u.top + v.top, color: m(t) } } var s = window.getSelection(); if (s.rangeCount) { var q = s.getRangeAt(0); var r = q.startContainer; if (r.nodeType === document.TEXT_NODE) { r = r.parentNode } v = q.getBoundingClientRect(); return { x: v.left, y: v.top, color: m(r) } } return { x: 0, y: 0, color: "transparent" } } function h(q, s, r) { return { x: q, y: s, alpha: 1, color: r, velocity: { x: -1 + Math.random() * 2, y: -3.5 + Math.random() * 2 } } } function o() { var t = e(); var s = 5 + Math.round(Math.random() * 10); while (s--) { n[j] = h(t.x, t.y, t.color); j = (j + 1) % 500 } f = k; if (!p) { requestAnimationFrame(i) } if (o.shake) { var r = 1 + 2 * Math.random(); var q = r * (Math.random() > 0.5 ? -1 : 1); var u = r * (Math.random() > 0.5 ? -1 : 1); document.body.style.marginLeft = q + "px"; document.body.style.marginTop = u + "px"; setTimeout(function() { document.body.style.marginLeft = ""; document.body.style.marginTop = "" }, 75) } } o.colorful = false; function i() { if (f > 0) { requestAnimationFrame(i); f--; p = true } else { p = false } a.clearRect(0, 0, d.width, d.height); for (var q = 0; q < n.length; ++q) { var r = n[q]; if (r.alpha <= 0.1) { continue } r.velocity.y += 0.075; r.x += r.velocity.x; r.y += r.velocity.y; r.alpha *= 0.96; a.globalAlpha = r.alpha; a.fillStyle = r.color; a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3) } } requestAnimationFrame(i); c.exports = o }, function(b, a) { (function() { var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight", "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", "MozTabSize"]; var e = window.mozInnerScreenX != null; function c(k, l, o) { var h = o && o.debug || false; if (h) { var i = document.querySelector("#input-textarea-caret-position-mirror-div"); if (i) { i.parentNode.removeChild(i) } } var f = document.createElement("div"); f.id = "input-textarea-caret-position-mirror-div"; document.body.appendChild(f); var g = f.style; var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle; g.whiteSpace = "pre-wrap"; if (k.nodeName !== "INPUT") { g.wordWrap = "break-word" } g.position = "absolute"; if (!h) { g.visibility = "hidden" } d.forEach(function(p) { g[p] = j[p] }); if (e) { if (k.scrollHeight > parseInt(j.height)) { g.overflowY = "scroll" } } else { g.overflow = "hidden" } f.textContent = k.value.substring(0, l); if (k.nodeName === "INPUT") { f.textContent = f.textContent.replace(/\s/g, "\u00a0") } var n = document.createElement("span"); n.textContent = k.value.substring(l) || "."; f.appendChild(n); var m = { top: n.offsetTop + parseInt(j["borderTopWidth"]), left: n.offsetLeft + parseInt(j["borderLeftWidth"]) }; if (h) { n.style.backgroundColor = "#aaa" } else { document.body.removeChild(f) } return m } if (typeof b != "undefined" && typeof b.exports != "undefined") { b.exports = c } else { window.getCaretCoordinates = c } }()) }]) }); POWERMODE.colorful = true; POWERMODE.shake = false; document.body.addEventListener("input", POWERMODE); ``` --- ## 显示网站运行了多长时间 ```java <p id="RunTime" style="color:DarkGray;"></p> <script> var BootDate = new Date("2017/09/25 00:00:00"); function ShowRunTime(id) { var NowDate = new Date(); var RunDateM = parseInt(NowDate - BootDate); var RunDays = Math.floor(RunDateM/(24*3600*1000)); var RunHours = Math.floor(RunDateM%(24*3600*1000)/(3600*1000)); var RunMinutes = Math.floor(RunDateM%(24*3600*1000)%(3600*1000)/(60*1000)); var RunSeconds = Math.round(RunDateM%(24*3600*1000)%(3600*1000)%(60*1000)/1000); var RunTime = RunDays + "天" + RunHours + "时" + RunMinutes + "分" + RunSeconds + "秒"; document.getElementById(id).innerHTML = "小俊博客在风风雨雨中勉勉强强已运行:" + RunTime; } setInterval("ShowRunTime('RunTime')", 1000); </script> ``` --- ## 给博客左上角添加帧数显示 js ```java $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); var showFPS = (function(){ var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60); }; var e,pe,pid,fps,last,offset,step,appendFps; fps = 0; last = Date.now(); step = function(){ offset = Date.now() - last; fps += 1; if( offset >= 1000 ){ last += offset; appendFps(fps); fps = 0; } requestAnimationFrame( step ); }; appendFps = function(fps){ console.log(fps+'FPS'); $('#fps').html(fps+'FPS'); }; step(); })(); ``` --- ## 给博客添加欢迎信息来源 js ```java window.onload=function(){ //当窗口加载完毕后执行 var a = document.createElement("a"); //通过指定名称创建一个元素 a.href = document.referrer //获取网站来源地址 var so = a.hostname; //获取来源主机名 var name = a.hostname.split(".")[1]; //去除掉域名前后缀 switch (name) { case 'bing': so = '必应搜索' //返回so内容 break; case 'baidu': so = '百度搜索' //返回so内容 break; case 'so': so = '360搜索' //返回so内容 break; case 'google': so = '谷歌搜索' //返回so内容 break; case 'sm': so = '神马搜索' //返回so内容 break; case 'sogou': so = '搜狗搜索' //返回so内容 break; default: so = a.hostname; //没有来源地址返回 } var msg = '欢迎来自'+ so + '朋友!'; alert(msg); }; ``` --- ## 一言打字特效 ```java function typedword(){ $.ajax({ type:"get", url:"https://api.gqink.cn/api/page/love", data:{page:'index'}, async:true, success:function(word){ var list = []; for(var i = 0 ;i < word.data.length ; i++){ list.push(word.data[i]['word']); } $("#word").typed({ strings: list, typeSpeed: 20, loop: true, backDelay: 3000, }); } }); } ``` --- ## 百度统计代码 js ```java var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f086e97a314f3f2760842a7544e54989"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); ``` --- ## 打字爱心特效 ```java /点击爱心特效 (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; }})(window,document); ``` 最后修改:2020 年 08 月 27 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 哇卡哇卡