页面定制代码:
body {
//background: url(https://images.cnblogs.com/cnblogs_com/TomHe789/1652276/o_2002220059545d70ca19b2f73.jpg) fixed;
background-color: white;
background-size: 100%;
background-repeat: no-repeat;
}
#home {
background:white;
opacity: 0.7;
}
#blogTitle h1 {
margin-top: 10px;
font-size: 40px;
transition: all 1s;
}
#blogTitle h1:hover{
transform: translateX(70px);
}
#blogTitle h1:hover a {
color: brown;
}
#blogTitle h2 {
font-size: 18px;
font-weight:bold;
color: brown;
float: left;
margin-left: 40px;
transition: all 1s;
}
#blogTitle h2:hover {
transform: translateX(50px);
color: #515151;
}
#navList a {
transition: all 0.5s;
}
#navigator {
font-size: 15px;
}
#navList a:hover {
color: #e82c07;
font-size:16px
}
.wall{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div#midground{
background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
z-index: -1;
-webkit-animation: cc 200s linear infinite;
-moz-animation: cc 200s linear infinite;
-o-animation: cc 200s linear infinite;
animation: cc 200s linear infinite;
}
div#foreground{
background: url("https://i.postimg.cc/z3jZZD1B/foreground.png");
z-index: -2;
-webkit-animation: cc 253s linear infinite;
-o-animation: cc 253s linear infinite;
-moz-animation: cc 253s linear infinite;
animation: cc 253s linear infinite;
}
div#top{
background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
z-index: -4;
-webkit-animation: da 200s linear infinite;
-o-animation: da 200s linear infinite;
animation: da 200s linear infinite;
}
@-webkit-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@-o-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@-moz-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 600% 0;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-webkit-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-moz-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-ms-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
.pageRightFloat {
position: fixed;
width: 200px;
top: 300px;
right: -150px;
transition: top .4s ease 0s;
transition-delay: .1s;
box-shadow: 4px 4px 10px rgba(0, 0, 0, .3);
}
.pageRightFloat>div {
float: left;
background-color: #31353D;
transition: backgroundColor 0.4s ease-in-out 0s;
transition: transform .8s ease 0s;
cursor: pointer;
}
.pageRightFloat>div:hover {
background-color: #3EA3FF;
}
.pageRightFloat>div:nth-child(1):hover {
transform: translateX(-150px);
}
.pageRightFloatImgArea {
box-sizing: border-box;
float: left;
width: 50px;
height: 50px;
}
.pageRightFloatImgArea img {
width: 30px;
height: 30px;
margin: 10px;
}
.pageRightFloatTelArea {
box-sizing: border-box;
float: left;
width: 150px;
height: 50px;
line-height: 50px;
color: #fff;
letter-spacing: 0.1em;
text-align: center;
}
.pageRightFloatImgArea:last-child {
width: 200px;
}
.pageRightFloatQQArea, .pageRightFloatWeiXinArea {
box-sizing: border-box;
position: relative;
width: 120px;
pointer-events: none;
opacity: 0;
transform: translateX(15px);
transition: all 0.4s ease-in-out 0s;
}
.pageRightFloatQQArea>img, .pageRightFloatWeiXinArea>img {
box-sizing: border-box;
position: absolute;
top: -30px;
left: -220px;
width: 200px;
padding: 10px;
border-radius: 10px;
background: linear-gradient(90deg, #4e4efe 0%, #7e67fa 100%);
}
.pageRightTriangle {
position: absolute;
top: 25px;
left: -20px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-left: 5px solid #7e67fa;
border-bottom: 4px solid transparent;
}
.pageRightFloatImgArea:hover+.pageRightFloatQQArea, .pageRightFloatImgArea:hover+.pageRightFloatWeiXinArea {
transform: translateX(0px);
opacity: 1;
}
#Header1_HeaderTitle{
transition: all .3s ease;
}
.cnblogs_code div {
background: #282b2e;
}
.cnblogs_code {
background: #282b2e;
border-radius: 5px;
border: none;
font-family: consolas !important;
color: #fff;
}
.cnblogs_code_toolbar {
background: #282b2e !important;
}
.cnblogs_code_toolbar a:hover, .cnblogs_code_toolbar a:link, .cnblogs_code_toolbar a:visited, .cnblogs_code_toolbar a:active, .cnblogs_code_toolbar a:link img, .cnblogs_code_toolbar a:visited img {
background-color: #282b2e !important;
border: none!important;
}
.cnblogs_code pre {
font-family: consolas !important;
padding-left: 3px;
color: rgb(224, 226, 228);
}
.cnblogs_code span[style="color: #000000;"] , .cnblogs_code span[style="color: #ff0000;"]{
color: rgb(224, 226, 228) !important;
}
.cnblogs_code span[style="color: #0000ff;"]{
color: rgb(147, 199, 99)!important;
}
.cnblogs_code span[style="color: #800080;"]{
color: #ffd740 !important;
}
.cnblogs_code span[style="color: #800000;"]{
color: rgb(236, 118, 0)!important;
}
.cnblogs_code span[style="color: #008000;"]{
color: rgb(129, 142, 150)!important;
}
.cnblogs_code span[style="color: #008080;"]{
color: #afafaf!important;
margin-right: 5px;
}
.cnblogs_code_collapse {
border: none;
background: #282b2e;
color: rgb(147, 199, 99);
}
.cnblogs_code > pre {
border: none !important;
}
.cnblogs_code > textarea {
color: #fff;
background: transparent;
border: none;
outline: none;
}
#MySignature{
border:solid 1px #E5E5E5;
padding:10px;
background:#E5EEF7 url(http://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
padding-left:80px;}
#MySignature div{
line-height: 20px;
}
博客侧边栏公告
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{
l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)
}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
页首 HTML 代码
<div id="midground" class="wall"></div> <div id="foreground" class="wall"></div> <div id="top" class="wall"></div>
来源：https://www.cnblogs.com/TomHe789/p/12501711.html