网站图标制作[icon-url href=“https://fontawesome.com/v5.15/icons?d=gallery” target="_blank"]hitme[/icon-url]
背景添加动态线可以随着鼠标移动[icon-url href=“https://blog.csdn.net/qq_40223005/article/details/80810695” target="_blank"]hitme[/icon-url]
网页各种字体[icon-url href=“https://blog.csdn.net/sinat_39430615/article/details/77142137” target="_blank"]hitme[/icon-url]
舒服的颜色[icon-url href=“https://blog.csdn.net/zhang_hui_cs/article/details/7459414” target="_blank"]hitme[/icon-url]
jquery下载大全[icon-url href=“https://www.jq22.com/jquery-info122” target="_blank"]hitme[/icon-url]
网页内平滑跳转[icon-url href=“https://www.cnblogs.com/ertingbo/p/7093410.html” target="_blank"]hitme[/icon-url]
各种超级炫酷的标题字体[icon-url href=“https://tobiasahlin.com/moving-letters/” target="_blank"]hitme[/icon-url]
下拉菜单[icon-url href=“https://blog.csdn.net/lxhby520/article/details/79984277” target="_blank"]hitme[/icon-url]
数据地图极简[icon-url href=“https://www.highcharts.com.cn/mapdata” target="_blank"]hitme[/icon-url]
内容淡入淡出[icon-url href=“https://blog.csdn.net/NpcCat/article/details/109526355” target="_blank"]hitme[/icon-url]
jQuery smoove 内容淡入淡出原文[icon-url href=“https://smoove.js.org/” target="_blank"]hitme[/icon-url]
corepress修改位置 post-list-item.php
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="bar" data-move-x="-200px">这里的内容如果有很多，可以上下滑动时，就可以淡入淡出</div>
<div class="bar" data-move-x="-200px">这里的内容如果有很多，可以上下滑动时，就可以淡入淡出</div>
<div class="bar" data-move-x="-200px">这里的内容如果有很多，可以上下滑动时，就可以淡入淡出</div>
//类别要和下面对应bar foo..data-move-x data-move-y分别对应左右 上下
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.10/jquery.smoove.min.js"></script>
<script>
$(".bar").smoove({
offset : '15%',
moveX : '100px',
moveY : '100px',
});
</script>
|
天气插件
corepress修改位置 nav-header.php并注释了header-logo-plane部分
[loginshow]
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
| <div id="he-plugin-simple" ></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "0123",
"background": "1",
"tmpColor": "FFFFFF",
"tmpSize": "16",
"cityColor": "FFFFFF",
"citySize": "16",
"aqiColor": "FFFFFF",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "1",
"language": "auto",
"fixed": "false",
"vertical": "top",
"horizontal": "left",
"key": "13188d86e3f04338a9a7523c59ad8930"
}
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
|
[/loginshow]
变色滑动条代码
[loginshow]
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
| //html添加
<div id="progressbar"></div>
<div id="scrollPath"></div>
<script type="text/javascript">
let progress=document.getElementById('progressbar');
let totalHeight=document.body.scrollHeight-window.innerHeight;
window.onscroll=function(){
let progressHeight=(window.pageYOffset/totalHeight)*100;
progress.style.height=progressHeight+"%";
}
</script>
//css添加
*{
margin: 0;
padding: 0;
}
::-webkit-scrollbar{
width: 0;
}
#scrollPath{
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255,255,255,0.05);
}
#progressbar{
position: fixed;
top: 0;
right: 0;
width: 10px;
/* height: 100%; */
background: linear-gradient(to top,#008aff,#00ffe7);
animation: animation 5s linear infinite;
}
@keyframes animation{
0%,100%{
filter: hue-rotate(0deg);
}
50%{
filter: hue-rotate(360deg);
}
}
#progressbar:before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top,#008aff,#00ffe7);
filter: blur(10px);
}
#progressbar:after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top,#008aff,#00ffe7);
filter: blur(30px);
}
|
[/loginshow]
