html制作

网站图标制作[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

<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]

<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]

//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]

相关推荐