typecho部落格魔改常用程式碼
- 2020 年 3 月 13 日
- 筆記
所有程式碼我已經使用過，非常酷炫耶
部落格獨立頁面（跳轉）
<?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 protected]" 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(); ?>nn' + 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/[email protected]/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/[email protected]/lib/darkmode-js.min.js"></script> <script> new Darkmode().showWidget(); </script>
