可用在Typecho上的非常酷炫代码（二）

  1. 首页
  2. Typecho
  3. 正文

可用在TYPECHO上的非常酷炫代码,有些已用过有些还没有测试，大家可以用一下多交流。

鼠标点击核心价值观特效

<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>

如果出现不显示效果的情况，因为此代码基于 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,欢迎光临JinYon的博客", {
//很明显这是正文
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.jinyon.net/" title="标签" target="_blank">博客站点</a>
<a href="https://www.bbmy.net/" title="标签" target="_blank">博客站点</a>
<a href="https://www.yogk.net/" title="标签" target="_blank">博客站点</a>
<a href="https://www.bbcms.net/" 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>

博客灯笼代码

  1. header.php引入css代码：
<link rel="stylesheet" href="https://cdn.idkzr.com/css/xcdl.css" />
  1. 在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;">小说标题(2021/05/04)09:24开始</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>
如果您觉得我的文章有帮助，请随意赞赏！
  1. typecho给代码块添加复制按钮
  2. 可用在Typecho上的非常酷炫代码（一）
  3. 分享两个迅雷下载链接代码
  4. emlog模板制作手册—代码调用
  5. windows 中iis错误代码大汇总

*发表评论

用QQ账号登录  请登录后发表评论