针对 handsome 所做的具体的代码优化
建议直接使用插件解决美化问题 AliceStyle 插件
首页文章版式圆角化页 css
修改文章版式，包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS
#圆角大小可修改16px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 16px;
}
.panel-small{
border: none;
border-radius: 16px;
}
.item-thumb{
border-radius: 16px;
}首页文章图片获取焦点放大 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
#转动快慢和头像大小自行修改数值(别复制该行)
/*首页头像自动旋转*/
.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
#旋转速度请修改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
/*文章标题居中*/
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}首页文章版式阴影化 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
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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
#字体自行修改
<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
(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);显示网站运行了多长时间
<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
$('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
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);
};一言打字特效
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
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);
})();打字爱心特效
/点击爱心特效
(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);
