Repository: shuiche-it/cnblog-mouse
Branch: master
Commit: 9d9db4b1d93d
Files: 6
Total size: 64.3 KB
Directory structure:
gitextract_llo5_v6d/
├── .babelrc
├── README.md
├── cnblogs-theme-silence/
│ ├── README.md
│ └── css.css
├── package.json
└── src/
└── mouse.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets":[
"es2015"
],
"plugins":[]
}
================================================
FILE: README.md
================================================
# 前言
cnblog-mouse 是一个完整的插件，理论上该插件支持所有的 web 项目，本人只针对了博客园做了测试。
# cnblog-mouse
博客园鼠标特效, 目前收录了12种特效
DEMO参考: [https://www.cnblogs.com/shuiche/](https://www.cnblogs.com/shuiche/)
### 部署说明
#### 上传脚本
打开./dist文件夹，获取主题的 JS 脚本文件mouse.min.js。
进入[『文件』](https://i.cnblogs.com/Files.aspx)界面，将该文件上传到自己的博客中。上传完成后，点击文件名便可在浏览器地址栏中获取上传文件的外链，类似如下所示：
https://blog-static.cnblogs.com/files/xuange306/mouse.min.js
然后使用\<script>标签将外链包裹，生成一个网页脚本引用，类似如下所示：
```
<script src="https://blog-static.cnblogs.com/files/xuange306/mouse.min.js"></script>
```
### 使用脚本
进入[『设置』](https://i.cnblogs.com/Configure.aspx)界面，将上面生成的网页脚本引用复制到「页脚 HTML 代码」文本域中。
```js
<script src="https://blog-static.cnblogs.com/files/xuange306/mouse.min.js"></script>
<script type="text/javascript">
$.shuicheMouse({
type:10,
color:"rgba(187,67,128,1)"
})
</script>
```
### 参数说明
|参数|类型|说明|
|---|---|---|
|type| int | 鼠标类型, 赋值 1 ~ 12 任意一个数字, 分别代表12种类型 |
|color| string/ false | 特效颜色, 如果赋值 false (这里的 false 是 布尔类型), 则会随机一种颜色. string 支持类型(css颜色赋值类型都支持)<br> 1. "#ffffff" 类型 <br> 2: rgb(255,255,255) <br> 3: rgba(255,255,255, 0.8)|
### 赞赏
如果您觉得 cnblog-mouse 鼠标效果做的还不错，或者想对我微小的工作一点激励，欢迎赞赏支持。
================================================
FILE: cnblogs-theme-silence/README.md
================================================
# 博客园主题设置
主题部署, 具体参考: [https://github.com/esofar/cnblogs-theme-silence](https://github.com/esofar/cnblogs-theme-silence)
我使用的主题在这个开源库的基础上有一定的修改
1. 将 silence.min.js 上传到博客园
2. 将 css.css 内容复制到 博客园 -> 设置 -> 页面定制CSS 输入框中
3. 将下面代码复制到 博客园 -> 设置 -> 博客侧边栏公告 输入框中
```js
<script src="https://blog-static.cnblogs.com/files/xuange306/silence.min.js"></script>
<script type="text/javascript">
$.silence({
avatar: 'https://blog-static.cnblogs.com/files/xuange306/icon.gif',
navigation: [
{
title: '标签',
url: 'https://www.cnblogs.com/xuange306/tag/'
},
{
title: '归档',
url: 'https://www.cnblogs.com/xuange306/p/'
}
],
catalog: {
enable: true,
move: true,
index: true,
level1: 'h2',
level2: 'h3',
level3: 'h4',
},
signature: {
enable: true,
license: '本博文版权归本博主所有,未经授权不得转载',
link: 'https://home.cnblogs.com/u/xuange306',
remark: null
},
sponsor: {
enable: true,
paypal: null,
text:"打赏一下呗",
wechat: 'https://blog-static.cnblogs.com/files/xuange306/wx.gif',
alipay: 'https://blog-static.cnblogs.com/files/xuange306/zfb.gif'
},
github: {
enable: true,
link: 'https://github.com/shuiche-it/',
target: '_self'
}
});
</script>
```
================================================
FILE: cnblogs-theme-silence/css.css
================================================
html, body {
background: #fff;
min-height: 100%;
color: #314659 !important;
font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif !important
}
a {
transition: all .3s ease !important
}
a:hover {
color: #2D8CF0 !important;
text-decoration: none !important
}
#ad_c1, #ad_c2, #ad_t2, #author_profile, #blogCalendar, #blogTitle h2, #comment_form_container p:nth-of-type(3), #comments_pager_top, #green_channel, #homepage_top_pager, #sidebar_imagecategory, #sidebar_postarchive, #sidebar_recentcomments, #sidebar_recentposts, #sidebar_scorerank, #sidebar_search, #sidebar_search .catListTitle, #sidebar_shortcut, #sidebar_topcommentedposts, #tip_comment2, #under_post_kb, #under_post_news, .blogStats, .c_ad_block, .dayTitle {
display: none
}
#home {
width: 100%;
height: 100%
}
#header {
width: 960px;
position: fixed;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
border-top: 0;
background: #fff;
opacity: .95;
border-bottom: 1px #eef2f8 solid;
padding-bottom: 0;
display: block;
height: 60px;
z-index: 999
}
#header #blogTitle {
position: relative;
height: 60px
}
#header #blogTitle h1 {
font-size: 25px;
font-family: Georgia;
width: auto;
margin-left: 0;
margin-top: 12px
}
#header #blogTitle h1 a {
color: #404040
}
#header #navigator {
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
display: inline-block;
z-index: 999
}
#header #navList {
height: inherit
}
#header #navList > li {
position: relative
}
#header #navList > li:hover i {
width: 100%;
left: 0
}
#header #navList > li > a:active, #header #navList > li > a:link, #header #navList > li > a:visited {
font-size: 17px;
padding-top: 0;
border-right: 0;
color: #314659;
display: block;
font-weight: 300;
width: auto;
padding: 19px 16px;
height: inherit;
-webkit-transition: all .3s;
transition: all .3s
}
#header #navList > li > a:hover {
background: 0 0
}
#header #navList > li > i {
width: 0;
height: 4px;
background-color: #2D8CF0;
content: "";
position: absolute;
left: 50%;
bottom: 0;
transition: 1s
}
#header #navList .open {
transform: rotate(180deg) scaleX(-1)
}
#header #navList .esa-sub-navs {
background-color: #fff;
position: absolute;
width: 130px;
top: 65px;
left: calc(50% - 65px);
border-radius: 3px;
box-shadow: 0 1px 15px rgba(27, 31, 35, .15);
display: none;
padding: 10px
}
#header #navList .esa-sub-navs li {
float: none
}
#header #navList .esa-sub-navs li a {
font-size: 15px;
border-right: 0;
color: #314659;
display: block;
width: 100%;
font-weight: 300;
padding: 10px 0;
height: inherit
}
#header #navList .esa-sub-navs li a:hover {
background: 0 0;
color: #2D8CF0
}
#main {
width: 960px;
margin: 0 auto;
min-height: calc(100% - 135px);
padding: 75px 10px 0 10px;
animation-name: fadeIn;
animation-duration: 1s;
animation-iteration-count: 1;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1
}
#main #mainContent {
background-color: transparent
}
#main #mainContent .forFlow {
margin: 0 auto;
margin-left: 0;
max-width: 960px
}
#sideBar {
border-right: 1px solid #eef2f8;
font-weight: 300;
display: none;
min-height: 750px;
padding: 0 15px 0 0
}
#sideBar #profile_block {
margin-top: 10px;
font-size: 15px
}
#sideBar #profile_block #p_b_follow {
margin-top: 10px
}
#sideBar #profile_block a {
color: #314659
}
.catListTitle {
position: relative;
text-align: left;
margin: 15px 0;
padding-left: 15px;
font-size: 20px;
font-weight: 300;
border-bottom: none
}
.catListTitle::before {
content: "\2662";
color: #314659;
position: absolute;
top: 1px;
left: -2px
}
#sidebar_toptags li {
font-size: 14px;
height: 19px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 8px;
border: 1px solid #eef2f8;
margin: 0 6px 6px 0;
display: inline-grid;
transition: all .3s;
border-radius: 2px
}
#sidebar_toptags li a {
color: #314659
}
#sidebar_toptags li:active, #sidebar_toptags li:link, #sidebar_toptags li:visited {
border-color: #eef2f8
}
#sidebar_toptags li:hover {
border-color: #2D8CF0
}
#sidebar_categories li {
font-size: 15px;
height: 40px;
padding-left: 3px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
transition: all .5s;
text-overflow: ellipsis;
list-style: inside
}
#sidebar_categories li:hover {
transform: translate(10px)
}
#sidebar_categories li a {
color: #314659
}
#sidebar_topdiggedposts li, #sidebar_topviewedposts li {
font-size: 15px;
padding: 10px 0;
transition: all .3s;
text-align: justify;
border-bottom: 1px solid #eef2f8
}
#sidebar_topdiggedposts li a:active, #sidebar_topdiggedposts li a:hover, #sidebar_topdiggedposts li a:link, #sidebar_topdiggedposts li a:visited, #sidebar_topviewedposts li a:active, #sidebar_topviewedposts li a:hover, #sidebar_topviewedposts li a:link, #sidebar_topviewedposts li a:visited {
color: #314659
}
#taglist_title, .PostListTitle, .entrylistTitle, .myposts_title, .thumbTitle {
padding-bottom: 3px;
padding-right: 10px;
width: 100%;
text-align: left;
border-bottom: 0 !important;
font-size: 20px !important;
font-weight: 300;
margin-top: 15px
}
#myposts {
margin-left: 0
}
#myposts .PostList {
font-size: 14px;
font-weight: 300;
border-bottom: 1px solid #eef2f8;
padding: 5px 0 9px 0;
margin-right: 0
}
#myposts .pager:first-of-type {
display: none
}
#myposts a:link, #myposts a:visited {
color: #314659
}
#myposts .postDesc2 {
color: inherit
}
.day, .entrylistItem {
width: auto;
border-bottom: 1px solid #eef2f8;
padding: 10px 0 15px 0;
text-align: justify
}
.day .postSeparator, .entrylistItem .postSeparator {
margin-top: 15px;
margin-bottom: 25px;
border-top: 1px solid #eef2f8
}
.day .postTitle, .entrylist .entrylistPosttitle {
font-size: 20px;
font-weight: 300;
font-family: inherit;
padding-left: 0;
border-bottom: none
}
.day .postTitle a, .entrylist .entrylistPosttitle a {
color: #314659;
font-size: 24px;
font-weight: bold;
}
.day .postCon, .entrylist .entrylistPostSummary {
font-size: 16px;
font-weight: 300;
font-family: inherit;
padding-left: 0
}
.day .postCon .c_b_p_desc img, .entrylist .entrylistPostSummary .c_b_p_desc img {
height: 100px;
margin-left: 10px
}
.day .postCon .c_b_p_desc a, .entrylist .entrylistPostSummary .c_b_p_desc a {
border: 1px solid;
border-radius: 3px;
padding: 2px 9px;
font-size: 13px;
margin-top: 10px;
text-decoration: none;
display: table;
color: #314659;
border-color: #314659
}
.day .postCon .c_b_p_desc a:after, .entrylist .entrylistPostSummary .c_b_p_desc a:after {
content: " »"
}
.day .postCon .c_b_p_desc a:hover, .entrylist .entrylistPostSummary .c_b_p_desc a:hover {
color: #2D8CF0 !important;
border: 1px solid #2D8CF0
}
.day .postDesc, .entrylist .entrylistItemPostDesc, .post .postDesc {
font-size: 13px;
font-weight: 300;
padding-right: 0 !important;
color: #314659 !important
}
.day .postDesc a, .entrylist .entrylistItemPostDesc a, .post .postDesc a {
color: #314659
}
.entrylistDescription {
color: #314659;
font-size: 13px;
font-weight: 300;
padding-right: 0
}
#topics .postTitle {
font-size: 20px;
font-weight: 300;
padding-left: 0;
border-bottom: none
}
#topics .postTitle a {
color: #314659
}
#topics .postBody {
font-weight: 300;
font-size: 16px;
padding: 10px 0;
line-height: 1.75;
color: #314659;
border-bottom: 1px solid #eef2f8
}
#topics .postBody a:active, #topics .postBody a:link, #topics .postBody a:visited {
color: #2D8CF0;
text-decoration: none
}
#topics .postBody h1 {
font-size: 21px !important;
color: #314659
}
#topics .postBody h1 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody h2 {
font-size: 20px !important;
color: #314659
}
#topics .postBody h2 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody h3 {
font-size: 19px !important;
color: #314659
}
#topics .postBody h3 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody h4 {
font-size: 18px !important;
color: #314659
}
#topics .postBody h4 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody h5 {
font-size: 17px !important;
color: #314659
}
#topics .postBody h5 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody h6 {
font-size: 16px !important;
color: #314659
}
#topics .postBody h6 a:not([class=esa-anchor]) {
color: inherit !important;
text-decoration: underline
}
#topics .postBody p {
margin: 13px auto
}
#topics .postBody hr {
border-left: none;
border-right: none;
border-top: none;
border-bottom: 1px solid #eef2f8
}
#topics .postBody blockquote {
border: none;
color: #314659;
margin: 20px 0;
padding: 0 0 0 10px;
min-height: 20px;
background: 0 0;
line-height: inherit;
border-left: 4px solid #dde5f1
}
#topics .postBody em {
padding-right: 3px
}
#topics .postBody strong {
margin: 0 3px;
font-weight: 500
}
#topics .postBody img {
max-width: 960px !important;
display: block;
margin: 15px 0 30px 0;
border-radius: 3px;
box-shadow: 0 1px 15px rgba(27, 31, 35, .15), 0 0 1px rgba(106, 115, 125, .35)
}
#topics .postBody ol li, #topics .postBody ul li {
margin: 3px 0;
font-size: 16px;
color: #314659
}
#topics .postBody ol li p, #topics .postBody ul li p {
margin: 0 !important
}
#topics .postBody table {
font-size: 13px;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #eef2f8;
width: 100%;
margin: 13px 0
}
#topics .postBody table th {
font-family: inherit;
font-size: inherit;
background: #f7f7f7 !important;
white-space: nowrap;
font-weight: 600;
border: 1px solid #eef2f8 !important;
padding: 8px 16px !important
}
#topics .postBody table td {
border: 1px solid #eef2f8 !important;
padding: 8px 16px !important
}
#topics .postBody h1 code, #topics .postBody h2 code, #topics .postBody h3 code, #topics .postBody h4 code, #topics .postBody h5 code, #topics .postBody h6 code, #topics .postBody li code, #topics .postBody p code, #topics .postBody table code {
color: #314659;
line-height: 1;
font-family: consolas !important;
vertical-align: middle;
margin: 0 3px;
background: #f2f4f5 !important;
font-size: 14px !important;
padding: .2em .3em !important;
border-radius: 3px !important;
border: 1px solid #eee !important
}
#topics .postBody #BlogPostCategory {
font-size: 14px;
margin-bottom: 0
}
#topics .postBody #BlogPostCategory a {
margin-left: 5px
}
#topics .postBody #EntryTag {
font-size: 14px;
color: #314659
}
#topics .postBody #EntryTag a {
color: #2D8CF0
}
#topics .postBody #post_next_prev {
font-size: 13px
}
.cnblogs_code {
background-color: #f2f4f5;
padding-left: 1em;
padding-right: 1em;
border: none !important;
border-radius: 3px !important;
font-family: Lucida Console, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace !important
}
.cnblogs_code div {
background-color: transparent;
color: #656c73
}
.cnblogs_code img {
margin: 0 !important
}
.cnblogs_code pre {
color: #656c73;
font-family: inherit !important
}
.cnblogs_code pre span {
font-family: inherit !important;
color: inherit !important
}
.cnblogs_code textarea {
font-family: inherit !important;
padding: 5px;
border: 1px solid #3e4c42;
color: #c5d4ef;
background-color: #282c34
}
.cnblogs_code textarea:focus {
outline: 0
}
.cnblogs_code .code_img_closed, .cnblogs_code .code_img_opened {
display: none !important
}
.cnblogs_code .cnblogs_code_toolbar {
width: 20px
}
.cnblogs_code .cnblogs_code_toolbar span {
padding-right: 0
}
.cnblogs_code .cnblogs_code_toolbar a:link img {
background-color: transparent !important
}
.cnblogs_code .cnblogs_code_collapse {
color: #656c73;
border: 1px solid #989fa6;
border-radius: 2px;
background-color: transparent;
display: inline-block;
cursor: pointer;
padding: 5px 5px 2px 5px
}
.github-corner svg {
fill: #2D8CF0
}
#footer {
border-top: 1px solid #eef2f8;
font-size: 13px;
font-weight: 300;
margin: 10px 0 0 0;
padding: 10px 0
}
#footer .esa-copyright a {
color: #314659
}
.cnblogs-markdown pre {
white-space: pre !important;
position: relative !important
}
#taglist_main {
margin-top: 0
}
#taglist_main table {
width: 100%
}
#taglist_main table tr td {
padding: 5px 20px 5px 0
}
#taglist_main table tr td .small {
display: none
}
#taglist_main table tr td a {
display: block;
font-size: 14px;
padding: 5px;
font-weight: 300;
height: 19px;
line-height: 20px;
text-align: center;
border: 1px solid #eef2f8;
border-radius: 2px;
color: #314659
}
#taglist_main table tr td a:hover {
color: #2D8CF0 !important;
border: 1px solid #2D8CF0;
text-decoration: none
}
.topicListFooter {
margin-right: 0
}
#nav_next_page, .pager {
margin-right: 0;
color: #314659
}
#nav_next_page a, .pager a {
padding: 3px 7px;
border: 1px solid #314659;
border-radius: 2px;
margin: 0 3px;
text-decoration: none;
color: inherit;
transition: border .2s ease-in-out, color .2s ease-in-out
}
#nav_next_page a:hover, .pager a:hover {
color: #2D8CF0;
border: 1px solid #2D8CF0
}
.pager span.current {
padding: 3px 7px;
border: 1px solid #2D8CF0;
border-radius: 4px;
font-family: Monospaced Number;
margin: 0 3px;
text-decoration: none;
background-color: #2D8CF0
}
.esa-clipboard-button {
font-size: 12px;
cursor: pointer;
position: absolute;
right: 13px;
top: 10px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
color: #314659;
padding: 0 6px;
border-radius: 5px
}
.esa-toolbar {
position: fixed;
display: grid;
z-index: 999;
bottom: 30px;
right: 30px
}
.esa-toolbar .esa-toolbar-contents, .esa-toolbar .esa-toolbar-follow, .esa-toolbar .esa-toolbar-gotop {
height: 45px;
width: 45px;
font-weight: 400;
position: relative;
outline: 0;
cursor: pointer;
border: 1px solid transparent;
transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear;
margin-top: 5px;
border-color: #eef2f8;
background-color: #fff;
background-position: center;
background-repeat: no-repeat
}
.esa-toolbar .esa-toolbar-contents:hover, .esa-toolbar .esa-toolbar-follow:hover, .esa-toolbar .esa-toolbar-gotop:hover {
color: #2D8CF0;
border-color: #2D8CF0
}
.esa-toolbar .esa-toolbar-gotop {
display: none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAACL0lEQVRIS+3TwWvTUBwH8O/vJSLrFBURFPSkoIiCVz3IilObFA/aNR0yEEk6EXfxH1D0L5DdyroMHaJL1a1Ikw3H6kVBHHjyIKKgMEQmbOqsTpv8JOkmna4mvQyRvVv4/fL78L7vPcIKLFoBA6tIUyn/e3H1F+xjYB4B8EyGp53RTkxF2VLkneQLTieYBwmQ/cEMfgsJh41U8k0YFAnJW3YPAb2Afxv5CZj2gdAK8BQgjuia8uJvUCiSt+wrBFxaGOJ8WYeTsQr2kscTAG1k5g+eJLV1dySeN4IaIsxMpuXkQMjW4kFh55aW0/F4vOp/D9wZ2+N67gQB25h5RmJx/Gyn8nQ5aFmk17bXtn7mGyDSAoBh6ppiEBHXDzFvje3wpADaxcAcGAkjoz76HfoDyVkPNsj44QA4GDQzrukZ9WKjKK7fG99crX4vA9gP8FePhJpNKw/r+5cgfXft7cLFOIDdCxFdNjT1atjt6S8W12NeHgXoEAPzgEgZWqK0+N8vZMAqHfAAB6CtzOwBlDUyqhkGLNYt63HLJ8zaBLQxUCWQpmvKsF8PEHNotN0jt0igGBjfIHBKT6t+ZE0t/yxjc3yfQEcBdplEl5FWblOfZWcE+CZAEgMfSXC73pGcbGp6XXMuN7lG3vR+GKBkcGeIz1N+qDRIRF1RH1YUvFwuy6+nKyM1iGepluVMtytJ1rlU4l2UIVF6fOjVdOUCs3gZ+uKjDAzrWUXCElpS/3/i+gn3gM6tu0xSdwAAAABJRU5ErkJggg==)
}
.esa-toolbar .esa-toolbar-contents {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAuUlEQVRIS2NkoANgpIMdDPSxZO6qbQeQffOf+X98SrD3w0WLdnL/5vi7lRo+ZZy7att/ZIMYGRi0k8K8rs1ctZufheH3B6pYMnv1dgdkg/5x/DmV7uv7bdWqVcwfGXltqWIJNQwhZAZ9Ip6QK6ghP4x8Mnfl1gaUJMzIODUpzOv1pG3b2Lk//6+kSnDRJZ/QxSfUCA5CZgyj1EXIq9SQp09w0aUUpk8+oUelRY2IJWQGfSKekCuoIQ8At39XNxqN1mQAAAAASUVORK5CYII=)
}
.esa-toolbar .esa-toolbar-follow {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAsUlEQVRIS2NkIAHMXbU98D/D/zn/GRlTU0M91xGrlZFYhSB1c1Zu62RkZChj+M/QmxzuVUKs3lFLRoOLcFoZTV30ySdzV29zY2BgtGT494+ghf8ZGF0YGRmskXP8pG3b2Lm/MqQx/PsvjBGrTEz/Gf8xHmWcs3LrC0ZGRnHC0Y6kAqlYmbNyqx0jI+NBnPr/M/xgpKlPwDYzPiUYRMguHE3Co8E1WtQTzvPDJ5+Q2+4CADezs7EkSK8aAAAAAElFTkSuQmCC)
}
.esa-profile-avatar {
margin-top: 15px;
border-radius: 3px;
width: 100%
}
.esa-follow-button {
z-index: 999;
display: none;
position: fixed;
bottom: 30px;
right: 30px;
height: 45px;
width: 45px;
font-weight: 400;
outline: 0;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 12px;
border-radius: 50px;
color: #515a6e;
background-color: #fff;
border-color: #dcdee2
}
.esa-follow-button:hover {
color: #2D8CF0;
border-color: #2D8CF0;
background-color: #fff
}
.esa-mobile-menu {
display: none;
position: fixed;
top: 7px;
right: 15px;
z-index: 941113;
font-size: 1.5em;
cursor: pointer;
color: #7f7f7f
}
.esa-mobile-menu:after {
content: "\2630";
font-size: 1.5em;
font-family: fontello
}
.esa-search-btn {
display: block;
padding: 14px 0;
cursor: pointer
}
.esa-search-close {
display: none;
padding: 14px 0;
cursor: pointer
}
.esa-search-box {
display: none;
position: fixed;
top: 61px;
height: auto;
padding: 10px 0;
background-color: #fff;
width: 960px;
text-align: center;
border-bottom: 1px #eef2f8 solid;
z-index: 999
}
.esa-search-box .input_my_zzk {
color: #314659;
border: solid 1px #eef2f8;
width: 45%;
height: 32px;
padding: 0 7px;
border-right: none;
font-size: 16px;
font-weight: 300;
border-radius: 2px 0 0 2px;
outline: 0;
background-color: #fff
}
.esa-search-box .btn_my_zzk {
height: 34px;
font-size: 14px;
font-weight: 300;
margin-left: -5px;
background-color: #2D8CF0;
border: none;
color: #fff;
cursor: pointer;
width: 75px;
outline: 0
}
.esa-catalog {
position: fixed;
top: 120px;
right: 1px;
width: auto;
height: auto;
z-index: 1000
}
.esa-catalog-title {
cursor: move;
padding-left: 12px;
width: 100%;
height: 35px;
line-height: 36px;
border-bottom: 1px solid #eef2f8;
font-size: 12px;
font-weight: 600;
color: #314659
}
.esa-catalog-title:before {
content: "\2632";
margin-right: 5px
}
.esa-catalog-close {
position: absolute;
right: 15px;
top: 10px;
cursor: pointer
}
.esa-catalog-contents {
overflow: hidden;
display: none;
color: #314659;
border: 1px solid #eef2f8;
min-width: 150px;
opacity: 1;
font-size: inherit;
font-weight: 300;
background-color: #fff;
z-index: 19941112
}
.esa-catalog-contents ul {
padding: 10px 15px;
max-height: 350px;
overflow-y: auto
}
.esa-catalog-contents ul li {
margin-top: 5px;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
color: #314659
}
.esa-catalog-contents ul li code {
font-family: inherit
}
.esa-catalog-contents ul li a:hover {
color: #2D8CF0;
text-decoration: none
}
.esa-catalog-contents ul li .level1 {
margin-left: 0
}
.esa-catalog-contents ul li .level2 {
margin-left: 10px
}
.esa-catalog-contents ul li .level3 {
margin-left: 26px
}
.esa-anchor {
opacity: 0;
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
margin-left: 8px
}
.esa-post-signature {
padding: 12px 24px 12px 30px;
margin-top: 15px;
margin-left: 5px;
border-left-width: 4px;
font-size: 15px;
line-height: 2;
border-left-style: solid;
background-color: #f8f8f8;
position: relative;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-left-color: #2D8CF0;
z-index: 1
}
.esa-post-signature:before {
content: "!";
background-color: #2D8CF0;
position: absolute;
top: 25px;
left: -12px;
color: #fff;
width: 20px;
height: 20px;
border-radius: 100%;
text-align: center;
line-height: 20px;
font-weight: 700;
font-size: 14px
}
.esa-post-signature p {
margin: 0 !important
}
.esa-post-signature a {
color: #314659 !important
}
.esa-layer {
position: fixed;
top: 70px;
text-align: center;
line-height: 25px;
font-size: 15px;
font-family: inherit;
width: 100%;
display: none;
z-index: 9999999
}
.esa-layer-content {
position: relative;
background: rgba(0, 0, 0, .7);
max-width: 250px;
padding: 5px 10px;
font-size: 14px;
border-radius: 5px;
color: #e0e0e0;
display: inline-block
}
#div_digg {
position: static;
float: none;
margin: 35px auto 85px auto;
z-index: -1;
width: 200px
}
#div_digg .buryit, #div_digg .diggit {
background: #fff;
margin: 0;
display: inline-block;
width: auto;
height: 32px;
border-width: 0;
cursor: pointer;
color: #fff;
user-select: none;
padding: 0 10px;
border-radius: 5px;
transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear
}
#div_digg .diggit {
background-color: #18b566;
border-color: #18b566
}
#div_digg .diggit:hover {
background-color: #47cb89;
border-color: #47cb89
}
#div_digg .buryit {
background-color: #ed4014;
border-color: #ed4014
}
#div_digg .buryit:hover {
background-color: #f16643;
border-color: #f16643
}
#div_digg .buryit .burynum, #div_digg .diggit .diggnum {
color: snow;
display: inline-block;
font-size: 15px;
position: relative;
top: 5px;
width: 65px
}
#div_digg .diggit .diggnum:before {
content: "\63a8\8350";
font-size: 15px;
margin-right: 5px
}
#div_digg .buryit .burynum:before {
content: "\53cd\5bf9";
font-size: 15px;
margin-right: 5px
}
.feedbackItem .feedbackListSubtitle {
color: transparent
}
.feedbackItem .feedbackListSubtitle .sendMsg2This {
background: 0 0;
padding-left: 0;
font-size: 15px
}
.feedbackItem .feedbackListSubtitle .sendMsg2This::before {
content: "✉️"
}
.feedbackItem a {
color: #314659
}
.feedbackItem .louzhu {
background: #2D8CF0 !important;
color: #fff;
border-radius: 2px;
margin: 0 2px;
padding: 0 6px 2px 6px !important
}
.feedbackItem .comment_date {
color: #666
}
.feedbackItem .comment_quote {
border: 1px dashed #2D8CF0;
border-radius: 3px
}
#comment_nav {
visibility: hidden
}
.feedbackItem .feedbackCon {
background: 0 0;
padding: 10px 0 10px 0;
border-bottom: 1px solid #eef2f8
}
.feedbackItem .feedbackCon .esa-comment-avatar {
float: left
}
.feedbackItem .feedbackCon .esa-comment-avatar img {
border-radius: 50%;
transition: all .5s ease-out;
-webkit-transition: all .6s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out
}
.feedbackItem .feedbackCon .esa-comment-avatar img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg)
}
.feedbackItem .feedbackCon .blog_comment_body {
font-size: 14px;
font-weight: 300;
border-radius: 3px;
padding: 10px;
margin-left: 55px;
color: #314659;
background-color: rgba(193, 193, 193, .2)
}
.feedbackItem .feedbackCon .blog_comment_body a {
color: #2D8CF0
}
.feedbackItem .feedbackCon .blog_comment_body img {
border-radius: 3px
}
.feedbackItem .feedbackCon .comment_vote {
margin-top: 12px
}
.feedback_area_title {
border-bottom: 1px solid #eef2f8;
margin-bottom: 15px;
font-size: 20px;
font-weight: 300;
padding-left: 0;
padding-bottom: 5px
}
.commentform #commentform_title {
background-image: none;
padding-left: 0;
font-size: 20px
}
.commentform #tip_comment {
color: #f37f7f !important;
margin: 15px 0;
display: block
}
.commentform .commentbox_title {
border-bottom: 1px solid #eef2f8;
font-size: 14px;
font-weight: 300
}
.commentform .commentbox_title .commentbox_title_left .commentbox_tab.active, .commentform .commentbox_title .commentbox_title_left .commentbox_tab:hover {
border-bottom: 2px solid #2D8CF0;
color: #2D8CF0
}
.commentform .commentbox_title .commentbox_title_right .comment_svg:hover, .commentform .commentbox_title .commentbox_title_right .comment_svg_stroke:hover {
fill: #2D8CF0
}
.commentform .comment_textarea {
width: 100%;
border: 1px solid #eef2f8;
background-color: transparent;
color: #314659
}
.commentform .comment_textarea:focus {
outline: 0
}
.commentform .comment_textarea:hover {
border-color: #2D8CF0
}
.commentform #tbCommentBody {
color: #314659;
background-color: transparent
}
.commentform .feedbackCon {
border-bottom: 1px solid #eef2f8;
background: 0 0;
padding: 0
}
.commentform .comment_preview p {
font-size: 15px;
font-weight: 300
}
.commentform #commentbox_opt {
display: block
}
.commentform #commentbox_opt a {
color: #314659
}
.commentform #btn_comment_submit {
width: auto;
height: auto;
border-width: 0;
cursor: pointer;
color: #fff;
background-color: #2D8CF0;
border-color: #2D8CF0;
font-weight: 300;
user-select: none;
padding: 5px 20px;
font-size: 12px;
border-radius: 5px;
outline: 0;
transition: all .3s
}
.commentform #btn_comment_submit:hover {
opacity: .7
}
.commentform .comment_my_posted > img {
display: none
}
.commentform .comment_my_posted > a b {
font-size: 16px;
font-weight: 300
}
.commentform .bq_post_comment {
margin-top: 5px;
font-size: 13px;
display: block;
color: #314659;
background-color: rgba(193, 193, 193, .2);
border: none;
border-radius: 3px
}
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%, 100% {
transform: rotate(0)
}
20%, 60% {
transform: rotate(-25deg)
}
40%, 80% {
transform: rotate(10deg)
}
}
::-webkit-scrollbar {
width: 3px;
height: 3px
}
::-webkit-scrollbar-thumb {
border-radius: 1px;
box-shadow: inset 0 0 5px #314659;
background: #314659
}
::-webkit-scrollbar-track {
background: 0 0;
border-radius: 1px
}
::-moz-selection, ::selection {
color: #2D8CF0
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
#blog-comments-placeholder, #comment_form {
padding: 10px;
margin-left: 0
}
}
@media only screen and (max-width: 767px) {
#home {
font-size: 12px !important
}
#mainContent .forFlow {
padding-top: 15px
}
#sideBar, .esa-catalog, .postDesc {
display: none
}
.postBody {
padding: 0 !important
}
#main {
margin-top: 60px;
padding: 0 15px !important
}
#topics .postTitle {
padding-left: 0 !important;
padding-top: 10px
}
#cnblogs_post_body table {
display: table !important
}
#cnblogs_post_body img {
width: 100%;
box-shadow: 0 0 10px #c4c4c4;
max-width: none !important
}
#comment_nav, #commentbox_main {
margin: 0
}
#comment_form {
padding: 5px;
margin-left: 0
}
.esa-mobile-menu {
display: block
}
.forFlow {
margin-right: 0;
margin-left: 0 !important
}
#header {
width: auto
}
#header #navigator {
display: none;
width: 100%;
margin-top: 60px
}
#navList {
width: inherit
}
#navList li {
float: none
}
#navList li #blog_nav_tags {
display: block !important
}
#navList a:active, #navList a:link, #navList a:visited {
width: 100%;
background-color: #2c3e50;
color: #fff !important;
padding: 15px 0
}
#navList a:hover {
color: #2D8CF0;
background-color: #2c3e50 !important
}
.feedbackItem .feedbackManage {
width: auto
}
.github-corner {
display: none
}
}
@media only screen and (max-width: 410px) {
#div_digg {
display: grid;
width: 100%
}
#div_digg .buryit, #div_digg .diggit, #div_digg .favorite {
margin: 5px 0
}
}
[data-tips] {
overflow: hidden
}
[data-tips]:hover {
overflow: visible
}
[data-tips]::after, [data-tips]::before {
position: absolute;
transition: all .3s;
transform: translate3d(-50%, 0, 0);
opacity: 0;
left: 37px;
z-index: 10
}
[data-tips]::before {
content: attr(data-tips);
border-radius: 6px;
background-color: rgba(100, 100, 100, .8);
color: #fff;
height: 24px;
line-height: 24px;
padding: 0 6px;
font-size: 12px;
white-space: nowrap;
top: -24px;
left: 50%
}
[data-tips]::after {
content: "";
border: 5px solid #333;
border-color: rgba(100, 100, 100, .8) transparent transparent transparent;
top: 0;
left: 50%
}
[data-tips]:hover::after, [data-tips]:hover::before {
opacity: 1
}
[data-tips]:hover::after, [data-tips]:hover::before {
transform: translate3d(-50%, -7px, 0)
}
.esa-sponsor {
position: relative;
width: 100%;
margin-top: 70px;
height: 160px
}
.esa-sponsor .posa {
position: absolute
}
.esa-sponsor .tr3 {
transition: all .3s
}
.esa-sponsor .blur {
-webkit-filter: blur(3px);
filter: blur(3px)
}
.esa-sponsor .text {
position: absolute;
left: calc(50% - 120px);
top: calc(50% - 60px);
font-size: 12px;
width: 70px;
height: 70px;
line-height: 70px;
color: #fff;
background: #ffd886 url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_like.png) no-repeat center 10px;
background-size: 20px;
border-radius: 35px;
text-align: center;
z-index: -1;
transform: rotatez(-15deg)
}
.esa-sponsor .github {
position: absolute;
left: calc(50% + 135px);
top: calc(50% - 30px);
width: 24px;
height: 24px;
background: no-repeat center center url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_github.png);
background-size: contain;
opacity: .3;
transform: rotatez(15deg)
}
.esa-sponsor .box {
left: calc(50% - 150px);
top: calc(50% - 15px);
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
width: 299px;
height: 28px;
float: left;
z-index: 1;
margin-left: 0
}
.esa-sponsor .box li {
width: 99px;
float: left;
margin: 0 !important;
text-align: center;
border-left: 1px solid #ddd;
background: no-repeat center center;
background-color: rgba(204, 217, 220, .1);
background-size: 45px;
transition: all .3s;
cursor: pointer;
overflow: hidden;
line-height: 600px;
height: 28px;
-webkit-filter: grayscale(1);
filter: grayscale(1);
opacity: .5;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0
}
.esa-sponsor .box li:hover {
background-color: rgba(204, 217, 220, .3);
-webkit-filter: grayscale(0);
filter: grayscale(0);
opacity: 1
}
.esa-sponsor .box li:first-child {
border-width: 0
}
.esa-sponsor .box li a {
display: block
}
.esa-sponsor .box .paypal {
background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_paypal.png)
}
.esa-sponsor .box .alipay {
background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_alipay.png)
}
.esa-sponsor .box .wechat {
background-image: url(http://images.cnblogs.com/cnblogs_com/esofar/1504962/o_wechat.png)
}
.esa-sponsor #QRBox {
top: 0;
left: 0;
z-index: 1;
display: none;
perspective: 400px;
width: 100%;
height: 100%
}
.esa-sponsor #QRBox #MainBox {
cursor: pointer;
position: absolute;
text-align: center;
width: 200px;
height: 200px;
left: calc(50% - 100px);
top: calc(50% - 100px);
background: #fff no-repeat center center;
background-size: 190px;
border-radius: 6px;
box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
opacity: 0;
transition: all 1s ease-in-out;
transform-style: preserve-3d;
transform-origin: center center;
overflow: hidden
}
.esa-sponsor #MainBox.showQR {
opacity: 1;
animation-name: showQR;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation: showQR 3s ease-in-out 0s 1 normal forwards
}
@keyframes showQR {
from {
transform: rotateX(90deg)
}
8% {
opacity: 1;
transform: rotateX(-60deg)
}
18% {
opacity: 1;
transform: rotateX(40deg)
}
34% {
opacity: 1;
transform: rotateX(-28deg)
}
44% {
opacity: 1;
transform: rotateX(18deg)
}
58% {
opacity: 1;
transform: rotateX(-12deg)
}
72% {
opacity: 1;
transform: rotateX(9deg)
}
88% {
opacity: 1;
transform: rotateX(-5deg)
}
96% {
opacity: 1;
transform: rotateX(2deg)
}
to {
opacity: 1
}
}
.esa-sponsor #MainBox.hideQR {
opacity: 1;
animation-name: hideQR;
animation-duration: .5s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation: hideQR .5s ease-in-out 0s 1 normal forwards
}
@keyframes hideQR {
20%, 50% {
transform: scale(1.08, 1.08);
opacity: 1
}
to {
opacity: 0;
transform: rotateZ(40deg) scale(.6, .6)
}
}
::-moz-selection, ::selection {
background-color: #2D8CF0;
color: #e1e1e1
}
.cnblogs-markdown .hljs {
display: block;
color: #333;
overflow-x: auto;
background: #F2F4F5 !important;
border: none !important;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
padding: 1em !important;
font-size: 14px !important
}
.hljs-comment, .hljs-meta {
color: #969896
}
.hljs-emphasis, .hljs-quote, .hljs-string, .hljs-strong, .hljs-template-variable, .hljs-variable {
color: #df5000
}
.hljs-keyword, .hljs-selector-tag, .hljs-type {
color: #a71d5d
}
.hljs-attribute, .hljs-bullet, .hljs-literal, .hljs-symbol {
color: #0086b3
}
.hljs-name, .hljs-section {
color: #63a35c
}
.hljs-tag {
color: #333
}
.hljs-attr, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id, .hljs-selector-pseudo, .hljs-title {
color: #795da3
}
.hljs-addition {
color: #55a532;
background-color: #eaffea
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec
}
.hljs-link {
text-decoration: underline
}
================================================
FILE: package.json
================================================
{
"name": "cnblogs-mouse",
"version": "0.0.1",
"description": "一款专注于博客园鼠标样式的主题",
"main": "index.js",
"scripts": {
"theme-default": "lessc ./src/themes/default.less ./dist/themes/default.min.css -clean-css",
"theme-dark": "lessc ./src/themes/dark.less ./dist/themes/dark.min.css -clean-css",
"theme-goddess": "lessc ./src/themes/goddess.less ./dist/themes/goddess.min.css -clean-css",
"script": "babel src/mouse.js -o src/mouse.es5.js && uglifyjs src/mouse.es5.js -o dist/mouse.min.js -c -m",
"build": "npm run script & npm run theme-default & npm run theme-dark & npm run theme-goddess"
},
"repository": {
"type": "git",
"url": "git+https://github.com/esofar/cnblogs-theme-silence.git"
},
"keywords": [],
"author": "Esofar",
"license": "TIM",
"bugs": {
"url": "https://github.com/esofar/cnblogs-theme-silence/issues"
},
"homepage": "https://github.com/esofar/cnblogs-theme-silence#readme",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"less": "^3.9.0",
"less-plugin-clean-css": "^1.5.1",
"uglify-js": "^3.6.0"
},
"dependencies": {}
}
================================================
FILE: src/mouse.js
================================================
(function ($) {
$.extend({
shuicheMouse: (options) => {
var silence = new Silence();
silence.init(options);
}
});
class Silence {
constructor() {
this.defaluts = {
type: 1,
color: false,
};
this.version = '0.0.1';
}
get cnblogs() {
return {
canvase: '#shuicheCanvase',
};
}
/**
* 初始化
* @param {Object} options 全局配置选项
*/
init(options) {
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
window[vendors[xx] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());
if (options) {
$.extend(true, this.defaluts, options);
}
//创建 canvas 标签
var canvas = $("<canvas id='shuicheCanvas' style='position: fixed; left: 0px; top: 0px; z-index: 2147483647;pointer-events:none;'></canvas>");
//var canvas=$("<canvas id='shuicheCanvas'></canvas>");
$("body").append(canvas);
let typeId = this.defaluts.type;
if (typeId >= 1 && typeId < 11) {
this.mouseType1(this.defaluts.type, this.defaluts.color);
}
if (typeId == 11) {
this.mouseType2()
}
if (typeId == 12) {
this.mouseType3()
}
}
mouseType1(type, myColor) {
var canvas = document.getElementById("shuicheCanvas");
var ctx = canvas.getContext("2d");
var c = $("#shuicheCanvas");
var x, y, w, h, cx, cy, l;
var y = [];
var b = {
n: 100,
c: 222, // 颜色 如果是false 则是随机渐变颜色
bc: '#fff', // 背景颜色
r: 0.9,
o: 0.05,
a: 1,
s: 20,
}
var bx = 0, by = 0, vx = 0, vy = 0;
var td = 0;
var p = 0;
var hs = 0;
re();
var color = Math.random() * 360;
var color2;
if (myColor) {
color2 = myColor;
} else {
color2 = 'hsl(' + color + ',100%,80%)';
}
$(window).resize(function () {
re();
});
var tp = type;
//每一帧渲染都会执行此函数
function begin() {
if (tp == 1) {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.arc(y[i].x, y[i].y, y[i].r, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
y[i].r += b.r;
y[i].o -= b.o;
if (y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 2) {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].r = 10;
ctx.shadowBlur = 20;
ctx.shadowColor = color2;
ctx.arc(y[i].x, y[i].y, y[i].r, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
y[i].o -= b.o;
y[i].v += b.a;
y[i].y += y[i].v;
if (y[i].y >= h + y[i].r || y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 3) {
td += 5;
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur = 20;
ctx.shadowColor = color2;
y[i].r = (1 - (y[i].y / h)) * 20;
ctx.arc(y[i].x, y[i].y, y[i].r, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
y[i].o = y[i].y / h;
y[i].v += b.a;
y[i].y -= b.s;
y[i].x += (Math.cos((y[i].y + td) / 100) * 10);
if (y[i].y <= 0 - y[i].r || y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 4) {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
ctx.shadowBlur = 20;
ctx.shadowColor = color2;
y[i].vx2 += (cx - y[i].wx) / 1000;
y[i].vy2 += (cy - y[i].wy) / 1000;
y[i].wx += y[i].vx2;
y[i].wy += y[i].vy2;
y[i].o -= b.o / 2;
y[i].r = 10;
ctx.arc(y[i].wx, y[i].wy, y[i].r, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
if (y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 5) {
if (!b.c) {
color += .1;
color2 = 'hsl(' + color + ',100%,80%)';
}
ctx.clearRect(0, 0, w, h);
p += 10;
ctx.globalAlpha = 1;
ctx.fillStyle = color2;
ctx.shadowBlur = 20;
ctx.shadowColor = color2;
ctx.beginPath();
ctx.arc(cx + 50 * Math.cos(p * Math.PI / 180), cy + 50 * Math.sin(p * Math.PI / 180), 10, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx + 50 * Math.cos((p + 180) * Math.PI / 180), cy + 50 * Math.sin((p + 180) * Math.PI / 180), 10, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx + 50 * Math.cos((p + 90) * Math.PI / 180), cy + 50 * Math.sin((p + 90) * Math.PI / 180), 10, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(cx + 50 * Math.cos((p + 270) * Math.PI / 180), cy + 50 * Math.sin((p + 270) * Math.PI / 180), 10, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.shadowBlur = 0;
} else if (tp == 6) {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.strokeStyle = color2;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo(y[i].x, y[i].y);
ctx.lineTo((y[i].wx + y[i].x) / 2 + Math.random() * 20, (y[i].wy + y[i].y) / 2 + Math.random() * 20);
ctx.lineTo(y[i].wx, y[i].wy);
ctx.closePath();
ctx.stroke();
y[i].o -= b.o;
if (y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 7) {
ctx.clearRect(0, 0, w, h);
if (y.length < b.n * 2) {
hs = Math.random() * 2 * Math.PI;
y.push({
x: cx + ((Math.random() - .5) * 100 * Math.cos(hs)),
y: cy + ((Math.random() - .5) * 100 * Math.cos(hs)),
o: 1,
h: hs
});
}
for (var i = 0; i < y.length; i++) {
ctx.globalAlpha = y[i].o;
ctx.fillStyle = color2;
ctx.beginPath();
y[i].x += (cx - y[i].x) / 10;
y[i].y += (cy - y[i].y) / 10;
ctx.arc(y[i].x, y[i].y, 1, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
y[i].o -= b.o;
if (y[i].o <= 0) {
y[i].h = Math.random() * 2 * Math.PI;
y[i].x = cx + ((Math.random() - .5) * 100 * Math.cos(y[i].h));
y[i].y = cy + ((Math.random() - .5) * 100 * Math.sin(y[i].h));
y[i].o = 1;
}
;
}
} else if (tp == 8) {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = color2;
if (cx % 4 == 0) {
cx += 1;
} else if (cx % 4 == 2) {
cx -= 1
} else if (cx % 4 == 3) {
cx -= 2
}
if (cy % 4 == 0) {
cy += 1;
} else if (cy % 4 == 2) {
cy -= 1
} else if (cy % 4 == 3) {
cy -= 2
}
for (var i = cx - 60; i < cx + 60; i += 4) {
for (var j = cy - 60; j < cy + 60; j += 4) {
if (Math.sqrt(Math.pow(cx - i, 2) + Math.pow(cy - j, 2)) <= 60) {
ctx.globalAlpha = 1 - (Math.sqrt(Math.pow(cx - i, 2) + Math.pow(cy - j, 2)) / 60);
if (Math.random() < .2) {
ctx.fillRect(i, j, 3, 3);
}
}
}
}
} else if (tp == 9) {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = color2;
if (cx % 4 == 0) {
cx += 1;
} else if (cx % 4 == 2) {
cx -= 1
} else if (cx % 4 == 3) {
cx -= 2
}
if (cy % 4 == 0) {
cy += 1;
} else if (cy % 4 == 2) {
cy -= 1
} else if (cy % 4 == 3) {
cy -= 2
}
if (y.length < b.n) {
y.push({x: cx, y: cy, xv: 0, yv: 0, o: 1});
}
for (var i = 0; i < y.length; i++) {
if (y[i].xv == 0 && y[i].yv == 0) {
if (Math.random() < .5) {
if (Math.random() < .5) {
y[i].xv = 3;
} else {
y[i].xv = -3;
}
} else {
if (Math.random() < .5) {
y[i].yv = 3;
} else {
y[i].yv = -3;
}
}
} else {
if (y[i].xv == 0) {
if (Math.random() < .66) {
y[i].yv = 0;
if (Math.random() < .5) {
y[i].xv = 3;
} else {
y[i].xv = -3;
}
}
} else if (y[i].yv == 0) {
if (Math.random() < .66) {
y[i].xv = 0;
if (Math.random() < .5) {
y[i].yv = 3;
} else {
y[i].yv = -3;
}
}
}
}
y[i].o -= b.o / 2;
ctx.globalAlpha = y[i].o;
y[i].x += y[i].xv;
y[i].y += y[i].yv;
ctx.fillRect(y[i].x, y[i].y, 3, 3);
if (y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
} else if (tp == 10) {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = color2;
y.push({x: cx, y: cy, xv: 2, yv: 1, o: 1});
for (var i = 0; i < y.length; i++) {
y[i].o -= b.o / 10;
ctx.globalAlpha = y[i].o;
y[i].x += (Math.random() - .5) * 4;
y[i].y -= 1;
ctx.fillRect(y[i].x, y[i].y, 2, 2);
if (y[i].o <= 0) {
y.splice(i, 1);
i--;
}
;
}
}
window.requestAnimationFrame(begin);
}
function re() {
w = window.innerWidth;
h = window.innerHeight;
canvas.width = w;
canvas.height = h;
cx = w / 2;
cy = h / 2;
};
$(window).mousemove(function (e) {
cx = e.pageX - c.offset().left;
cy = e.pageY - c.offset().top;
if (tp == 4) {
if (Math.random() <= .5) {
if (Math.random() <= .5) {
bx = -10;
} else {
bx = w + 10;
}
by = Math.random() * h;
} else {
if (Math.random() <= .5) {
by = -10;
} else {
by = h + 10;
}
bx = Math.random() * w;
}
vx = (Math.random() - .5) * 8;
vy = (Math.random() - .5) * 8;
}
if (tp == 1 || tp == 2 || tp == 3) {
y.push({x: cx, y: cy, r: b.r, o: 1, v: 0});
} else if (tp == 4) {
y.push({x: cx, y: cy, r: b.r, o: 1, v: 0, wx: bx, wy: by, vx2: vx, vy2: vy});
} else if (tp == 6) {
y.push({
x: cx + ((Math.random() - .5) * 30),
y: cy + ((Math.random() - .5) * 30),
o: 1,
wx: cx,
wy: cy
});
}
});
begin();
}
mouseType2() {
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var RADIUS = 70;
var RADIUS_SCALE = 1;
var RADIUS_SCALE_MIN = 1;
var RADIUS_SCALE_MAX = 1.5;
var QUANTITY = 25;
var canvas;
var context;
var particles;
var mouseX = SCREEN_WIDTH * 0.5;
var mouseY = SCREEN_HEIGHT * 0.5;
var mouseIsDown = false;
function init() {
canvas = document.getElementById('shuicheCanvas');
if (canvas && canvas.getContext) {
context = canvas.getContext('2d');
// Register event listeners
window.addEventListener('mousemove', documentMouseMoveHandler, false);
window.addEventListener('mousedown', documentMouseDownHandler, false);
window.addEventListener('mouseup', documentMouseUpHandler, false);
document.addEventListener('touchstart', documentTouchStartHandler, false);
document.addEventListener('touchmove', documentTouchMoveHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
createParticles();
windowResizeHandler();
loop()
}
}
//创建线条
function createParticles() {
particles = [];
for (var i = 0; i < QUANTITY; i++) {
var particle = {
size: 1,
position: {x: mouseX, y: mouseY},
offset: {x: 0, y: 0},
shift: {x: mouseX, y: mouseY},
speed: 0.01 + Math.random() * 0.04,
targetSize: 1,
fillColor: '#' + (Math.random() * 0x904040 + 0xaaaaaa | 0).toString(16),
orbit: RADIUS * .5 + (RADIUS * .5 * Math.random())
};
particles.push(particle);
}
}
//鼠标移动事件
function documentMouseMoveHandler(event) {
mouseX = event.clientX - (window.innerWidth - SCREEN_WIDTH) * .5;
mouseY = event.clientY - (window.innerHeight - SCREEN_HEIGHT) * .5;
}
//鼠标按下
function documentMouseDownHandler(event) {
mouseIsDown = true;
}
//鼠标抬起
function documentMouseUpHandler(event) {
mouseIsDown = false;
}
//移动端 touch
function documentTouchStartHandler(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;
;
mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
}
}
//移动端滑动
function documentTouchMoveHandler(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX - (window.innerWidth - SCREEN_WIDTH) * .5;
;
mouseY = event.touches[0].pageY - (window.innerHeight - SCREEN_HEIGHT) * .5;
}
}
//窗口大小改变
function windowResizeHandler() {
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
}
function loop() {
if (mouseIsDown) {
RADIUS_SCALE += (RADIUS_SCALE_MAX - RADIUS_SCALE) * (0.02);
} else {
RADIUS_SCALE -= (RADIUS_SCALE - RADIUS_SCALE_MIN) * (0.02);
}
RADIUS_SCALE = Math.min(RADIUS_SCALE, RADIUS_SCALE_MAX);
//context.fillStyle = 'rgba(0,0,0,0.05)';
//context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.clearRect(0, 0, context.canvas.width, context.canvas.height)
for (var i = 0, len = particles.length; i < len; i++) {
var particle = particles[i];
var lp = {x: particle.position.x, y: particle.position.y};
// Rotation
particle.offset.x += particle.speed;
particle.offset.y += particle.speed;
// Follow mouse with some lag
particle.shift.x += (mouseX - particle.shift.x) * (particle.speed);
particle.shift.y += (mouseY - particle.shift.y) * (particle.speed);
// Apply position
particle.position.x = particle.shift.x + Math.cos(i + particle.offset.x) * (particle.orbit * RADIUS_SCALE);
particle.position.y = particle.shift.y + Math.sin(i + particle.offset.y) * (particle.orbit * RADIUS_SCALE);
// Limit to screen bounds
particle.position.x = Math.max(Math.min(particle.position.x, SCREEN_WIDTH), 0);
particle.position.y = Math.max(Math.min(particle.position.y, SCREEN_HEIGHT), 0);
particle.size += (particle.targetSize - particle.size) * 0.01;
if (Math.round(particle.size) == Math.round(particle.targetSize)) {
particle.targetSize = 1 + Math.random() * 2;
}
context.beginPath();
context.fillStyle = particle.fillColor;
context.strokeStyle = particle.fillColor;
context.lineWidth = particle.size;
context.moveTo(lp.x, lp.y);
context.lineTo(particle.position.x, particle.position.y);
context.stroke();
context.arc(particle.position.x, particle.position.y, particle.size / 2, 0, Math.PI * 2, true);
context.fill();
}
window.requestAnimationFrame(loop);
}
init()
}
mouseType3() {
//创建 canvas 标签
var div = $("<div id='shuicheDiv' style='position: fixed;width: 100%;height: "+ $(window).height() +"px; left: 0px; top: 0px; z-index: 2147483647;pointer-events:none;'></div>");
$("body").append(div);
var Follow = function () {
var $ = function (i) {
return document.getElementById(i)
};
var addEvent = function (o, e, f) {
window.addEventListener ? window.addEventListener(e, f, false) : window.attachEvent('on' + e, function () {
f.call(window)
})
}
var OBJ = []
var sp
var rs
var N = 0
var m;
var init = function (id, config) {
this.config = config || {};
this.obj = $(id);
sp = this.config.speed || 4;
rs = this.config.animR || 1;
m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
this.setXY();
this.start();
}
init.prototype = {
setXY: function () {
var _this = this;
addEvent(this.obj, 'mousemove', function (e) {
e = e || window.event;
m.x = e.clientX;
m.y = e.clientY;
})
},
start: function () {
var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
OBJ[N++] = OO = new CObj(null, 0, 0);
for (var i = 0; i < 360; i += 20) {
var O = OO;
for (var j = 10; j < 35; j += 1) {
var x = fn(i, j).x,
y = fn(i, j).y;
OBJ[N++] = o = new CObj(O, x, y);
O = o;
}
}
setInterval(function () {
for (var i = 0; i < N; i++) OBJ[i].run();
}, 16);
}
}
var CObj = function (p, cx, cy) {
var obj = document.createElement("span");
this.css = obj.style;
this.css.backgroundColor = "#2D8CF0"
this.css.width="2px";
this.css.height="2px";
this.css.position = "absolute";
this.css.left = "-1000px";
this.css.zIndex = 1000 - N;
document.getElementById("shuicheDiv").appendChild(obj);
this.ddx = 0;
this.ddy = 0;
this.PX = 0;
this.PY = 0;
this.x = 0;
this.y = 0;
this.x0 = 0;
this.y0 = 0;
this.cx = cx;
this.cy = cy;
this.parent = p;
}
CObj.prototype.run = function () {
if (!this.parent) {
this.x0 = m.x;
this.y0 = m.y;
} else {
this.x0 = this.parent.x;
this.y0 = this.parent.y;
}
this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
this.css.left = Math.round(this.x) + 'px';
this.css.top = Math.round(this.y) + 'px';
}
return init;
}();
new Follow('shuicheDiv', {
speed: 4, animR: 2, fn: function (i, j) {
return {
x: j / 4 * Math.cos(i),
y: j / 4 * Math.sin(i)
}
}
})
}
}
})(jQuery);
gitextract_llo5_v6d/
├── .babelrc
├── README.md
├── cnblogs-theme-silence/
│ ├── README.md
│ └── css.css
├── package.json
└── src/
└── mouse.js
SYMBOL INDEX (7 symbols across 1 files)
FILE: src/mouse.js
class Silence (line 9) | class Silence {
method constructor (line 10) | constructor() {
method cnblogs (line 19) | get cnblogs() {
method init (line 29) | init(options) {
method mouseType1 (line 80) | mouseType1(type, myColor) {
method mouseType2 (line 448) | mouseType2() {
method mouseType3 (line 608) | mouseType3() {
Condensed preview — 6 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (71K chars).
[
{
"path": ".babelrc",
"chars": 61,
"preview": "{\n \"presets\":[\n \"es2015\"\n ],\n \"plugins\":[]\n}\n"
},
{
"path": "README.md",
"chars": 1279,
"preview": "# 前言\ncnblog-mouse 是一个完整的插件，理论上该插件支持所有的 web 项目，本人只针对了博客园做了测试。\n\n# cnblog-mouse\n博客园鼠标特效, 目前收录了12种特效\n\nDEMO参考: [https://www.c"
},
{
"path": "cnblogs-theme-silence/README.md",
"chars": 1529,
"preview": "# 博客园主题设置\n\n\n主题部署, 具体参考: [https://github.com/esofar/cnblogs-theme-silence](https://github.com/esofar/cnblogs-theme-silenc"
},
{
"path": "cnblogs-theme-silence/css.css",
"chars": 33193,
"preview": "html, body {\n\tbackground: #fff;\n\tmin-height: 100%;\n\tcolor: #314659 !important;\n\tfont-family: Lato, \"PingFang SC\", \"Micro"
},
{
"path": "package.json",
"chars": 1240,
"preview": "{\n \"name\": \"cnblogs-mouse\",\n \"version\": \"0.0.1\",\n \"description\": \"一款专注于博客园鼠标样式的主题\",\n \"main\": \"index.js\",\n "
},
{
"path": "src/mouse.js",
"chars": 28514,
"preview": "(function ($) {\n $.extend({\n shuicheMouse: (options) => {\n var silence = new Silence();\n "
}
]
About this extraction
This page contains the full source code of the shuiche-it/cnblog-mouse GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 6 files (64.3 KB), approximately 19.1k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.