typecho博客魔改常用代码
所有代码我已经使用过，非常酷炫耶
博客独立页面（跳转）
<?php
/**
* _主题命名
*
* @package custom
*
*/$this->need('header.php');
?>
<html>
<body>
<meta http-equiv="refresh" content="0.1;url=www.baidu.com">
</body>
</html> <?php
/**
* 网盘
*
* @package custom
*
*/$this->need('header.php');
?>
<?php header("location:http://cunchu.sqdxwz.com/") ?> 博客背景彩带特效
footer
<script>
!
function() {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", .5),
c: n(i, "color", "0,0,0"),
n: n(i, "count", 99)
}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function(i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}),
x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l,
m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
e("body")[0].appendChild(m),
o(),
window.onresize = o,
window.onmousemove = function(n) {
n = n || window.event,
y.x = n.clientX,
y.y = n.clientY
},
window.onmouseout = function() {
y.x = null,
y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]),
setTimeout(function() {
i()
},
100)
} ();
</script>博客侧边栏通缉令代码
footer
/*
<div id="tan" style="position:fixed;top:170px;right:0px;z-index:999;"> <a href="https://ws3.sinaimg.cn/large/006gFOhdgy1fyx2v170c1j30gl0l0jvo.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><a href="https://ws3.sinaimg.cn/large/006gFOhdgy1fyx2v170c1j30gl0l0jvo.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://ws3.sinaimg.cn/large/006gFOhdgy1fyx2v170c1j30gl0l0jvo.jpg" width="80" height="100" class="img-responsive"></a>通缉令</a><br> <samp style="margin-left: 15px; color: red;" type="button" onclick="document.getElementById('tan').style.display='none';"><big>×</big></div>
*/网站不允许右键代码
footer
<body onselectstart="return false;" oncontextmenu="alert('就是不让你按鼠标右键！');return false;" onkeydown="if(event.keyCode==27) return false;">
<script type="text/javascript">
document.onmousedown = click; //绑定禁用鼠标右键事件
document.onkeydown = ctrl_key; //绑定禁用键盘事件
function click() {
if (event.button == 2) //单击的鼠标键为右键
{
alert('就是不让你按鼠标右键！');
return false;
}
}
function ctrl_key() {
if (event.keyCode == 17) { //禁用CTRL+S 保存网页代码
window.alert("就是不让你按鼠标右键！");
return false;
}
if (event.keyCode == 123) { //禁用F12查看源代码
alert('就是不让你按鼠标右键！');
return false;
}
}
</script>初音未来音乐播放器代码
footer
<!--初音未来开始-->
<div id="audio"class="music">
<a href="http://ku.oioweb.cn/img/weimusic1.gif" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="http://ku.oioweb.cn/img/weimusic1.gif" width="60px" height="60px" id="d" onclick="c();"></a>
</div>
<audio id="music"src="//音乐外链"controls="controls"preload="none"hidden></audio>
<link href="http://ku.oioweb.cn/css/music.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ku.oioweb.cn/js/music.js"type="text/javascript"></script>
<!--初音未来结束-->博客鼠标线代码
footer
<script>
(function(name, factory) {
if (typeof window === "object") {
window[name] = factory()
}
})("Ribbons", function() {
var _w = window,
_b = document.body,
_d = document.documentElement;
var random = function() {
if (arguments.length === 1) {
if (Array.isArray(arguments[0])) {
var index = Math.round(random(0, arguments[0].length - 1));
return arguments[0][index]
}
return random(0, arguments[0])
} else if (arguments.length === 2) {
return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
}
return 0
};
var screenInfo = function(e) {
var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
return {
width: width,
height: height,
ratio: width / height,
centerx: width / 2,
centery: height / 2,
scrollx: scrollx,
scrolly: scrolly
}
};
var mouseInfo = function(e) {
var screen = screenInfo(e),
mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
return {
mousex: mousex,
mousey: mousey,
centerx: mousex - screen.width / 2,
centery: mousey - screen.height / 2
}
};
var Point = function(x, y) {
this.x = 0;
this.y = 0;
this.set(x, y)
};
Point.prototype = {
constructor: Point,
set: function(x, y) {
this.x = x || 0;
this.y = y || 0
},
copy: function(point) {
this.x = point.x || 0;
this.y = point.y || 0;
return this
},
multiply: function(x, y) {
this.x *= x || 1;
this.y *= y || 1;
return this
},
divide: function(x, y) {
this.x /= x || 1;
this.y /= y || 1;
return this
},
add: function(x, y) {
this.x += x || 0;
this.y += y || 0;
return this
},
subtract: function(x, y) {
this.x -= x || 0;
this.y -= y || 0;
return this
},
clampX: function(min, max) {
this.x = Math.max(min, Math.min(this.x, max));
return this
},
clampY: function(min, max) {
this.y = Math.max(min, Math.min(this.y, max));
return this
},
flipX: function() {
this.x *= -1;
return this
},
flipY: function() {
this.y *= -1;
return this
}
};
var Factory = function(options) {
this._canvas = null;
this._context = null;
this._sto = null;
this._width = 0;
this._height = 0;
this._scroll = 0;
this._ribbons = [];
this._options = {
colorSaturation: "80%",
colorBrightness: "60%",
colorAlpha: 0.65,
colorCycleSpeed: 6,
verticalPosition: "center",
horizontalSpeed: 150,
ribbonCount: 5,
strokeSize: 5,
parallaxAmount: -0.5,
animateSections: true
};
this._onDraw = this._onDraw.bind(this);
this._onResize = this._onResize.bind(this);
this._onScroll = this._onScroll.bind(this);
this.setOptions(options);
this.init()
};
Factory.prototype = {
constructor: Factory,
setOptions: function(options) {
if (typeof options === "object") {
for (var key in options) {
if (options.hasOwnProperty(key)) {
this._options[key] = options[key]
}
}
}
},
init: function() {
try {
this._canvas = document.createElement("canvas");
this._canvas.style["display"] = "block";
this._canvas.style["position"] = "fixed";
this._canvas.style["margin"] = "0";
this._canvas.style["padding"] = "0";
this._canvas.style["border"] = "0";
this._canvas.style["outline"] = "0";
this._canvas.style["left"] = "0";
this._canvas.style["top"] = "0";
this._canvas.style["width"] = "100%";
this._canvas.style["height"] = "100%";
this._canvas.style["z-index"] = "-1";
this._onResize();
this._context = this._canvas.getContext("2d");
this._context.clearRect(0, 0, this._width, this._height);
this._context.globalAlpha = this._options.colorAlpha;
window.addEventListener("resize", this._onResize);
window.addEventListener("scroll", this._onScroll);
document.body.appendChild(this._canvas)
} catch (e) {
console.warn("Canvas Context Error: " + e.toString());
return
}
this._onDraw()
},
addRibbon: function() {
var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
stop = 1000,
hide = 200,
min = 0 - hide,
max = this._width + hide,
movex = 0,
movey = 0,
startx = dir === "right" ? min : max,
starty = Math.round(random(0, this._height));
if (/^(top|min)$/i.test(this._options.verticalPosition)) {
starty = 0 + hide
} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
starty = this._height / 2
} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
starty = this._height - hide
}
var ribbon = [],
point1 = new Point(startx, starty),
point2 = new Point(startx, starty),
point3 = null,
color = Math.round(random(0, 360)),
delay = 0;
while (true) {
if (stop <= 0) break;
stop--;
movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
point3 = new Point();
point3.copy(point2);
if (dir === "right") {
point3.add(movex, movey);
if (point2.x >= max) break
} else if (dir === "left") {
point3.subtract(movex, movey);
if (point2.x <= min) break
}
ribbon.push({
point1: new Point(point1.x, point1.y),
point2: new Point(point2.x, point2.y),
point3: point3,
color: color,
delay: delay,
dir: dir,
alpha: 0,
phase: 0
});
point1.copy(point2);
point2.copy(point3);
delay += 4;
color += this._options.colorCycleSpeed
}
this._ribbons.push(ribbon)
},
_drawRibbonSection: function(section) {
if (section) {
if (section.phase >= 1 && section.alpha <= 0) {
return true
}
if (section.delay <= 0) {
section.phase += 0.02;
section.alpha = Math.sin(section.phase) * 1;
section.alpha = section.alpha <= 0 ? 0 : section.alpha;
section.alpha = section.alpha >= 1 ? 1 : section.alpha;
if (this._options.animateSections) {
var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
if (section.dir === "right") {
section.point1.add(mod, 0);
section.point2.add(mod, 0);
section.point3.add(mod, 0)
} else {
section.point1.subtract(mod, 0);
section.point2.subtract(mod, 0);
section.point3.subtract(mod, 0)
}
section.point1.add(0, mod);
section.point2.add(0, mod);
section.point3.add(0, mod)
}
} else {
section.delay -= 0.5
}
var s = this._options.colorSaturation,
l = this._options.colorBrightness,
c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
this._context.save();
if (this._options.parallaxAmount !== 0) {
this._context.translate(0, this._scroll * this._options.parallaxAmount)
}
this._context.beginPath();
this._context.moveTo(section.point1.x, section.point1.y);
this._context.lineTo(section.point2.x, section.point2.y);
this._context.lineTo(section.point3.x, section.point3.y);
this._context.fillStyle = c;
this._context.fill();
if (this._options.strokeSize > 0) {
this._context.lineWidth = this._options.strokeSize;
this._context.strokeStyle = c;
this._context.lineCap = "round";
this._context.stroke()
}
this._context.restore()
}
return false
},
_onDraw: function() {
for (var i = 0, t = this._ribbons.length; i < t; ++i) {
if (!this._ribbons[i]) {
this._ribbons.splice(i, 1)
}
}
this._context.clearRect(0, 0, this._width, this._height);
for (var a = 0; a < this._ribbons.length; ++a) {
var ribbon = this._ribbons[a],
numSections = ribbon.length,
numDone = 0;
for (var b = 0; b < numSections; ++b) {
if (this._drawRibbonSection(ribbon[b])) {
numDone++
}
}
if (numDone >= numSections) {
this._ribbons[a] = null
}
}
if (this._ribbons.length < this._options.ribbonCount) {
this.addRibbon()
}
requestAnimationFrame(this._onDraw)
},
_onResize: function(e) {
var screen = screenInfo(e);
this._width = screen.width;
this._height = screen.height;
if (this._canvas) {
this._canvas.width = this._width;
this._canvas.height = this._height;
if (this._context) {
this._context.globalAlpha = this._options.colorAlpha
}
}
},
_onScroll: function(e) {
var screen = screenInfo(e);
this._scroll = screen.scrolly
}
};
return Factory
});
new Ribbons({
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
});
</script>树叶飘落代码
footer
<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdn.mom1.cn/1/su.js"></script>
<script type="text/javascript">jQuery(document).ready(function($){
$('body').wpSuperSnow({
flakes: ['https://cdn.mom1.cn/1/007.png','https://cdn.mom1.cn/1//006.png','https://cdn.mom1.cn/1//004.png','https://cdn.mom1.cn/1/002.png','https://cdn.mom1.cn/1/001.png','https://cdn.mom1.cn/1/003.png','https://cdn.mom1.cn/1/002.png','https://cdn.mom1.cn/1/001.png'],
totalFlakes: '290',
zIndex: '999999',
maxSize: '30',
maxDuration: '20',
useFlakeTrans: false
});
});</script>在线人数统计
header
<?php
//首先你要有读写文件的权限，首次访问肯不显示，正常情况刷新即可
$online_log = "slzxrs.dat"; //保存人数的文件到根目录,
$timeout = 30;//30秒内没动作者,认为掉线
$entries = file($online_log);
$temp = array();
for ($i=0;$i<count($entries);$i++){
$entry = explode(",",trim($entries[$i]));
if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
}
}
array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
$slzxrs = count($temp); //计算在线人数
$entries = implode("",$temp);
//写入文件
$fp = fopen($online_log,"w");
flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
fputs($fp,$entries);
flock($fp,LOCK_UN);
fclose($fp);
$tj= "在线人数：".$slzxrs."人";
?>调用：
<?php echo $tj?>网页标题变换代码
header
<div id="blink">
<strong>
<div align="left" style="text-align:center;">
你不看我我就变脸
</div>
</strong><strong>
<script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.split("|"); document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()",200); </script>
</strong>
</div>滚动鼓励来访代码
index
<aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
<div class="textwidget widget-text">
<style type="text/css">
#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1
div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1
div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}
</style>
<div id="container-box-1">
<div class="container-box-1-1">
坚持每天来逛逛，会让你
</div>
<div id="flip-box-1">
<div>
<div class="flip-box-1-1">
工作也轻松了！
</div>
</div>
<div>
<div class="flip-box-1-2">
生活也美好了！
</div>
</div>
<div>
<div class="flip-box-1-3">
心情也舒畅了！
</div>
</div>
<div>
<div class="flip-box-1-4">
走路也有劲了！
</div>
</div>
<div>
<div class="flip-box-1-5">
腿也不痛了！
</div>
</div>
<div>
<div class="flip-box-1-6">
腰也不酸了！
</div>
</div>
<div>
<div class="flip-box-1-1">
工作也轻松了！
</div>
</div>
</div>
<div class="container-box-1-2">
你好我也好，不要忘记哦！
</div>
</div>
</div>
<div class="clear">
</div>
</aside>打赏代码
post
<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;">
<button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
<span>打赏</span></button>
<div id="QR" style="display: none;">
<div id="wechat" style="display: inline-block">
<a class="fancybox" rel="group">
<img id="wechat_qr" src="https://ws3.sinaimg.cn/large/006gFOhdgy1fywxegr9njj30wg0p2q5w.jpg" alt="WeChat Pay"></a>
<p>微信打赏</p>
</div>
<div id="alipay" style="display: inline-block">
<a class="fancybox" rel="group">
<img id="alipay_qr" src="https://ws3.sinaimg.cn/large/006gFOhdgy1fywxeuzpg6j30tu0srq62.jpg" alt="Alipay"></a>
<p>支付宝打赏</p>
</div>
</div>
</div>愚人节彩蛋代码
footer
<script>
if (!mkReaddata("fool")) { // 如果没有触发过彩蛋
document.body.classList.add('mk-fool-egg'); // 给 body 增加彩蛋 class
window.setTimeout(function () { // 定时退出彩蛋
mkSavedata("fool", "fool"); // 记录彩蛋已被执行
alert("恭喜发现愚人节彩蛋 :)"); // 弹窗（这里可以自己发挥）
document.body.classList.remove('mk-fool-egg');
}, 5000); // 这里的 5000 代表 5s，也就是经过 5s 后弹窗，并退出彩蛋
}
// 写入 Cookie
function mkSavedata(key, data) {
key = 'mk_' + key;
data = JSON.stringify(data);
if (window.localStorage) {
localStorage.setItem(key, data);
}
}
// 读取 Cookie
function mkReaddata(key) {
if (!window.localStorage) return '';
key = 'mk_' + key;
return JSON.parse(localStorage.getItem(key));
}
</script>
<style>
/* 彩蛋的样式代码 */
.mk-fool-egg {
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: skew(0deg, 180deg) scale(-1, 1);
filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style> 联系我代码
<foot id="foot" class="foot">
<h1 class="foot_title">联系我</h1>
<div class="foot_info_main">
<ul>
<li class="github_items">
<a href="https://github.com/" target="_blank">Github</a>
</li>
<li class="google_items">
<a href="http://www.google.cn/" target="_blank">Google+</a>
</li>
<li class="twitter_items">
<a href="https://gitee.com/userwzz/events" target="_blank">码云</a>
</li>
<li class="facebook_items">
<a href="https://www.csdn.net/" target="_blank">CSDN</a>
</li>
<li class="weibo_items">
<a href="https://weibo.com/5847555382/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank">微博</a>
</li>
<li class="zhihu_items">
<a href="https://www.zhihu.com/people/wang-rong-sheng-74/activities" target="_blank">知乎</a>
</li>
<li class="blog_items">
<a href="http://boke.sqdxwz.com" target="_blank">博客</a>
</li>
<li class="email_items">
<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=603329354@qq.com" target="_blank">邮箱</a>
</li>
<div class="clear"></div>
</ul>
<div class="qrcode_div">进度条代码
<div class="box02_content box_content">
<div id='bar_container' class="bar_container">
<div class='bar mint' data-percent='20' data-skill='HTML5+CSS3+JavaScript'></div>
<div class='bar red' data-percent='30' data-skill='PHP'></div>
<div class='bar lila' data-percent='20' data-skill='Python'></div>
<div class='bar orange' data-percent='10' data-skill='C'></div>
</div>网站背景音乐代码
<audio controls autoplay loop>
<source src="music/起风了3.mp3" type="audio/mpeg">
<!--音乐文件路径自己写-->
</audio>萌萌哒鼠标代码特效
</div>
</footer>
<script type='text/javascript' src='http://blog.u1f.cn/templets/shu/js/jquery.fancybox.pack.js'></script>
<style type="text/css">
body {
cursor: url(http://blog.u1f.cn/templets/shu/css/1.cur), auto;
}
a:hover {
cursor: url(http://blog.u1f.cn/templets/shu/css/1_1.cur), auto;
}
</style>
</div>点击爆炸效果<script type="text/javascript"
src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type='text/javascript'
src='https://www.jefsky.com/usr/plugins/HoerMouse/static/js/fireworks.js'></script>
<script type='text/javascript'
src='https://www.jefsky.com/usr/plugins/Svg3dTagCloud/static/jquery.svg3dtagcloud.min.js'> 。
</script>以上为 JS 代码，在网页内添加如下代码即可实现
<canvas id="fireworks"
style="position:fixed;left:0;top:0;pointer-events:none;"></canvas>点击爱心特效
<script type="text/javascript">
/ 网页鼠标点击特效（爱心）- Catbei/
!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el),
s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013,
s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y +
"px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," +
s[e].scale + ") rotate(45deg);background:" + s[e].color +
";z-index:99999");requestAnimationFrame(r)}function n() {var t =
"function" == typeof e.onclick && e.onclick;e.onclick = function (e)
{t && t(), o(e)}}function o(e) {var a =
t.createElement("div");a.className = "heart", s.push({el: a,x:
e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}),
t.body.appendChild(a)}function i(e) {var a =
t.createElement("style");a.type = "text/css";try
{a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText =
e}t.getElementsByTagName("head")[0].appendChild(a)}function c()
{return "rgb(" + (255 Math.random()) + "," + (255
Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s =
[];e.requestAnimationFrame = e.requestAnimationFrame ||
e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame ||
e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e)
{setTimeout(e, 1e3 / 60)}, i(".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:
fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(),
r()}(window, document); </script>变色字体
!!! <font color="#a416af"> 你看这段基佬紫颜色，是不是充满了视觉压迫力？</font> !!!变大小的变色字体
!!! <font color="#117113" style="font-weight:600;"> 我还可以让它变绿，再粗壮一点！</font>!!!带背景的变色字体
!!! <div
style="width:250px;height:100px;background:#000;text-align:center;line-height:100px;">
<p><font color="#e6de22"> 黄不黄 </font></p> </div> !!!点击核心价值观特效
<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": 99999999999999999999999999999999999, "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> <script
type="text/javascript">如果出现不显示效果的情况，因为此代码基于 jquery，请在网页头部加入如下代码：
<scriptsrc="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>网站运行时间
footer
<span id="runtime_span"></span> <script
type="text/javascript">function
show_runtime(){window.setTimeout("show_runtime()",1000);X=new
Date("10/16/2017 5:22:00"); Y=new
Date();T=(Y.getTime()-X.getTime());M=246060*1000;
a=T/M;A=Math.floor(a);b=(a-A)24;B=Math.floor(b);c=(b-B)60;C=Math.floor((b-B)60);D=Math.floor((c-C)60);
runtime_span.innerHTML=" 本站勉强运行:
"+A+" 天 "+B+" 小时 "+C+" 分 "+D+" 秒 "} show_runtime ();</script>网站诗词一言
直接去复制：https://www.jinrishici.com/
网站话语一言
直接去复制：https://hitokoto.cn/
复制版权提醒代码
footer
<script>
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
setClipboardText(e);
alert('商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。');
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
+ '作者：<?php $this->author() ?><br>'
+ '链接：' + window.location.href + '<br>'
+ '来源：<?php $this->options->siteUrl(); ?><br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
+ '作者：<?php $this->author() ?>\n'
+ '链接：' + window.location.href + '\n'
+ '来源：<?php $this->options->siteUrl(); ?>\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
</script>站点提醒代码
footer
<script>
notie({
type: 'info',
text: '<?php $this->archiveTitle(array(
'post' =>_t('欢迎阅读<strong>《 %s 》</strong>'),
'page' =>_t('<strong> %s </strong>'),
'category'=>_t('分类<strong> %s </strong>下的文章'),
'search'=>_t('包含关键字<strong> %s </strong>的文章'),
'tag' =>_t('标签<strong> %s </strong>下的文章'),
'author'=>_t('<strong> %s </strong>的主页')
), '', ''); ?>',
autoHide: true
})
</script>返回顶部代码
<SCRIPT language=JavaScript>
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>网站夜间模式
<!--夜间模式>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
new Darkmode().showWidget();
</script-->动态地球访客
直接去复制：https://www.revolvermaps.com/?target=gallery
网站实时闲聊
直接去复制：https://www.xianliao.me/
历史上的几天
直接去复制：http://www.todayonhistory.com/
网站弹窗代码
<div class="container">
<div class="dialog">
<div class="content">
雨滴资源网
</div>
</div>
</div>
CSS代码：
.container{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.container:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}点击语句效果
<script>
jQuery(document).ready(function($) {
$("html,body").click(function(e){
var dfs=[
"您刚才的点击使计生局放开了"+Math.floor(Math.random()*100)+"胎政策。",
"您刚才的点击使黄石超级火山爆发了",
"您刚才的点击使罗辑又换了一个女朋友",
"您刚才的点击使小米公司收购了高通公司",
"您刚才的点击引爆了"+Math.random()*10000+"光年外的一颗恒星",
"您刚才的点击使头发变得乌黑浓密了",
"您刚才的点击使您的波函数坍塌了",
"您刚才的点击使您的银行卡被盗刷了",
"您刚才的点击使普朗克常数扩大了十倍",
"您刚才的点击熄灭了蓝色空间号二号主引擎",
"您刚才的点击创造了一个小宇宙",
"您刚才的点击使宇宙由开放转为闭合",
"您刚才的点击让云天明和关一帆在一起了",
"您刚才的点击使三体第"+Math.floor(Math.random()*100)+"舰队起航了",
"您刚才的点击使第"+Math.floor(Math.random()*10000)+"号宇宙毁灭了",
"您刚才的点击向太阳发射了一颗光粒",
"您刚才的点击导致三体行星撞上他的主星",
"您刚才的点击令人类文明将在"+(new Date()).getFullYear()+"年"+((new Date()).getMonth()+1)+"月"+(new Date()).getUTCDate()+"日23:59:59毁灭",
"您刚才的点击启动了威慑系统",
"您刚才的点击使谢顿计划脱离了正轨",
"您刚才的点击使程心按下了威慑开关",
"您刚才的点击引起了"+Math.random()*10000+"光年外一个行星的爆炸",
"您刚才的点击使宇宙中产生了一些暗物质",
"您刚才的点击引起了所有行星上的地震",
"您刚才的点击使一台诺基亚摔碎了",
"您刚才的点击使360云盘倒闭了",
"您刚才的点击小米发布了MIX概念手机",
"千万不要再次点击鼠标",
"真的千万不要再次点击鼠标"
];
var n=Math.floor(Math.random() * dfs.length + 1)-1; //随机获取一条数据
var $i=$("<p/>").text(dfs[n]); //新建一个b标签，并显示随机的话语
var x=e.pageX,y=e.pageY; //获取鼠标点击的x，和y
$i.css({ //为标签赋予css值
"z-index":99999,
"top":y-20,
"left":x,
"position":"absolute",
"color":"#E94F06",
"font-family":"微软雅黑",
"cursor":"default",
"-moz-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select": "none",
"-khtml-user-select": "none",
"user-select": "none",
});
$("body").append($i); //在尾部插入
$i.animate( {"top":y-180,"opacity":0}, 1500, function(){$i.remove();}); //动画消除
e.stopPropagation();
});
});
</script>通知消息代码
<script language="javascript">alert('通知:博主即将下班啦-期待明天的更多精彩-王荣胜!')</script>圣诞节彩蛋代码
<script>
if (!mkReaddata("fool")) { // 如果没有触发过彩蛋
document.body.classList.add('mk-fool-egg'); // 给 body 增加彩蛋 class
window.setTimeout(function () { // 定时退出彩蛋
mkSavedata("fool", "fool"); // 记录彩蛋已被执行
alert("恭喜发现彩蛋 :)"); // 弹窗（这里可以自己发挥）
document.body.classList.remove('mk-fool-egg');
}, 5000); // 这里的 5000 代表 5s，也就是经过 5s 后弹窗，并退出彩蛋
}
// 写入 Cookie
function mkSavedata(key, data) {
key = 'mk_' + key;
data = JSON.stringify(data);
if (window.localStorage) {
localStorage.setItem(key, data);
}
}
// 读取 Cookie
function mkReaddata(key) {
if (!window.localStorage) return '';
key = 'mk_' + key;
return JSON.parse(localStorage.getItem(key));
}
</script>
<style>
/* 彩蛋的样式代码 */
.mk-fool-egg {
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: skew(0deg, 180deg) scale(-1, 1);
filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style> 顶部彩带
添加彩条教程：
- height不要改动，因为图片的高度为4px;
- top为外围距离顶部高度，自行调整。如果你的Div并没有出现距离问题，就不需要。
- Position这里定义的是固定。如果不需要就删除这行。
- Width宽度，如果添加后宽度有异常，请调整这一项。
- Z-index这是层数，越高，也就在其他模块之上。
然后在header.php最下面的 </nav> 前面添加以下代码
<style type="text/css"> #top-img {
background: url(https://ae01.alicdn.com/kf/H640f6d67443943c681b69169525baf49B.gif);
height:4px;
top:0px;
position: fixed;
width:100%;
Z-index:9999;
} </style>
<div id="top-img"></div>网站时间不同的问候语
<div class="sidebar">
<div class="widget widget_ui_textads widget_twitter"><a class="style01"><strong>温馨提示：</strong>
<br><br><font size="2" color="#999">
<script language="JavaScript">
day = new Date( )
nge_Hour = day.getHours( )
var nge_warmprompt = "";
if (nge_Hour == 0)
nge_warmprompt = "现在已经过凌晨了，身体是无价的资本喔，小伙伴早点休息吧！ --王荣胜"
if (nge_Hour == 1)
nge_warmprompt = "凌晨1点多了，工作是永远都做不完的，小伙伴别熬坏身子！ --王荣胜"
if (nge_Hour == 2)
nge_warmprompt = "亲爱的小伙伴该休息了，身体可是革命的本钱啊！ --王荣胜"
if (nge_Hour == 3)
nge_warmprompt = "夜深了，熬夜很容易导致身体内分泌失调，长痘痘的！ --王荣胜"
if (nge_Hour == 4)
nge_warmprompt = "四点过了额(⊙o⊙)…，你明天不学习工作吗？？？ --王荣胜"
if (nge_Hour == 5)
nge_warmprompt = "你知道吗，此时是国内网络速度最快的时候！ --王荣胜"
if (nge_Hour == 6)
nge_warmprompt = "清晨好，这么早就来网站啦，谢谢小伙伴的关注哦，昨晚做的梦好吗？ --王荣胜 "
if (nge_Hour == 7)
nge_warmprompt = "新的一天又开始了，祝你过得快乐! --王荣胜"
if (nge_Hour == 8)
nge_warmprompt = "小伙伴早上好哦，一天之际在于晨，又是美好的一天！ --王荣胜"
if ((nge_Hour == 9) || (nge_Hour ==10))
nge_warmprompt = "上午好！今天你看上去好精神哦！ --王荣胜"
if (( nge_Hour == 11) || (nge_Hour == 12))
nge_warmprompt = "小伙伴啊！该吃午饭啦！有什么好吃的？您有中午休息的好习惯吗？ --王荣胜"
if (( nge_Hour >= 13) && (nge_Hour <= 17))
nge_warmprompt = "下午好！外面的天气好吗？记得朵朵白云曾捎来朋友殷殷的祝福。 --王荣胜"
if (( nge_Hour >= 17) && (nge_Hour <= 18))
nge_warmprompt = "太阳落山了！快看看夕阳吧！如果外面下雨，就不必了 ^_^ --王荣胜"
if (( nge_Hour >= 18) && (nge_Hour <= 19))
nge_warmprompt = "晚上好，小伙伴今天的心情怎么样？去留言板诉说一下吧！ --王荣胜"
if (( nge_Hour >= 19) && (nge_Hour <= 21))
nge_warmprompt = "忙碌了一天，累了吧？去看看最新的新闻资讯醒醒脑吧！ --王荣胜"
if (( nge_Hour >= 22) && (nge_Hour <= 23))
nge_warmprompt = "这么晚了，小伙伴还在上网？早点洗洗睡吧，睡前记得洗洗脸喔！明天一天都会萌萌哒！ --王荣胜"
document.write("<div><i class='fa fa-beer'></i> ")
document.write(nge_warmprompt)
document.write("</div>")
</script>
</font><br>
</a>
</div>
</div>
</div>网站底部蒲公英代码
<div class="dandelion">
<span class="smalldan"></span>
<span class="bigdan"></span>
</div>
<style type="text/css">
@media screen and (max-width:600px){
.dandelion{display: none !important;}
}
.dandelion .smalldan {
width: 36px;
height: 60px;
left: 88px;
background-position: 0 -90px;
border: 0px solid red;
}
.dandelion span {
-webkit-animation: ball-x 3s linear 2s infinite;
-moz-animation: ball-x 3s linear 2s infinite;
animation: ball-x 3s linear 2s infinite;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
transform-origin: bottom center;
}
.dandelion span {
display: block;
position: fixed;
z-index:9999999999;
bottom: 0px;
background-image: url(https://s2.ax1x.com/2019/08/17/mnS12j.png);
background-repeat: no-repeat;
_background: none;
}
.dandelion .bigdan {
width: 64px;
height: 115px;
left: 41px;
background-position: -86px -36px;
border: 0px solid red;
}
@keyframes ball-x {
0% { transform:rotate(0deg);}
25% { transform:rotate(5deg); }
50% { transform:rotate(0deg);}
75% { transform:rotate(-5deg);}
100% { transform:rotate(0deg);}
}
@-webkit-keyframes ball-x {
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(5deg); }
50% { -webkit-transform:rotate(0deg);}
75% { -webkit-transform:rotate(-5deg);}
100% { -webkit-transform:rotate(0deg);}
}
@-moz-keyframes ball-x {
0% { -moz-transform:rotate(0deg);}
25% { -moz-transform:rotate(5deg); }
50% { -moz-transform:rotate(0deg);}
75% { -moz-transform:rotate(-5deg);}
100% { -moz-transform:rotate(0deg);}
}
</style>网站雪花特效
<script src="https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js"></script>
<script>
var sf = new Snowflakes({
color: "#FFFFFF",
count: 66,
minOpacity: 0.3,
maxOpacity: 1
});
</script>网页摧毁
<a href="javascript:var%20KICKASSVERSION='2.0';
var%20s%20=%20document.createElement('script');
s.type='text/javascript';
document.body.appendChild(s);
s.src='//hi.kickassapp.com/kickass.js';
void(0);" target="_blank" rel="nofollow">
点击开始摧毁
</a>文章最后更新时间
<?php
echo gmdate('Y-m-d H:i:s',
$this->modified + Typecho_Widget::widget('Widget_Options')->timezone);
?>ip签名档
直接调用别人的：
<a href="https://ws234.com/demo/ip/" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="https://ws234.com/demo/ip/" height="150"></a>如果挂掉就自己搭建吧~IP签名档源地址
网站右下角弹窗
footer
<script>
var popNotice = function() {
//获取用户授权状态
if (Notification.permission == "granted") {
var notification = new Notification("Hi,欢迎光临记磊的博客", {
//很明显这是正文
body: '各位小哥哥小姐姐喜欢本站就留言互访吧,我会每天不定时的访问各位的站点。',
//很明显这是图标
icon: 'https://www.ly522.com/yuanlogo.png'
});
//消息被点击事件
notification.onclick = function() {
//alert('别逗了，我们永远都是朋友');
//窗口关闭动作
notification.close();
};
//消息被关闭事件
notification.onclose = function() {
//alert('你不爱我了');
notification.close();
};
//消息出现错误事件
notification.onerror = function() {
alert('上帝也不知道发生了什么');
notification.close();
};
}
};
if (window.Notification) {
if (Notification.permission == "granted") {
popNotice();
}else if( Notification.permission != "denied"){
Notification.requestPermission(function (permission) {
popNotice();
});
}
} else {
alert('浏览器不支持Notification');
}
</script>文字闪动特效
<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>
<div>底部友情链接代码
footer
<?php if($this->is('index')): ?>
<style>
.index-link{margin-top:5px;min-height: initial;border: 1px solid #9eabb3; color: #9eabb3;padding: 5px;border-radius: 3px;}
.index-link a{color: #9eabb3;}
.index-link a:hover{border: 1px solid #9eabb3;border-radius: 3px;margin:0 5px;}
</style>
<div class="post index-link">友情链接：
<a href="https://www.链接.com/" title="标签" target="_blank">站点</a>
<a href="https://www.链接.com/" title="标签" target="_blank">站点</a>
<a href="https://www.链接.com/" title="标签" target="_blank">站点</a>
<a href="https://www.链接.com/" title="标签" target="_blank">站点</a>
</div>
<?php endif; ?>博客加对联
footer
<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}
//alert(diffY);
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//-->
//关闭按钮
function close_left2(){
left2.style.visibility='hidden';
}
function close_right2(){
right2.style.visibility='hidden';
}
//显示样式
document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}");
document.writeln("<\/style>");
//以下为主要内容
document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">");
//------左侧各块开始
//---L2
document.writeln("<div id=\"left2\" class=\"itemFloat\">");
document.writeln("<a href="//www.mantouxia.com/usr/uploads/img/duilianzuo.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img border=0 src=//www.mantouxia.com/usr/uploads/img/duilianzuo.png></a>");
document.writeln("<br><a href=\"javascript:close_left2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------左侧各块结束
document.writeln("<\/div>");
document.writeln("<div id=\"rightDiv\" style=\"top:112px;right:50px\">");
//------右侧各块结束
//---R2
document.writeln("<div id=\"right2\" class=\"itemFloat\">");
document.writeln("<a href="//www.mantouxia.com/usr/uploads/img/duilianyou.png" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img border=0 src=//www.mantouxia.com/usr/uploads/img/duilianyou.png></a>");
document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");
</SCRIPT>博客灯笼代码
- header.php引入css代码：
<link rel="stylesheet" href="https://cdn.idkzr.com/css/xcdl.css" />- 在footer.php中的<\/body>前添加：
<div class="deng-l">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">春</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<div class="deng-r">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">节</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>读书独立页面代码
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style-type: none;
}
html,body{
overflow-x: hidden;
}
#table{
width: 100%;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
#table td{
text-align: center;
transition: all 0.3s;
width: 190px;
height: 50px;
}
#table .blog:hover{
animation: bounce 0.5s;
background-color: cornflowerblue;
}
#table .sever:hover{
background-color: indianred;
animation: rubberBand 0.5s;
}
#table .jc:hover{
background-color: green;
animation: bounceIn 0.5s;
}
#table td:hover a{
color: white;
}
.blog a{
color: cadetblue;
transition: all 0.3s;
}
.sever a{
color: indianred;
transition: all 0.3s;
}
.jc a{
color: green;
transition: all 0.3s;
}
.blog{
border: 1px solid cornflowerblue;
}
.sever{
border: 1px solid indianred;
}
.jc{
border: 1px solid green;
}
#top{
width: 100%;
}
#top img{
width: 10%;
}
#nav{
width: 100%;
height: 50px;
background-color: cadetblue;
margin-bottom: 10px;
}
#nav ul{
width: 100%;
height: 50px;
line-height: 50px;
display: flex;
justify-content: space-around;
text-align: center;
}
#nav ul li{
width: 130px;
height: 100%;
display: inline-block;
transition: all 0.3s;
}
#nav ul li:hover{
background-color: lightblue;
}
#nav a{
color: white;
font-size: 20px;
}
#foot{
width: 100%;
text-align: center;
}
.wz{
border: 1px solid purple;
}
.wz a{
color: purple;
transition: all 0.3s;
}
#table .wz:hover{
background-color: purple;
animation: flipInX 0.5s;
}
.ds{
border: 1px solid palevioletred;
}
.ds a{
color: palevioletred;
transition: all 0.3s;
}
#table .ds:hover{
background-color: palevioletred;
animation: tada 0.5s;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" id="table" class="animated zoomIn">
<!--标题-->
<tr id="one">
<td colspan="6" style="background-color: cornflowerblue;color: white;font-size: 20px;font-weight: bold;border: 2px solid cornflowerblue;">读书第一年(2019/9/14)22:14开始</td>
</tr>
<!--对应的网站链接-->
<tr>
<td class="blog"><a href="###" target="_blank" rel="nofollow">天才在左，疯子在右</a></td>
<td class="blog"><a href="###" target="_blank" rel="nofollow">人间失格</a></td>
<td class="blog"><a href="###" target="_blank" rel="nofollow">鬼谷子</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
<td class="blog"><a href="###" target="_blank">待添加</a></td>
</tr>
<!--标题-->
<tr>
<td colspan="6" style="background-color: indianred;color: white;font-size: 20px;font-weight: bold;border: 2px solid indianred;">读书第二年</td>
</tr>
<tr>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
<td class="sever"><a href="###" target="_blank">待添加</a></td>
</tr>
<!--标题-->
<tr>
<td colspan="6" style="background-color: green;color: white;font-size: 20px;font-weight: bold;border: 2px solid green;">读书第三年</td>
</tr>
<tr>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
<td class="jc"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td colspan="6" style="background-color: purple;color: white;font-size: 20px;font-weight: bold;border: 2px solid purple;">读书第四年</td>
</tr>
<tr>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
<td class="wz"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td colspan="6" style="background-color: palevioletred;color: white;font-size: 20px;font-weight: bold;border: 2px solid palevioletred;">读书第五年</td>
</tr>
<tr>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
</tr>
<tr>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
<td class="ds"><a href="###" target="_blank">待添加</a></td>
</tr>
</table>网站暗黑模式
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
new Darkmode().showWidget();
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
