ブログのお肌
26110 ワード
ページカスタムコード:
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;
}ブログサイドバーのお知らせ
!<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> n(n,e,t){
</span><span style="color: #0000ff;">return</span> n.getAttribute(e)||<span style="color: #000000;">t
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> e(n){
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> document.getElementsByTagName(n)
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> t(){
</span><span style="color: #0000ff;">var</span> t=e("script"),o=t.length,i=t[o-1<span style="color: #000000;">];
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">{
l:o,z:n(i,</span>"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99<span style="color: #000000;">)
}
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> o(){
a</span>=m.width=window.innerWidth||document.documentElement.clientWidth||<span style="color: #000000;">document.body.clientWidth,
c</span>=m.height=window.innerHeight||document.documentElement.clientHeight||<span style="color: #000000;">document.body.clientHeight
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> i(){
r.clearRect(</span>0,0<span style="color: #000000;">,a,c);
</span><span style="color: #0000ff;">var</span><span style="color: #000000;"> n,e,t,o,m,l;
s.forEach(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(i,x){
</span><span style="color: #0000ff;">for</span>(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=<span style="color: #000000;">u[e],
</span><span style="color: #0000ff;">null</span>!==n.x&&<span style="color: #0000ff;">null</span>!==n.y&&(o=i.x-n.x,m=i.y-<span style="color: #000000;">n.y,
l</span>=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
<span style="color: #000000;">
t</span>=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")"<span style="color: #000000;">,r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
</span><span style="color: #0000ff;">var</span> a,c,u,m=document.createElement("canvas"<span style="color: #000000;">),
d</span>=t(),l="c_n"+d.l,r=m.getContext("2d"<span style="color: #000000;">),
x</span>=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
<span style="color: #0000ff;">function</span><span style="color: #000000;">(n){
window.setTimeout(n,</span>1e3/45)
<span style="color: #000000;">
},
w</span>=Math.random,y={x:<span style="color: #0000ff;">null</span>,y:<span style="color: #0000ff;">null</span>,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=<span style="color: #000000;">o,
window.onmousemove</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(n){
n</span>=n||window.event,y.x=n.clientX,y.y=<span style="color: #000000;">n.clientY
},
window.onmouseout</span>=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
y.x</span>=<span style="color: #0000ff;">null</span>,y.y=<span style="color: #0000ff;">null</span><span style="color: #000000;">
};
</span><span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> s=[],f=0;d.n>f;f++<span style="color: #000000;">){
</span><span style="color: #0000ff;">var</span> 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<span style="color: #000000;">})
}
u</span>=<span style="color: #000000;">s.concat([y]),
setTimeout(</span><span style="color: #0000ff;">function</span>(){i()},100<span style="color: #000000;">)
}();
</span> ヘッダーHTMLコード
<div id="midground" class="wall">div>
<div id="foreground" class="wall">div>
<div id="top" class="wall">div>