handsome主题
1、盒子美化
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可[/scode]
[collapse status="false" title="点击查看CSS
"]
@charset "utf8";.entry-content{background-color:transparent}
.panel-small .post-meta{padding:25px 30px 15px 25px!important}
.panel-small .pos50t-meta{padding-left:25px;padding-right:25px}
.b-light{border-color:#bbb4}
.tip:before{margin-top:0!important}
.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small{transition:all .2s;box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2)!important}
.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover{box-shadow:1px 1px 5px 5px rgba(0,160,0,0.5)!important}
.list-group-item{background-color:rgba(255,255,255,0)}
.thumb-lg{width:130px}
#widget-tabs-4-comments .list-group-item,#tag_toc,#sidebar,#post-content{background-color:transparent!important}
#alllayout.app-aside-folded .tooltip{display:none!important}
.standpage{width:100%;height:calc(100% - 50px);position:fixed;top:50px;left:0}
.standpage,aside,aside *{transition:all .3s}
.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result{max-width:800px;margin-left:auto;margin-right:auto}
.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb{background-color:rgba(255,255,255,.3)}
.wrapper-md article,.wrapper-md>#comments{border-radius:15px;overflow:hidden}
.bg-auto:before{bottom:51px}
.blog-post>.panel,.blog-post>.panel-small{border:0;border-radius:15px}
.index-post-img,.index-post-img-small{border-top-left-radius:5px;border-top-right-radius:5px;overflow:hidden}
.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a{transition:all .2s}
.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small{transform:scale(1.05)}
.streamline{margin-left:20px;padding-right:10px}
.streamline .comment-body{position:relative}
.streamline .comment-body .m-l-lg:before{content:" ";position:absolute;width:calc(100%+10px);height:calc(100%+20px);top:-10px;left:0;z-index:-1;border-radius:2px}
aside.col.w-md.no-border-xs{transition:all .3s}
.visible-xs-inline{display:inline-block!important}
@media screen and (min-width:768px) and (max-width:1140px){.visible-xs-inline{display:none!important}
}#kotori{position:absolute;left:-15px;bottom:-15px;max-height:110px;transition:all .3s}
#kotori:hover{left:0;bottom:0}
#kotori.hidekotori{left:-110px;bottom:-110px}
@media screen and (max-width:767px){#kotori{display:none}
.blog-post>.panel:hover .index-post-img .item-thumb{transform:none!important}
}.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children{border-top-width:1px;border-top-style:solid;padding-top:10px}
.max-img{max-height:400px}
.navi-wrap .navi.clearfix>ul.nav{padding-bottom:100px}
.app-aside-folded.navi-wrap{max-height:calc(100% - 50px)}
.skPlayer-name{font-family:"Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif}
html.fancybox-enabled{overflow-y:auto}
.blog-post .post-meta.wrapper-lg{padding-top:15px}
.share,.yellow,.red,.lblue,.green{background-position-y:50%}
body.modal-open{overflow-y:auto;padding-right:0!important}
.reply2view{background-color:transparent;border:solid 1px #bbb}
#content{transition:all .3s}
.OwO .OwO-logo{height:28px}
#tag_toc.fixed #toc{width:100%}
.page-navigator .next a,.page-navigator .prev a{height:31px}
.page-navigator>li:last-child>a,.page-navigator>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
#tooltip-1{width:0;height:0;overflow:hidden}
.tooltip-2{width:0;height:0;border:0}
.item-thumb-small{background-position:left}
@media screen and (min-width:1200px){.sticky{position:absolute;top:10px;left:15px}
.panel .item-thumb{height:300px;cursor:pointer;transition:all .6s}
#post-panel .blog-post{position:relative}
#post-panel .panel{overflow:hidden}
#post-panel .panel .post-meta{position:relative;margin-top:-300px;height:300px;padding-top:133px!important;padding-bottom:0!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel .post-meta,#post-panel .panel-small .post-meta{border-radius:15px}
#post-panel .panel .post-meta *,#post-panel .panel-small .post-meta *{color:#fff!important}
#post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2{text-align:center}
#post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div{transition:all .3s;transform:translateY(-10px);opacity:0}
#post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted{position:absolute;bottom:20px}
#post-panel .panel .post-meta>.line{position:absolute;bottom:40px;width:740px}
#post-panel .panel-small .post-meta>.line{position:absolute;bottom:40px;width:350px}
#post-panel .panel .post-meta>.summary{position:absolute;bottom:60px;width:740px}
#post-panel .panel-small .post-meta>.summary{position:absolute;bottom:60px;width:350px}
#post-panel .panel-small{display:inline-block;height:300px;width:calc(50% - 10px);margin-right:20px}
#post-panel .panel-small:nth-child(2n){margin-right:0}
#post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small{height:100%;width:100%}
#post-panel .panel-small .post-meta{position:absolute;height:300px;width:calc(50% - 10px);padding:133px 20px 0 20px!important;background-color:rgba(0,0,0,.3);transition:all .3s}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{background-color:rgba(0,0,0,.6)}
#post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div{opacity:1;transform:translateY(0)}
#post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta{padding-top:80px!important}
#post-panel .ahover{display:block;position:absolute;top:0;left:0;right:0;bottom:0}
.blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small{filter:blur(3px)}
}header.bg-light.wrapper-md{border:0;text-align:center}
header.wrapper-md *{}
header.wrapper-md h1{font-size:32px}
.link-main{padding:50px 0 50px 20px;text-align:center}
.link-main h3{margin-top:0}
.link-main .item{display:inline-block;letter-spacing:0;margin-right:20px;margin-bottom:20px;width:289px;height:240px;font-size:14px;overflow:hidden;border-radius:15px;border:1px solid #e1e8ed;transition:background .2s}
.link-main .link-bg{position:relative;height:90px;padding:0 1em}
.link-main .link-bg .bg:before{display:block;content:"";position:absolute;left:0;height:100%;width:100%}
.link-main .link-bg .link-avatar{position:absolute;bottom:-50px;border:4px solid #FFF;border-radius:100%;box-shadow:0 0 5px rgba(0,0,0,0.5)}
.link-main .link-bg .link-avatar img{border-radius:100%}
.link-main .avatar{display:block;object-fit:cover}
.link-main .bg,.link-main .link-bg{background-repeat:no-repeat;background-position:center;background-size:cover;display:block}
.link-main .bg{position:absolute;top:0;bottom:0;left:0;right:0;filter:blur(1.5px)}
.link-main .meta{padding:.9em 1em;text-align:right}
.link-main .info{color:#525766;padding:0 1em 1em}
.link-main .info .name{font-weight:600;font-size:16px}
@media screen and (max-width:330px){.link-main{padding:50px 0 50px 0}
.link-main .item{margin-right:0}
}.link-main .item:hover .bg{filter:blur(0.1px)}
#comments pre code{display:inline}
.wrapper-md>#comments{border:solid 1px #fff;padding:10px 30px 20px 30px}
.hideContent{background-color:transparent;padding:10px 0}
.agent{display:inline-block;margin-left:5px;padding:0 3px;border-radius:2px;color:#58666e;font-size:12px;opacity:.8}
img[mw400]{max-width:400px!important;width:100%}
.mw400{max-width:400px}
.alert-warning{text-align:center;border:0;max-width:1100px;margin:0 auto}
textarea#comment{border-radius:15px}
.item-thumb:hover{transform:scale(1.06)}
.img-full{width:100px;border-radius:50%;animation:light 4s ease-in-out infinite;transition:0.5s}
@keyframes light{0%{box-shadow:0 0 4px #f00}
25%{box-shadow:0 0 16px #0f0}
50%{box-shadow:0 0 4px #00f}
75%{box-shadow:0 0 16px #0f0}
100%{box-shadow:0 0 4px #f00}
}.btn-pay{animation:star 0.5s ease-in-out infinite alternate}
@keyframes star{from{transform:scale(1)}
to{transform:scale(1.1)}
}.blog-post .panel:not(article){transition:all 0.3s}
.blog-post .panel:not(article):hover{transform:translateY(-10px);box-shadow:0 8px 10px rgba(73,90,47,0.47)}
[/collapse]
[scode type="green"]在/usr/themes/handsome/libs/Content.php
文件<!--text-muted-->后添加[/scode]
<a href="{$parameterArray['linkUrl']}" class="ahover"></a>
2、头像呼吸光环和悬停旋转
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可[/scode]
/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #f00;
}
25% {
box-shadow: 0 0 16px #0f0;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #0f0;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
/*评论头像旋转*/
.img-circle {
transition: all 0.3s;
}
.img-circle:hover {
transform: rotate(360deg);
}
3、文章内图片悬停放大
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可[/scode]
/*文章内图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
4、文章内打赏图标跳动
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可[/scode]
/*文章内打赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
5、给网站添加加载耗时显示
[scode type="green"]在/usr/themes/handsome/functions.php
末尾添加如下代码[/scode]
//加载耗时
function timer_start() {
global $timestart;
$mtime = explode( ' ', microtime() );
$timestart = $mtime[1] + $mtime[0];
return true;
}
timer_start();
function timer_stop( $display = 0, $precision = 3 ) {
global $timestart, $timeend;
$mtime = explode( ' ', microtime() );
$timeend = $mtime[1] + $mtime[0];
$timetotal = number_format( $timeend - $timestart, $precision );
$r = $timetotal < 1 ? $timetotal * 1000 . " ms" : $timetotal . " s";
if ( $display ) {
echo $r;
}
return $r;
}
[scode type="green"]然后在/usr/themes/handsome/component/sidebar.php
下添加显示代码[/scode]
<li class="list-group-item"> <i class="glyphicon glyphicon-time text-muted"></i> <span class="badge
pull-right"><?php echo timer_stop();?></span><?php _me("加载耗时") ?></li>
6、复制弹框和彩虹标签云
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript
[/scode]
[scode type="yellow"]复制弹框需要将 layer.js 放在/handsome/assets/js/
下[/scode]
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功!');};
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
7、在文章页右侧添加标签云
[scode type="green"]在/usr/themes/handsome/component/sidebar.php
文件的<?php if (IS_TOC): ?>
前添加下面代码[/scode]
<!--在文章页面内显示标签云-->
<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
<h3 class="widget-title m-t-none text-md"><?php _me("标签云") ?></h3>
<div class="tags l-h-2x">
<?php Typecho_Widget::widget('Widget_Metas_Tag_Cloud','ignoreZeroCount=1&limit=30')->to($tags); ?>
<?php if($tags->have()): ?>
<?php while ($tags->next()): ?>
<a href="<?php $tags->permalink();?>" class="label badge" title="<?php $tags->name(); ?>" data-toggle="tooltip"><?php $tags->name(); ?></a>
<?php endwhile; ?>
<?php endif; ?>
</div>
</section>
8、在文章顶部添加百度是否收录
[scode type="red"]这东西误差大,没什么卵用[/scode]
[scode type="green"]在handsome/functions.php
下添加代码[/scode]
/**
* 提示文章百度是否收录
*
*/
function baidu_record() {
$url='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(checkBaidu($url)==1){
echo "百度已收录";
}
else{
echo "<a style=\"color:red;\" rel=\"external nofollow\" title=\"点击提交收录!\" target=\"_blank\" href=\"http://zhanzhang.baidu.com/sitesubmit/index?sitename=$url\">百度未收录</a>";}
}
function checkBaidu($url) {
$url = 'http://www.baidu.com/s?wd=' . urlencode($url);
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$rs = curl_exec($curl);
curl_close($curl);
if (!strpos($rs, '没有找到')) { //没有找到说明已被百度收录
return 1;
} else {
return -1;
}
}
[scode type="green"]然后在handsome/post.php
约80行下添加代码[/scode]
<!--百度收录-->
<li><i class="glyphicon glyphicon-globe"></i> <?php echo baidu_record() ?></li>
9、动态标签页标题
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义输出head头部的HTML代码
即可[/scode]
<!--动态标题-->
<script>var OriginTitile=document.title,titleTime;document.addEventListener("visibilitychange",function(){if(document.hidden){$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你别走吖 Σ(っ °Д °;)っ";clearTimeout(titleTime)}else{$('[rel="shortcut icon"]').attr("href","https://www.cooyf.com/logo.ico");document.title="你可算回来了 (。•ˇ‸ˇ•。)"+OriginTitile;titleTime=setTimeout(function(){document.title=OriginTitile},2000)}});</script>
10、博主介绍动态字体
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至博主的介绍
即可[/scode]
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block">
<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>
</span>
</span>
11、为 Typecho编辑器增加 HTML标签支持
Typecho 默认文章只支持kbd|b|i|strong|em|sup|sub|br|code|del|a|hr|small
这几个标签。
修改/var/HyperDown.php
文件第17行,在现有标签中直接增加新标签即可。
标签之间使用|分隔。
12、给handsome增加更多表情包
下载地址:百度网盘
提取码:9nko
[scode type="green"]1.将表情包图片上传至/usr/themes/handsome/usr/img/emotion
[/scode]
[scode type="green"]2.然后替换或者修改/usr/themes/handsome/usr/OwO.json
[/scode]
[scode type="green"]3.修改/usr/themes/handsome/assets/css/handsome.min.css
表情大小如下:[/scode]
.comment-content-true img {
max-width: 6%!important
}
13、文章标题美化
[scode type="green"]打开后台-外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可[/scode]
/*
* 文章一二三四级标题美化
*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}
14、首页预览头图走cos
/libs/Content.php
第715行左右
$random = THEME_URL . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶,这里可能会导致index not undefined
修改为(xxx填写自己的cos地址):
$random = 'https://xxx/' . 'usr/img/sj/' . @$randomNum[$index] . '.jpg';//如果有文章置顶,这里可能会导致index not undefined
15、超链接美化
删除/usr/themes/handsome/assets/css/handsome.min.css
下原超链接CSS:
.comment-content-true a:hover,.wrapper-lg .entry-content a:not(.nav-link):hover {
color: #222;
border-bottom-color: #222
}
.comment-content-true a,.wrapper-lg .entry-content a:not(.nav-link) {
color: #3f88bf;
border-bottom-color: #222;
border-bottom: 1px solid #3f88bf;
word-wrap: break-word;
word-break: break-all
}
添加如下CSS:
/*超链接特效*/
.comment-content-true a:not(.light-link):not(.nav-link),
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link) {
position: relative;
margin: auto 4px;
color: #23b7e5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: inherit;
width: inherit;
}
.comment-content-true a:not(.light-link):not(.nav-link):hover,
.comment-content-true a:not(.light-link):not(.nav-link):focus,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus {
color: #fff;
}
.comment-content-true a:not(.light-link):not(.nav-link)::before,
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after {
position: absolute;
top: 0;
left: -4px;
z-index: -1;
box-sizing: content-box;
padding: 0 4px;
width: 100%;
height: 100%;
content: '';
}
.comment-content-true a:not(.light-link):not(.nav-link)::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::before {
background-color: #23b7e5;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.comment-content-true a:not(.light-link):not(.nav-link):hover::before,
.comment-content-true a:not(.light-link):not(.nav-link):focus::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):hover::before,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link):focus::before {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.comment-content-true a:not(.light-link):not(.nav-link)::after,
.wrapper-lg .entry-content a:not(.light-link):not(.nav-link)::after {
border-bottom: 1px solid #23b7e5;
}
.content-copyright {
overflow: hidden;
}
16、导航栏输出二级菜单
添加二级菜单字段
在/usr/themes/handsome/component/aside.php
第87行左右$asideItemsOutput = "";
后面添加如下内容:
$asideSecondItemsOutput = "";
修改二级菜单字段判断语句
将101-106行左右
的下列字段:
if (@$itemTarget){
$linkStatus = 'target="'.$itemTarget.'"';
}else{
$linkStatus = 'target="_blank"';
}
if (trim($itemFeather)!==""){
替换为:
if (strtoupper($itemStatus) === 'SEC'){
if (trim($itemFeather)!==""){
$asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'"
class ="auto"><span class="nav-icon"><i data-feather="'.$itemFeather.'"></i></span><span>'._mt($itemName).'</span></a></li>';
}else if (trim($itemClass)!==""){
$asideSecondItemsOutput .= '<li> <a '.$linkStatus.' href="'.$itemLink.'" class ="auto"><span class="nav-icon"><i class="'.$itemClass.'"></i></span><span>'._mt($itemName).'</span></a></li>';
}
}
else if (trim($itemFeather)!==""){
添加二级菜单输出语句
在125行左右
的<?php if (@!in_array('component',$this->options->asideSetting)): ?>
语句上面
添加下列代码:
<?php if (@$asideSecondItemsOutput): ?>
<li><a class="auto"><span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<i class="glyphicon glyphicon-new-window"></i><span><?php _me("外站工具"); ?></span></a><!-- 默认图标与名称,可以随意修改 -->
<ul class="nav nav-sub dk"><li class="nav-sub-header"><a data-no-instant><span><?php _me("外站工具"); ?></span></a></li>
<?php echo @$asideSecondItemsOutput ?>
</ul></li>
<?php endif; ?>
使用方法
{"name":"归档","class":"glyphicon glyphicon-tasks","link":"https://www.cooyf.com/archive.html","target":"_self"},{"name":"PD网页版","class":"glyphicon glyphicon-cloud-download","link":"https://www.baiduwp.com/","status":"sec"},{"name":"百度盘提取码","class":"glyphicon glyphicon-link","link":"https://pnote.net/pan/","status":"sec"},{"name":"磁链转换","class":"glyphicon glyphicon-magnet","link":"http://www.torrent.org.cn/home/index/index.html","status":"sec"},{"name":"局域网传文件","class":"glyphicon glyphicon-transfer","link":"https://www.ssavr.com/","status":"sec"},{"name":"图床","class":"glyphicon glyphicon-picture","link":"https://sm.ms/","status":"sec"},{"name":"音乐解锁","feather":"music","link":"http://unlock.torfirefox.name/","status":"sec"},{"name":"网盘","feather":"hard-drive","link":"https://one.roro666.top/","status":"sec"}
[scode type="green"]"status":"sec"
表示该栏目被当到二级栏目下[/scode]
怕麻烦可以跳过上面
在124行下面,即下面代码下面:
<!-- /主页 -->
<?php endif; ?>
<?php echo @$asideItemsOutput ?>
添加下列代码:
<!--折叠菜单-->
<li>
<a class="auto">
<span class="pull-right text-muted">
<i class="fontello icon-fw fontello-angle-right text"></i>
<i class="fontello icon-fw fontello-angle-down text-active"></i>
</span>
<!--下方为菜单栏图标-->
<i class="glyphicon glyphicon-phone"></i>
<span>
<?php _me( "小游戏"); ?></span>
</a>
<ul class="nav nav-sub dk">
<li class="nav-sub-header">
<a data-no-instant>
<span>
<?php _me( "小游戏"); ?></span>
</a>
</li>
<li>
<a href="https://www.cooyf.com/mikutap/" class="auto" target="_blank">
<span class="nav-icon">
<!--下方为小栏目图标-->
<i data-feather="slack"></i>
</span>
<span>mikutap</span></a>
</li>
</ul>
</li>
<!--/折叠菜单---->
主题2
1、网站存活时间
<script language=javascript>
function siteTime() {
window.setTimeout("siteTime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth()
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
/* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
year - 作为date对象的年份,为4位年份值
month - 0-11之间的整数,做为date对象的月份
day - 1-31之间的整数,做为date对象的天数
hours - 0(午夜24点)-23之间的整数,做为date对象的小时数
minutes - 0-59之间的整数,做为date对象的分钟数
seconds - 0-59之间的整数,做为date对象的秒数
microseconds - 0-999之间的整数,做为date对象的毫秒数 */
var t1 = Date.UTC(2017, 2, 11, 00, 00, 00)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) - diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds)
/* document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒" */
document.getElementById("sitetime").innerHTML = " 很努力地存活了 " + (diffYears * 365 + diffDays) + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"
}
siteTime()
</script>
然后在末尾添加
<span id="sitetime" style="font-size:14px"></span>
存活时间后面添加抖动表情:ღゝ◡╹)ノ♡
<span class="my-face">ღゝ◡╹)ノ♡</span>
最后是CSS
.dark-mode span#sitetime, .dark-mode .my-face {
color: rgba(255, 255, 255, 0.8);
}
.my-face {
animation: my-face 5s infinite ease-in-out;
display: inline-block;
margin: 0 5px
}
@-moz-keyframes my-face {
2%,24%,80% {
-webkit-transform: translate(0,1.5px) rotate(1.5deg);
-moz-transform: translate(0,1.5px) rotate(1.5deg);
-ms-transform: translate(0,1.5px) rotate(1.5deg);
-o-transform: translate(0,1.5px) rotate(1.5deg);
transform: translate(0,1.5px) rotate(1.5deg)
}
4%,68%,98% {
-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
-moz-transform: translate(0,-1.5px) rotate(-.5deg);
-ms-transform: translate(0,-1.5px) rotate(-.5deg);
-o-transform: translate(0,-1.5px) rotate(-.5deg);
transform: translate(0,-1.5px) rotate(-.5deg)
}
38%,6% {
-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
-moz-transform: translate(0,1.5px) rotate(-1.5deg);
-ms-transform: translate(0,1.5px) rotate(-1.5deg);
-o-transform: translate(0,1.5px) rotate(-1.5deg);
transform: translate(0,1.5px) rotate(-1.5deg)
}
8%,86% {
-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
-moz-transform: translate(0,-1.5px) rotate(-1.5deg);
-ms-transform: translate(0,-1.5px) rotate(-1.5deg);
-o-transform: translate(0,-1.5px) rotate(-1.5deg);
transform: translate(0,-1.5px) rotate(-1.5deg)
}
10%,72% {
-webkit-transform: translate(0,2.5px) rotate(1.5deg);
-moz-transform: translate(0,2.5px) rotate(1.5deg);
-ms-transform: translate(0,2.5px) rotate(1.5deg);
-o-transform: translate(0,2.5px) rotate(1.5deg);
transform: translate(0,2.5px) rotate(1.5deg)
}
12%,64%,78%,96% {
-webkit-transform: translate(0,-.5px) rotate(1.5deg);
-moz-transform: translate(0,-.5px) rotate(1.5deg);
-ms-transform: translate(0,-.5px) rotate(1.5deg);
-o-transform: translate(0,-.5px) rotate(1.5deg);
transform: translate(0,-.5px) rotate(1.5deg)
}
14%,54% {
-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
-moz-transform: translate(0,-1.5px) rotate(1.5deg);
-ms-transform: translate(0,-1.5px) rotate(1.5deg);
-o-transform: translate(0,-1.5px) rotate(1.5deg);
transform: translate(0,-1.5px) rotate(1.5deg)
}
16% {
-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
-moz-transform: translate(0,-.5px) rotate(-1.5deg);
-ms-transform: translate(0,-.5px) rotate(-1.5deg);
-o-transform: translate(0,-.5px) rotate(-1.5deg);
transform: translate(0,-.5px) rotate(-1.5deg)
}
18%,22% {
-webkit-transform: translate(0,.5px) rotate(-1.5deg);
-moz-transform: translate(0,.5px) rotate(-1.5deg);
-ms-transform: translate(0,.5px) rotate(-1.5deg);
-o-transform: translate(0,.5px) rotate(-1.5deg);
transform: translate(0,.5px) rotate(-1.5deg)
}
20%,36%,46% {
-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
-moz-transform: translate(0,-1.5px) rotate(2.5deg);
-ms-transform: translate(0,-1.5px) rotate(2.5deg);
-o-transform: translate(0,-1.5px) rotate(2.5deg);
transform: translate(0,-1.5px) rotate(2.5deg)
}
26%,50% {
-webkit-transform: translate(0,.5px) rotate(.5deg);
-moz-transform: translate(0,.5px) rotate(.5deg);
-ms-transform: translate(0,.5px) rotate(.5deg);
-o-transform: translate(0,.5px) rotate(.5deg);
transform: translate(0,.5px) rotate(.5deg)
}
28% {
-webkit-transform: translate(0,.5px) rotate(1.5deg);
-moz-transform: translate(0,.5px) rotate(1.5deg);
-ms-transform: translate(0,.5px) rotate(1.5deg);
-o-transform: translate(0,.5px) rotate(1.5deg);
transform: translate(0,.5px) rotate(1.5deg)
}
30%,40%,62%,76%,88% {
-webkit-transform: translate(0,-.5px) rotate(2.5deg);
-moz-transform: translate(0,-.5px) rotate(2.5deg);
-ms-transform: translate(0,-.5px) rotate(2.5deg);
-o-transform: translate(0,-.5px) rotate(2.5deg);
transform: translate(0,-.5px) rotate(2.5deg)
}
32%,34%,66% {
-webkit-transform: translate(0,1.5px) rotate(-.5deg);
-moz-transform: translate(0,1.5px) rotate(-.5deg);
-ms-transform: translate(0,1.5px) rotate(-.5deg);
-o-transform: translate(0,1.5px) rotate(-.5deg);
transform: translate(0,1.5px) rotate(-.5deg)
}
42% {
-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
-moz-transform: translate(0,2.5px) rotate(-1.5deg);
-ms-transform: translate(0,2.5px) rotate(-1.5deg);
-o-transform: translate(0,2.5px) rotate(-1.5deg);
transform: translate(0,2.5px) rotate(-1.5deg)
}
44%,70% {
-webkit-transform: translate(0,1.5px) rotate(.5deg);
-moz-transform: translate(0,1.5px) rotate(.5deg);
-ms-transform: translate(0,1.5px) rotate(.5deg);
-o-transform: translate(0,1.5px) rotate(.5deg);
transform: translate(0,1.5px) rotate(.5deg)
}
48%,74%,82% {
-webkit-transform: translate(0,-.5px) rotate(.5deg);
-moz-transform: translate(0,-.5px) rotate(.5deg);
-ms-transform: translate(0,-.5px) rotate(.5deg);
-o-transform: translate(0,-.5px) rotate(.5deg);
transform: translate(0,-.5px) rotate(.5deg)
}
52%,56%,60% {
-webkit-transform: translate(0,2.5px) rotate(2.5deg);
-moz-transform: translate(0,2.5px) rotate(2.5deg);
-ms-transform: translate(0,2.5px) rotate(2.5deg);
-o-transform: translate(0,2.5px) rotate(2.5deg);
transform: translate(0,2.5px) rotate(2.5deg)
}
58% {
-webkit-transform: translate(0,.5px) rotate(2.5deg);
-moz-transform: translate(0,.5px) rotate(2.5deg);
-ms-transform: translate(0,.5px) rotate(2.5deg);
-o-transform: translate(0,.5px) rotate(2.5deg);
transform: translate(0,.5px) rotate(2.5deg)
}
84% {
-webkit-transform: translate(0,1.5px) rotate(2.5deg);
-moz-transform: translate(0,1.5px) rotate(2.5deg);
-ms-transform: translate(0,1.5px) rotate(2.5deg);
-o-transform: translate(0,1.5px) rotate(2.5deg);
transform: translate(0,1.5px) rotate(2.5deg)
}
90% {
-webkit-transform: translate(0,2.5px) rotate(-.5deg);
-moz-transform: translate(0,2.5px) rotate(-.5deg);
-ms-transform: translate(0,2.5px) rotate(-.5deg);
-o-transform: translate(0,2.5px) rotate(-.5deg);
transform: translate(0,2.5px) rotate(-.5deg)
}
92% {
-webkit-transform: translate(0,.5px) rotate(-.5deg);
-moz-transform: translate(0,.5px) rotate(-.5deg);
-ms-transform: translate(0,.5px) rotate(-.5deg);
-o-transform: translate(0,.5px) rotate(-.5deg);
transform: translate(0,.5px) rotate(-.5deg)
}
94% {
-webkit-transform: translate(0,2.5px) rotate(.5deg);
-moz-transform: translate(0,2.5px) rotate(.5deg);
-ms-transform: translate(0,2.5px) rotate(.5deg);
-o-transform: translate(0,2.5px) rotate(.5deg);
transform: translate(0,2.5px) rotate(.5deg)
}
0%,100% {
-webkit-transform: translate(0,0) rotate(0);
-moz-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0)
}
}
@-webkit-keyframes my-face {
2%,24%,80% {
-webkit-transform: translate(0,1.5px) rotate(1.5deg);
-moz-transform: translate(0,1.5px) rotate(1.5deg);
-ms-transform: translate(0,1.5px) rotate(1.5deg);
-o-transform: translate(0,1.5px) rotate(1.5deg);
transform: translate(0,1.5px) rotate(1.5deg)
}
4%,68%,98% {
-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
-moz-transform: translate(0,-1.5px) rotate(-.5deg);
-ms-transform: translate(0,-1.5px) rotate(-.5deg);
-o-transform: translate(0,-1.5px) rotate(-.5deg);
transform: translate(0,-1.5px) rotate(-.5deg)
}
38%,6% {
-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
-moz-transform: translate(0,1.5px) rotate(-1.5deg);
-ms-transform: translate(0,1.5px) rotate(-1.5deg);
-o-transform: translate(0,1.5px) rotate(-1.5deg);
transform: translate(0,1.5px) rotate(-1.5deg)
}
8%,86% {
-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
-moz-transform: translate(0,-1.5px) rotate(-1.5deg);
-ms-transform: translate(0,-1.5px) rotate(-1.5deg);
-o-transform: translate(0,-1.5px) rotate(-1.5deg);
transform: translate(0,-1.5px) rotate(-1.5deg)
}
10%,72% {
-webkit-transform: translate(0,2.5px) rotate(1.5deg);
-moz-transform: translate(0,2.5px) rotate(1.5deg);
-ms-transform: translate(0,2.5px) rotate(1.5deg);
-o-transform: translate(0,2.5px) rotate(1.5deg);
transform: translate(0,2.5px) rotate(1.5deg)
}
12%,64%,78%,96% {
-webkit-transform: translate(0,-.5px) rotate(1.5deg);
-moz-transform: translate(0,-.5px) rotate(1.5deg);
-ms-transform: translate(0,-.5px) rotate(1.5deg);
-o-transform: translate(0,-.5px) rotate(1.5deg);
transform: translate(0,-.5px) rotate(1.5deg)
}
14%,54% {
-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
-moz-transform: translate(0,-1.5px) rotate(1.5deg);
-ms-transform: translate(0,-1.5px) rotate(1.5deg);
-o-transform: translate(0,-1.5px) rotate(1.5deg);
transform: translate(0,-1.5px) rotate(1.5deg)
}
16% {
-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
-moz-transform: translate(0,-.5px) rotate(-1.5deg);
-ms-transform: translate(0,-.5px) rotate(-1.5deg);
-o-transform: translate(0,-.5px) rotate(-1.5deg);
transform: translate(0,-.5px) rotate(-1.5deg)
}
18%,22% {
-webkit-transform: translate(0,.5px) rotate(-1.5deg);
-moz-transform: translate(0,.5px) rotate(-1.5deg);
-ms-transform: translate(0,.5px) rotate(-1.5deg);
-o-transform: translate(0,.5px) rotate(-1.5deg);
transform: translate(0,.5px) rotate(-1.5deg)
}
20%,36%,46% {
-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
-moz-transform: translate(0,-1.5px) rotate(2.5deg);
-ms-transform: translate(0,-1.5px) rotate(2.5deg);
-o-transform: translate(0,-1.5px) rotate(2.5deg);
transform: translate(0,-1.5px) rotate(2.5deg)
}
26%,50% {
-webkit-transform: translate(0,.5px) rotate(.5deg);
-moz-transform: translate(0,.5px) rotate(.5deg);
-ms-transform: translate(0,.5px) rotate(.5deg);
-o-transform: translate(0,.5px) rotate(.5deg);
transform: translate(0,.5px) rotate(.5deg)
}
28% {
-webkit-transform: translate(0,.5px) rotate(1.5deg);
-moz-transform: translate(0,.5px) rotate(1.5deg);
-ms-transform: translate(0,.5px) rotate(1.5deg);
-o-transform: translate(0,.5px) rotate(1.5deg);
transform: translate(0,.5px) rotate(1.5deg)
}
30%,40%,62%,76%,88% {
-webkit-transform: translate(0,-.5px) rotate(2.5deg);
-moz-transform: translate(0,-.5px) rotate(2.5deg);
-ms-transform: translate(0,-.5px) rotate(2.5deg);
-o-transform: translate(0,-.5px) rotate(2.5deg);
transform: translate(0,-.5px) rotate(2.5deg)
}
32%,34%,66% {
-webkit-transform: translate(0,1.5px) rotate(-.5deg);
-moz-transform: translate(0,1.5px) rotate(-.5deg);
-ms-transform: translate(0,1.5px) rotate(-.5deg);
-o-transform: translate(0,1.5px) rotate(-.5deg);
transform: translate(0,1.5px) rotate(-.5deg)
}
42% {
-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
-moz-transform: translate(0,2.5px) rotate(-1.5deg);
-ms-transform: translate(0,2.5px) rotate(-1.5deg);
-o-transform: translate(0,2.5px) rotate(-1.5deg);
transform: translate(0,2.5px) rotate(-1.5deg)
}
44%,70% {
-webkit-transform: translate(0,1.5px) rotate(.5deg);
-moz-transform: translate(0,1.5px) rotate(.5deg);
-ms-transform: translate(0,1.5px) rotate(.5deg);
-o-transform: translate(0,1.5px) rotate(.5deg);
transform: translate(0,1.5px) rotate(.5deg)
}
48%,74%,82% {
-webkit-transform: translate(0,-.5px) rotate(.5deg);
-moz-transform: translate(0,-.5px) rotate(.5deg);
-ms-transform: translate(0,-.5px) rotate(.5deg);
-o-transform: translate(0,-.5px) rotate(.5deg);
transform: translate(0,-.5px) rotate(.5deg)
}
52%,56%,60% {
-webkit-transform: translate(0,2.5px) rotate(2.5deg);
-moz-transform: translate(0,2.5px) rotate(2.5deg);
-ms-transform: translate(0,2.5px) rotate(2.5deg);
-o-transform: translate(0,2.5px) rotate(2.5deg);
transform: translate(0,2.5px) rotate(2.5deg)
}
58% {
-webkit-transform: translate(0,.5px) rotate(2.5deg);
-moz-transform: translate(0,.5px) rotate(2.5deg);
-ms-transform: translate(0,.5px) rotate(2.5deg);
-o-transform: translate(0,.5px) rotate(2.5deg);
transform: translate(0,.5px) rotate(2.5deg)
}
84% {
-webkit-transform: translate(0,1.5px) rotate(2.5deg);
-moz-transform: translate(0,1.5px) rotate(2.5deg);
-ms-transform: translate(0,1.5px) rotate(2.5deg);
-o-transform: translate(0,1.5px) rotate(2.5deg);
transform: translate(0,1.5px) rotate(2.5deg)
}
90% {
-webkit-transform: translate(0,2.5px) rotate(-.5deg);
-moz-transform: translate(0,2.5px) rotate(-.5deg);
-ms-transform: translate(0,2.5px) rotate(-.5deg);
-o-transform: translate(0,2.5px) rotate(-.5deg);
transform: translate(0,2.5px) rotate(-.5deg)
}
92% {
-webkit-transform: translate(0,.5px) rotate(-.5deg);
-moz-transform: translate(0,.5px) rotate(-.5deg);
-ms-transform: translate(0,.5px) rotate(-.5deg);
-o-transform: translate(0,.5px) rotate(-.5deg);
transform: translate(0,.5px) rotate(-.5deg)
}
94% {
-webkit-transform: translate(0,2.5px) rotate(.5deg);
-moz-transform: translate(0,2.5px) rotate(.5deg);
-ms-transform: translate(0,2.5px) rotate(.5deg);
-o-transform: translate(0,2.5px) rotate(.5deg);
transform: translate(0,2.5px) rotate(.5deg)
}
0%,100% {
-webkit-transform: translate(0,0) rotate(0);
-moz-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0)
}
}
@-o-keyframes my-face {
2%,24%,80% {
-webkit-transform: translate(0,1.5px) rotate(1.5deg);
-moz-transform: translate(0,1.5px) rotate(1.5deg);
-ms-transform: translate(0,1.5px) rotate(1.5deg);
-o-transform: translate(0,1.5px) rotate(1.5deg);
transform: translate(0,1.5px) rotate(1.5deg)
}
4%,68%,98% {
-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
-moz-transform: translate(0,-1.5px) rotate(-.5deg);
-ms-transform: translate(0,-1.5px) rotate(-.5deg);
-o-transform: translate(0,-1.5px) rotate(-.5deg);
transform: translate(0,-1.5px) rotate(-.5deg)
}
38%,6% {
-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
-moz-transform: translate(0,1.5px) rotate(-1.5deg);
-ms-transform: translate(0,1.5px) rotate(-1.5deg);
-o-transform: translate(0,1.5px) rotate(-1.5deg);
transform: translate(0,1.5px) rotate(-1.5deg)
}
8%,86% {
-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
-moz-transform: translate(0,-1.5px) rotate(-1.5deg);
-ms-transform: translate(0,-1.5px) rotate(-1.5deg);
-o-transform: translate(0,-1.5px) rotate(-1.5deg);
transform: translate(0,-1.5px) rotate(-1.5deg)
}
10%,72% {
-webkit-transform: translate(0,2.5px) rotate(1.5deg);
-moz-transform: translate(0,2.5px) rotate(1.5deg);
-ms-transform: translate(0,2.5px) rotate(1.5deg);
-o-transform: translate(0,2.5px) rotate(1.5deg);
transform: translate(0,2.5px) rotate(1.5deg)
}
12%,64%,78%,96% {
-webkit-transform: translate(0,-.5px) rotate(1.5deg);
-moz-transform: translate(0,-.5px) rotate(1.5deg);
-ms-transform: translate(0,-.5px) rotate(1.5deg);
-o-transform: translate(0,-.5px) rotate(1.5deg);
transform: translate(0,-.5px) rotate(1.5deg)
}
14%,54% {
-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
-moz-transform: translate(0,-1.5px) rotate(1.5deg);
-ms-transform: translate(0,-1.5px) rotate(1.5deg);
-o-transform: translate(0,-1.5px) rotate(1.5deg);
transform: translate(0,-1.5px) rotate(1.5deg)
}
16% {
-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
-moz-transform: translate(0,-.5px) rotate(-1.5deg);
-ms-transform: translate(0,-.5px) rotate(-1.5deg);
-o-transform: translate(0,-.5px) rotate(-1.5deg);
transform: translate(0,-.5px) rotate(-1.5deg)
}
18%,22% {
-webkit-transform: translate(0,.5px) rotate(-1.5deg);
-moz-transform: translate(0,.5px) rotate(-1.5deg);
-ms-transform: translate(0,.5px) rotate(-1.5deg);
-o-transform: translate(0,.5px) rotate(-1.5deg);
transform: translate(0,.5px) rotate(-1.5deg)
}
20%,36%,46% {
-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
-moz-transform: translate(0,-1.5px) rotate(2.5deg);
-ms-transform: translate(0,-1.5px) rotate(2.5deg);
-o-transform: translate(0,-1.5px) rotate(2.5deg);
transform: translate(0,-1.5px) rotate(2.5deg)
}
26%,50% {
-webkit-transform: translate(0,.5px) rotate(.5deg);
-moz-transform: translate(0,.5px) rotate(.5deg);
-ms-transform: translate(0,.5px) rotate(.5deg);
-o-transform: translate(0,.5px) rotate(.5deg);
transform: translate(0,.5px) rotate(.5deg)
}
28% {
-webkit-transform: translate(0,.5px) rotate(1.5deg);
-moz-transform: translate(0,.5px) rotate(1.5deg);
-ms-transform: translate(0,.5px) rotate(1.5deg);
-o-transform: translate(0,.5px) rotate(1.5deg);
transform: translate(0,.5px) rotate(1.5deg)
}
30%,40%,62%,76%,88% {
-webkit-transform: translate(0,-.5px) rotate(2.5deg);
-moz-transform: translate(0,-.5px) rotate(2.5deg);
-ms-transform: translate(0,-.5px) rotate(2.5deg);
-o-transform: translate(0,-.5px) rotate(2.5deg);
transform: translate(0,-.5px) rotate(2.5deg)
}
32%,34%,66% {
-webkit-transform: translate(0,1.5px) rotate(-.5deg);
-moz-transform: translate(0,1.5px) rotate(-.5deg);
-ms-transform: translate(0,1.5px) rotate(-.5deg);
-o-transform: translate(0,1.5px) rotate(-.5deg);
transform: translate(0,1.5px) rotate(-.5deg)
}
42% {
-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
-moz-transform: translate(0,2.5px) rotate(-1.5deg);
-ms-transform: translate(0,2.5px) rotate(-1.5deg);
-o-transform: translate(0,2.5px) rotate(-1.5deg);
transform: translate(0,2.5px) rotate(-1.5deg)
}
44%,70% {
-webkit-transform: translate(0,1.5px) rotate(.5deg);
-moz-transform: translate(0,1.5px) rotate(.5deg);
-ms-transform: translate(0,1.5px) rotate(.5deg);
-o-transform: translate(0,1.5px) rotate(.5deg);
transform: translate(0,1.5px) rotate(.5deg)
}
48%,74%,82% {
-webkit-transform: translate(0,-.5px) rotate(.5deg);
-moz-transform: translate(0,-.5px) rotate(.5deg);
-ms-transform: translate(0,-.5px) rotate(.5deg);
-o-transform: translate(0,-.5px) rotate(.5deg);
transform: translate(0,-.5px) rotate(.5deg)
}
52%,56%,60% {
-webkit-transform: translate(0,2.5px) rotate(2.5deg);
-moz-transform: translate(0,2.5px) rotate(2.5deg);
-ms-transform: translate(0,2.5px) rotate(2.5deg);
-o-transform: translate(0,2.5px) rotate(2.5deg);
transform: translate(0,2.5px) rotate(2.5deg)
}
58% {
-webkit-transform: translate(0,.5px) rotate(2.5deg);
-moz-transform: translate(0,.5px) rotate(2.5deg);
-ms-transform: translate(0,.5px) rotate(2.5deg);
-o-transform: translate(0,.5px) rotate(2.5deg);
transform: translate(0,.5px) rotate(2.5deg)
}
84% {
-webkit-transform: translate(0,1.5px) rotate(2.5deg);
-moz-transform: translate(0,1.5px) rotate(2.5deg);
-ms-transform: translate(0,1.5px) rotate(2.5deg);
-o-transform: translate(0,1.5px) rotate(2.5deg);
transform: translate(0,1.5px) rotate(2.5deg)
}
90% {
-webkit-transform: translate(0,2.5px) rotate(-.5deg);
-moz-transform: translate(0,2.5px) rotate(-.5deg);
-ms-transform: translate(0,2.5px) rotate(-.5deg);
-o-transform: translate(0,2.5px) rotate(-.5deg);
transform: translate(0,2.5px) rotate(-.5deg)
}
92% {
-webkit-transform: translate(0,.5px) rotate(-.5deg);
-moz-transform: translate(0,.5px) rotate(-.5deg);
-ms-transform: translate(0,.5px) rotate(-.5deg);
-o-transform: translate(0,.5px) rotate(-.5deg);
transform: translate(0,.5px) rotate(-.5deg)
}
94% {
-webkit-transform: translate(0,2.5px) rotate(.5deg);
-moz-transform: translate(0,2.5px) rotate(.5deg);
-ms-transform: translate(0,2.5px) rotate(.5deg);
-o-transform: translate(0,2.5px) rotate(.5deg);
transform: translate(0,2.5px) rotate(.5deg)
}
0%,100% {
-webkit-transform: translate(0,0) rotate(0);
-moz-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0)
}
}
@keyframes my-face {
2%,24%,80% {
-webkit-transform: translate(0,1.5px) rotate(1.5deg);
-moz-transform: translate(0,1.5px) rotate(1.5deg);
-ms-transform: translate(0,1.5px) rotate(1.5deg);
-o-transform: translate(0,1.5px) rotate(1.5deg);
transform: translate(0,1.5px) rotate(1.5deg)
}
4%,68%,98% {
-webkit-transform: translate(0,-1.5px) rotate(-.5deg);
-moz-transform: translate(0,-1.5px) rotate(-.5deg);
-ms-transform: translate(0,-1.5px) rotate(-.5deg);
-o-transform: translate(0,-1.5px) rotate(-.5deg);
transform: translate(0,-1.5px) rotate(-.5deg)
}
38%,6% {
-webkit-transform: translate(0,1.5px) rotate(-1.5deg);
-moz-transform: translate(0,1.5px) rotate(-1.5deg);
-ms-transform: translate(0,1.5px) rotate(-1.5deg);
-o-transform: translate(0,1.5px) rotate(-1.5deg);
transform: translate(0,1.5px) rotate(-1.5deg)
}
8%,86% {
-webkit-transform: translate(0,-1.5px) rotate(-1.5deg);
-moz-transform: translate(0,-1.5px) rotate(-1.5deg);
-ms-transform: translate(0,-1.5px) rotate(-1.5deg);
-o-transform: translate(0,-1.5px) rotate(-1.5deg);
transform: translate(0,-1.5px) rotate(-1.5deg)
}
10%,72% {
-webkit-transform: translate(0,2.5px) rotate(1.5deg);
-moz-transform: translate(0,2.5px) rotate(1.5deg);
-ms-transform: translate(0,2.5px) rotate(1.5deg);
-o-transform: translate(0,2.5px) rotate(1.5deg);
transform: translate(0,2.5px) rotate(1.5deg)
}
12%,64%,78%,96% {
-webkit-transform: translate(0,-.5px) rotate(1.5deg);
-moz-transform: translate(0,-.5px) rotate(1.5deg);
-ms-transform: translate(0,-.5px) rotate(1.5deg);
-o-transform: translate(0,-.5px) rotate(1.5deg);
transform: translate(0,-.5px) rotate(1.5deg)
}
14%,54% {
-webkit-transform: translate(0,-1.5px) rotate(1.5deg);
-moz-transform: translate(0,-1.5px) rotate(1.5deg);
-ms-transform: translate(0,-1.5px) rotate(1.5deg);
-o-transform: translate(0,-1.5px) rotate(1.5deg);
transform: translate(0,-1.5px) rotate(1.5deg)
}
16% {
-webkit-transform: translate(0,-.5px) rotate(-1.5deg);
-moz-transform: translate(0,-.5px) rotate(-1.5deg);
-ms-transform: translate(0,-.5px) rotate(-1.5deg);
-o-transform: translate(0,-.5px) rotate(-1.5deg);
transform: translate(0,-.5px) rotate(-1.5deg)
}
18%,22% {
-webkit-transform: translate(0,.5px) rotate(-1.5deg);
-moz-transform: translate(0,.5px) rotate(-1.5deg);
-ms-transform: translate(0,.5px) rotate(-1.5deg);
-o-transform: translate(0,.5px) rotate(-1.5deg);
transform: translate(0,.5px) rotate(-1.5deg)
}
20%,36%,46% {
-webkit-transform: translate(0,-1.5px) rotate(2.5deg);
-moz-transform: translate(0,-1.5px) rotate(2.5deg);
-ms-transform: translate(0,-1.5px) rotate(2.5deg);
-o-transform: translate(0,-1.5px) rotate(2.5deg);
transform: translate(0,-1.5px) rotate(2.5deg)
}
26%,50% {
-webkit-transform: translate(0,.5px) rotate(.5deg);
-moz-transform: translate(0,.5px) rotate(.5deg);
-ms-transform: translate(0,.5px) rotate(.5deg);
-o-transform: translate(0,.5px) rotate(.5deg);
transform: translate(0,.5px) rotate(.5deg)
}
28% {
-webkit-transform: translate(0,.5px) rotate(1.5deg);
-moz-transform: translate(0,.5px) rotate(1.5deg);
-ms-transform: translate(0,.5px) rotate(1.5deg);
-o-transform: translate(0,.5px) rotate(1.5deg);
transform: translate(0,.5px) rotate(1.5deg)
}
30%,40%,62%,76%,88% {
-webkit-transform: translate(0,-.5px) rotate(2.5deg);
-moz-transform: translate(0,-.5px) rotate(2.5deg);
-ms-transform: translate(0,-.5px) rotate(2.5deg);
-o-transform: translate(0,-.5px) rotate(2.5deg);
transform: translate(0,-.5px) rotate(2.5deg)
}
32%,34%,66% {
-webkit-transform: translate(0,1.5px) rotate(-.5deg);
-moz-transform: translate(0,1.5px) rotate(-.5deg);
-ms-transform: translate(0,1.5px) rotate(-.5deg);
-o-transform: translate(0,1.5px) rotate(-.5deg);
transform: translate(0,1.5px) rotate(-.5deg)
}
42% {
-webkit-transform: translate(0,2.5px) rotate(-1.5deg);
-moz-transform: translate(0,2.5px) rotate(-1.5deg);
-ms-transform: translate(0,2.5px) rotate(-1.5deg);
-o-transform: translate(0,2.5px) rotate(-1.5deg);
transform: translate(0,2.5px) rotate(-1.5deg)
}
44%,70% {
-webkit-transform: translate(0,1.5px) rotate(.5deg);
-moz-transform: translate(0,1.5px) rotate(.5deg);
-ms-transform: translate(0,1.5px) rotate(.5deg);
-o-transform: translate(0,1.5px) rotate(.5deg);
transform: translate(0,1.5px) rotate(.5deg)
}
48%,74%,82% {
-webkit-transform: translate(0,-.5px) rotate(.5deg);
-moz-transform: translate(0,-.5px) rotate(.5deg);
-ms-transform: translate(0,-.5px) rotate(.5deg);
-o-transform: translate(0,-.5px) rotate(.5deg);
transform: translate(0,-.5px) rotate(.5deg)
}
52%,56%,60% {
-webkit-transform: translate(0,2.5px) rotate(2.5deg);
-moz-transform: translate(0,2.5px) rotate(2.5deg);
-ms-transform: translate(0,2.5px) rotate(2.5deg);
-o-transform: translate(0,2.5px) rotate(2.5deg);
transform: translate(0,2.5px) rotate(2.5deg)
}
58% {
-webkit-transform: translate(0,.5px) rotate(2.5deg);
-moz-transform: translate(0,.5px) rotate(2.5deg);
-ms-transform: translate(0,.5px) rotate(2.5deg);
-o-transform: translate(0,.5px) rotate(2.5deg);
transform: translate(0,.5px) rotate(2.5deg)
}
84% {
-webkit-transform: translate(0,1.5px) rotate(2.5deg);
-moz-transform: translate(0,1.5px) rotate(2.5deg);
-ms-transform: translate(0,1.5px) rotate(2.5deg);
-o-transform: translate(0,1.5px) rotate(2.5deg);
transform: translate(0,1.5px) rotate(2.5deg)
}
90% {
-webkit-transform: translate(0,2.5px) rotate(-.5deg);
-moz-transform: translate(0,2.5px) rotate(-.5deg);
-ms-transform: translate(0,2.5px) rotate(-.5deg);
-o-transform: translate(0,2.5px) rotate(-.5deg);
transform: translate(0,2.5px) rotate(-.5deg)
}
92% {
-webkit-transform: translate(0,.5px) rotate(-.5deg);
-moz-transform: translate(0,.5px) rotate(-.5deg);
-ms-transform: translate(0,.5px) rotate(-.5deg);
-o-transform: translate(0,.5px) rotate(-.5deg);
transform: translate(0,.5px) rotate(-.5deg)
}
94% {
-webkit-transform: translate(0,2.5px) rotate(.5deg);
-moz-transform: translate(0,2.5px) rotate(.5deg);
-ms-transform: translate(0,2.5px) rotate(.5deg);
-o-transform: translate(0,2.5px) rotate(.5deg);
transform: translate(0,2.5px) rotate(.5deg)
}
0%,100% {
-webkit-transform: translate(0,0) rotate(0);
-moz-transform: translate(0,0) rotate(0);
-ms-transform: translate(0,0) rotate(0);
-o-transform: translate(0,0) rotate(0);
transform: translate(0,0) rotate(0)
}
}
2、文章内超链接美化
删掉duat.css的如下内容:
.duta a:not(.btn):not(*[data-fancybox]):not(.mc-link):hover {
border-bottom: 1px solid
}
并添加CSS:
/*超链接特效*/
.duta a:not([data-fancybox="gallery"]) {
position: relative;
margin: auto 4px;
color: #23b7e5;
-webkit-transition: color 0.3s;
transition: color 0.3s;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: inherit;
width: inherit;
}
.duta a:not([data-fancybox="gallery"]):hover,
.duta a:not([data-fancybox="gallery"]):focus {
color: #fff;
}
.duta a:not([data-fancybox="gallery"])::before,
.duta a:not([data-fancybox="gallery"])::after {
position: absolute;
top: 0;
left: -4px;
z-index: -1;
box-sizing: content-box;
padding: 0 4px;
width: 100%;
height: 100%;
content: '';
}
.duta a:not([data-fancybox="gallery"])::before {
background-color: #23b7e5;
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.duta a:not([data-fancybox="gallery"]):hover::before,
.duta a:not([data-fancybox="gallery"]):focus::before {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.duta a:not([data-fancybox="gallery"])::after {
border-bottom: 1px solid #23b7e5;
}
.content-copyright {
overflow: hidden;
}
dark模式下code框颜色修改等
添加到Main.css
/*夜晚模式code*/
.DarkMode code.hljs, .DarkMode code>table>tbody>tr>td{
background-color: #040404;
}
.DarkMode pre,code[hljs-codeblock-inner]{
border-radius: 14px;
}
/*footer*/
#footer{
background-color: #f6f6f6;
}
.DarkMode #footer{
background-color: #121212;
}
评论已关闭