2020-08-05  9f68acedc8c58c15525d30546d14db33 99+   10 分钟   1.5 k  0次访问

比较炫的自定义css

各种handsome主题改动集合

1.比较炫的自定义css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

/*首页头像自动旋转*/
.thumb-lg{
    width:66px;
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

/*首页头像放大并自动旋转
.thumb-lg{
    width:66px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}
*/


/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

/*如果也想使盒子四周也有阴影，加上以下代码*/
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}


/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

2.qq链接

1
2
3
4
<div style="border:0px black solid;text-align:right">
<a  target="_blank" href="http://sighttp.qq.com/authd?IDKEY=7d3cffa8a4fe2045d40496043a0f5525b61d8a5006bc7dde"><img border="0"  src="https://wohenliu.com/tupian/tubiao/3动timg.gif" alt="点击这里给我发消息" title="点击这里给我发消息"/></a> </div>

QQ链接

3.9、鼠标点击特效

将以下代码放在主题的handsome/component/footer.php中的之前即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script type="text/javascript"> 
/* 鼠标特效 */
var a_idx = 0; 
jQuery(document).ready(function($) { 
    $("body").click(function(e) { 
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
        var $i = $("<span/>").text(a[a_idx]); 
        a_idx = (a_idx + 1) % a.length; 
        var x = e.pageX, 
        y = e.pageY; 
        $i.css({ 
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
            "top": y - 20, 
            "left": x, 
            "position": "absolute", 
            "font-weight": "bold", 
            "color": "#ff6651" 
        }); 
        $("body").append($i); 
        $i.animate({ 
            "top": y - 180, 
            "opacity": 0 
        }, 
        1500, 
        function() { 
            $i.remove(); 
        }); 
    }); 
}); 
</script>

4.评论框特效

下载特效JS文件：commentTyping.js，将其放在网站目录某个地方，然后编辑主题文件handsome/component/footer.php，在后面添加以下代码。

1
<script type="text/javascript" src="(JS文件路径)"></script>

5.typecho下的彩色标签云实现方式

修改的有3个文件

  1. component/sidebar.php

  2. 新增CSS文件

  3. component/header.php

< 一 > 用以下这段代码替换原有非文章页面的标签云

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
vim handsome/component/sidebar.php

<section id="tag_cloud-2" class="widget widget_tag_cloud wrapper-md clear">
       <h3 id="tag-cloud-title" 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()): ?>
           <span id="tag-clould-color"  style="background-color:rgb(<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>,<?php echo(rand(0,255)); ?>)">
               <a  href="<?php $tags->permalink();?>"  title="<?php echo sprintf(_mt("该标签下有 %d 篇文章"),$tags->count); ?>" data-toggle="tooltip" >
               <?php $tags->name(); ?></a>
           </span>
           <?php endwhile; ?>
       <?php endif; ?>
       </div>
   </section>

< 二 > 新增CSS文件 文件名只要不是中文 都可以，放到handsome/assets/css/目录下

1
2
3
4
5
6
7
8
9
10
11
12
pwd
/data/app/typecho/usr/themes
vim handsome/assets/css/biaoqian.css

/* tag-clould-color 彩色标签云 */
#tag-clould-color {
    padding: 3px 10px 3px 10px;
    border-radius: 10px;
    color: #FFFFFF;
    margin: 3px 3px 3px 0;
    display: inline-block;
}

< 三 > 在header中引入文件 这步不做也行，不过这样的标签云样式没那么好，颜色还是有的。

ar7S81.png

1
2
3
4
 vim handsome/component/header.php

	
<link rel="stylesheet" href="<?php echo STATIC_PATH; ?>css/你的CSS文件名.css" type="text/css">

6.给typecho加上心知天气-博客美化

把代码加入到后台设置的自定义Javascript 里面 或者将代码添加到/usr/themes/handsome/component/headnav.php第48行下方即可 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


<!-- 心知天气-->
    <div id="tp-weather-widget" class="navbar-form navbar-form-sm navbar-left shift"></div>
<script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
<script>tpwidget("init", {
    "flavor": "slim",
    "location": "WX4FBXXFKE4F",
    "geolocation": "enabled",
    "language": "auto",
    "unit": "c",
    "theme": "chameleon",
    "container": "tp-weather-widget",
    "bubble": "enabled",
    "alarmType": "badge",
    "color": "#C6C6C6",
    "uid": "填写你的UID",
    "hash": "密钥"
});
tpwidget("show");</script>
<!-- 心知结束-->

然后去知心天气官网www.seniverse.com注册申请API 密钥就可以了

7.将QQ头像设置为左边导航栏图片

1
https://q1.qlogo.cn/g?b=qq&nk=1378373724&s=640

复制上方地址修改1378373724为自己 QQ - 随后将地址添加到初级设置 - 头像图片地址 即可

8.开启 Typecho 的 gzip 压缩以提升网站速度

开启

找到你的Typecho的网站根目录中的index.php
添加如下代码

1
2
/** 开启gzip压缩, add by yovisun */
ob_start('ob_gzhandler');

此行代码需加在 index.php 中 ** 的下方，但不可放在最下方，否则网站可能无法访问

结果

完成后，使用 网页GZIP压缩检测 检查结果：

9,云雾特效

先获取两张背景图片

图片1

图片2

然后再复制下面css，添加到自定义css 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

*{margin:0;padding:0;}
            html {
              box-sizing: border-box;
            }
            
            *,
            *:before,
            *:after {
              box-sizing: inherit;
            }
            
            figure {
              margin: 0;
            }
            
            .absolute-bg {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              height: 100%;
              width: 100%;
              background-position: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              overflow: hidden;
            }
            
            .fog {
              position: relative;
              height: 100vh;
              width: 100%;
              position: fixed;
              top: 0;
              z-index: -1;
            }
            .fog__container {
              position: absolute;
              height: 100%;
              width: 100%;
              overflow: hidden;
            }
            .fog__img {
              position: absolute;
              height: 100vh;
              width: 300vw;
            }
            
            .fog__img--first {
              background: url("https://wohenliu.com/tupian/ding/heiyun.png") repeat-x;
              background-size: contain;
              background-position: center;
              -webkit-animation: marquee 60s linear infinite;
                      animation: marquee 60s linear infinite;
            }
            .fog__img--second {
              background: url("https://wohenliu.com/tupian/ding/heiyun2.png") repeat-x;
              background-size: contain;
              background-position: center;
              -webkit-animation: marquee 40s linear infinite;
                      animation: marquee 40s linear infinite;
            }
            @media screen and (max-width: 767px){
                .fog__img--first{
                    -webkit-animation: marquee 6s linear infinite;
                            animation: marquee 6s linear infinite;
                }
                .fog__img--second{
                    -webkit-animation: marquee 6s linear infinite;
                            animation: marquee 6s linear infinite;
                }
            }
            @-webkit-keyframes marquee {
              0% {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
              }
              100% {
                -webkit-transform: translate3d(-200vw, 0, 0);
                        transform: translate3d(-200vw, 0, 0);
              }
            }
            
            @keyframes marquee {
              0% {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
              }
              100% {
                -webkit-transform: translate3d(-200vw, 0, 0);
                        transform: translate3d(-200vw, 0, 0);
              }
            }
  1. 在component / footer.php中搜索footer(); ?>，在这一行上面添加
1
2
3
4
5
6
<section class="fog">
       <div class="fog__container">
           <div class="fog__img fog__img--first"></div>
           <div class="fog__img fog__img--second"></div>
       </div>
   </section>

这个时候您的博客应该有云在飘了

喜欢这篇文章？打赏一下作者吧

评论

目录

关注我

:D 一言句子获取中...

最新评论

加载中，最新评论有1分钟缓存...

最新文章

分类

归档

标签

linux18
docker16
Prometheus14
html14
python12
web12
nginx9
mysql7
容器7
数据库7
科学上网6
work5
自动化5
博客4
工作4
工具4
ssl3
文件系统3
日志3
日志加密3
查看全部>>

订阅更新

输入邮箱开始订阅，更博后邮件通知！