Dark皮肤自定义css样式表（蠢爆了丑死了但是800行又舍不得删）
@font-face{
font-family: 'SansitaOne';
src:url('https://trical.online/css/webfonts/SansitaOne.ttf');
}
@font-face{
font-family: 'Sansita One';
src:url('https://trical.online/css/webfonts/SansitaOne.ttf');
font-weight: 600;
}
@font-face{
font-family: 'Farrington-7B-Qiqi';
src:url('https://trical.online/css/webfonts/银行卡数字字体Farrington7B_Qiqi.ttf')
}
@font-face{
font-family: 'Farrington-7B-Qiqi';
src:url('https://trical.online/css/webfonts/银行卡数字字体Farrington7B_Qiqi.ttf');
font-weight: bolder;
}
*{
}
body{
background: rgb(32, 32, 32);
color: rgb(255, 198, 198);
cursor: url("https://trical.online/css/mousestyle/X-SKH cursors/Arrow.cur"),auto;
}
a{
cursor: url('https://trical.online/css/mousestyle/X-SKH cursors/cross.cur'),auto;
text-decoration: none;
color: white;
}
input[type="text"],textarea{
cursor: url("https://trical.online/css/mousestyle/X-SKH cursors/Handwriting.cur"),auto;
}
input[type="button"]{
background-color: white;
border: none;
color: black;
/* padding: 15px 32px; /
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
/ vertical-align: -webkit-baseline-middle; */
}
input[type="button"]:hover{
border: 1px solid white;
background-color: black;
color: white;
}
::selection{
background: white;
color: black;
cursor: url("https://trical.online/css/mousestyle/X-SKH cursors/Handwriting.cur"),auto;
}
myHead{
/* position: fixed; */
position: absolute;
display: none;
}
myHead::after{
/* display: block; */
/* content: "Heelo"; */
/* font-size: 100px; */
}
blog_nav_rss_image{
display: none;
}
.index{
border: solid 4px #333333;
margin-left: 5px;
}
h1,h2,h3,h4,h5,h6{
margin: 0px;
}
.banner>table{
margin: 0;
height:auto;
}
/* 电脑屏幕的大排版 /
@media screen and (min-width: 300px) {
#Header1_HeaderTitle{
/ display: inline-block; /
position: absolute;
top: 0;
margin: 0;
margin-left: 10px;
/ height: 100%; /
/ width: 100%; /
font-family: Helvetica,Verdana,Arial,sans-serif;
font-weight: 600;
font-size: 100px;
color: white;
text-decoration: underline solid white;
/ text-shadow: 0 0 3px black; /
}
#Header1_HeaderTitle::before,#Header1_HeaderTitle::after{
content: "XG-LYnc";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#Header1_HeaderTitle::before{
color: #ff00c1;
animation: HEAD 4s infinite;
}
#Header1_HeaderTitle::after{
color: #3498db;
animation: HEAD2 5s infinite;
}
@keyframes HEAD{
0%{
left: 2px;
top: -2px;
}
15%{
left: 2px;
top: 0px;
}
30%{
left: -1px;
top: 2px;
}
45%{
left: 0px;
top: 0px;
}
95%{
left: 0px;
top: 0px;
}
100%{
left: -2px;
top: -2px;
}
}
@keyframes HEAD2{
0%{
left: 0px;
top: -2px;
}
15%{
left: 1px;
top: -1px;
}
30%{
left: -1px;
top: 2px;
}
45%{
left: 0px;
top: 0px;
}
95%{
left: 0px;
top: 0px;
}
100%{
left: 0px;
top: -2px;
}
}
.sub{
display: inline-block;
margin: 0px;
margin-top: 50px;
margin-left: 430px;
display: inline-block;
font-size: 30px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.sub::after{
content: "_";
animation: Blink 3s infinite;
}
@keyframes Blink {
0%{
color: white;
}
16%{
color: white;
}
17%{
color: black;
}
32%{
color: black;
}
33%{
color: white;
}
49%{
color: white;
}
50%{
color: black;
}
66%{
color: black;
}
67%{
color: white;
}
83%{
color: white;
}
84%{
color: black;
}
100%{
color: black;
}
}
/ 导航栏 /
.listitem{
color: white;
font-weight: 600;
/ margin: 11px; */
}
.listitem {
font-size: 16px;
margin-top: 3px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: 1s all ease;
}
.listitem::before {
width: 120%;
height: 0;
background: white;
content: "";
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%) rotate(-45deg);
z-index: -1;
transition: all 0.6s ease;
}
.listitem:hover::before {
height: 400%;
}
.listitem:hover {
font-size: 16px;
color: black;
}
#blog_stats::before{
animation: line-effect 5s infinite;
content: "※";
font-size: 18px;
color: #676767;
transition: all 0.5s ease;
}
#blog_stats{
margin-right: 5px;
font-weight: 600;
color: #676767;
float: right;
transition: all 0.5s ease;
font-size: 0;
}
#blog_stats:hover{
color:#676767;
font-size: 18px;
}
#blog_stats:hover::before{
color: #676767;
}
.banner>table{
/* margin-left: 10px; */
}
/* 博客主体 */
.banner[valign="top"]{
border: 3px double #666666;
padding: 0;
}
.block_title a{
color: black;
/* background: black; */
font-family: 'Farrington-7B-Qiqi','黑体';
text-align: center;
transition: 1s all ease;
}
.block_title{
color: black;
/* background: black; */
font-family: 'Farrington-7B-Qiqi','黑体';
text-align: center;
overflow: hidden;
transition: 1s all ease;
position: relative;
/* top: 0px; */
/* display: inline-block; */
}
.block_title::before{
border: 4px double white;
width: 300px;
height: 48px;
left: calc(50% - 154px);
top: -2px;
content: "";
position: absolute;
z-index: -2;
}
.block_title::after{
background: white;
width: 300px;
height: 50px;
left: calc(50% - 150px);
content: "";
position: absolute;
/* border-radius: 25px; */
z-index: -2;
transform: scaleY(1);
transition: transform 1s;
transform-origin: bottom;
/* transition: 1s all ease; */
}
.block_title:hover,.block_title:hover a{
color: white;
transition: 1s all ease;
}
.block_title:hover::after{
/* transform: rotate(-90deg); */
/* background: white; */
transform: scaleY(0.4);
transition: transform 1s;
transform-origin: bottom;
}
.block_title+div.block{
border: 3px rgb(150, 150, 150);
border-style: double;
/* display: none; */
transition: 1s all ease;
}
.block_title:hover+div.block{
border: 3px white;
font-size: 16px;
border-style: double;
display: block;
transition: border-color 1s;
}
div.block:hover{
display: block;
}
.post{
background: black;
border: 4px double white;
}
.postcontent,.posttitle{
padding: 5px;
margin: 0;
}
.posttitle{
display: inline-block;
border-top: 3px double white;
border-right: 3px double white;
background: black;
color: white;
}
.posttitle a::before{
content: ">>";
/* display: inline-block; */
border-right: 4px double white;
margin-right: 5px;
}
.posttitle a{
padding: 0;
margin: 0;
color: white;
border: 3px double rgb(128, 128, 255);
/* border-left-style: none; */
display: inline-block;
padding: 2px;
padding-right: 5px;
}
.c_b_p_desc_readmore{
display: inline-block;
float: right;
}
.postcontent{
border: 3px double white;
}
.itemdesc{
padding-right: 10px;
background: #000000;
color: white;
text-align: right;
border-bottom: 3px double #ffffff ;
}
.itemdesc a{
color: white;
}
.seperator{
display: none;
}
.block_footer{
display: none;
}
/* 侧边栏 */
.CalDayHeader:hover{
text-shadow: 0px 0 10px white;
color: white;
}
.CalTodayDay{
border-radius:50%;
/* background: white; */
color: white;
box-shadow: 0px 0 10px white;
text-shadow: 0px 0 10px white;
}
.CalTodayDay a{
color: white;
text-decoration: none;
}
#blogCalendar{
border: 3px white;
border-style: solid;
}
.CalTitle{
border: 3px white;
border-style: none none double none;
}
.CalNextPrev{
font-size: 20px;
font-weight: 600;
}
#blogCalendar tr th{
border: 1px white;
border-style: none none dashed none;
}
.CalOtherMonthDay{
color: black;
background: rgba(124, 124, 124, 0.8);
}
#side_right{
margin-left: 10px;
/* border: 3px black;
border-style: solid;
border-bottom-style: none; */
margin: 0;
padding: 0;
}
#side_right>h1{
display: none;
}
#blog-news{
border: 3px white;
border-style: solid;
}
#profile_block{
margin-left: 5px;
font-family: '方正行黑简体','楷体','黑体','Sansita One';
font-size: 20px;
font-weight: 600;
}
#profile_block::before{
content: "";
border-radius:50%;
border: 5px double gray;
left: calc(50% - 55px);
margin: 10px;
position: relative;
background: url("https://pic.cnblogs.com/avatar/1578619/20190103182518.png");
background-size: 80px 80px;
height: 80px;
width: 80px;
display: block;
}
#blog-sidecolumn{
padding-left: 5px;
}
.catListTitle+div{
display: none;
}
.sidebar-block ul{
display: none;
}
.sidebar-block:hover .catListTitle+div{
display: block;
animation: showIndex 0.3s;
-moz-animation: showIndex 0.3s; /* Firefox */
-webkit-animation: showIndex 0.3s; /* Safari and Chrome */
-o-animation: showIndex 0.3s; /* Opera */
}
.sidebar-block:hover ul{
display: block;
animation: showIndex 0.3s;
-moz-animation: showIndex 0.3s; /* Firefox */
-webkit-animation: showIndex 0.3s; /* Safari and Chrome */
-o-animation: showIndex 0.3s; /* Opera */
}
@keyframes showIndex{
0%{ opacity: 0; transform: translate(-200px, 0) }
100%{opacity: 1; transform: translate(0, 0) }
}
ul{
margin-top: 0px;
margin-bottom: 0px;
}
h3+ul{
padding: 0;
}
h3+ul li{
/* margin: 0 30px 0 30px; */
display: block;
}
h3+ul li,h3+ul a{
list-style: none;
font-size: 20px;
text-align: center;
height: 30px;
position: relative;
color: white;
transition:color 0.8s, font-size 0.8s,transform 0.8s;
}
h3+ul li:hover,h3+ul li:hover a{
color: black;
font-size: 20px;
}
h3+ul li::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 25px;
z-index: -1;
transform: scaleY(0);
transition: transform 0.5s;
transform-origin: bottom;
}
h3+ul li:hover::before{
transform: scaleY(1);
transition: transform 0.5s;
transform-origin: top;
}
h3+ul li::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 25px;
z-index: -2;
transform: scaleY(0);
transition: transform 0.5s;
transform-origin: bottom;
}
h3+ul li:hover::after{
transform: scaleY(1);
transition: transform 0.5s;
transform-origin: top;
}
h3+div ul{
padding: 0;
}
h3+div ul li{
/* margin: 0 30px 0 30px; */
display: block;
}
h3+div ul li,h3+div ul a{
list-style: none;
font-size: 20px;
text-align: center;
height: 30px;
position: relative;
color: white;
transition:color 0.8s, font-size 0.8s,transform 0.8s;
}
h3+div ul li:hover,h3+div ul li:hover a{
color: black;
font-size: 20px;
}
h3+div ul li::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 25px;
z-index: -1;
transform: scaleY(0);
transition: transform 0.5s;
transform-origin: bottom;
}
h3+div ul li:hover::before{
transform: scaleY(1);
transition: transform 0.5s;
transform-origin: top;
}
h3+div ul li::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 25px;
z-index: -2;
transform: scaleY(0);
transition: transform 0.5s;
transform-origin: bottom;
}
h3+div ul li:hover::after{
transform: scaleY(1);
transition: transform 0.5s;
transform-origin: top;
}
.btn_my_zzk{
background-color: white;
border: none;
color: black;
/* padding: 15px 32px; */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
/* vertical-align: -webkit-baseline-middle; */
}
.btn_my_zzk:hover{
border: 1px solid white;
background-color: black;
color: white;
}
#sidebar_categories{
color: rgb(168, 168, 168);
position: fixed;
right: 40px;
bottom: 0;
/* border: 2px dotted white; */
border-top: none;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.2)
}
#sidebar_categories::before{
position: absolute;
content: "";
border: 4px double rgb(255,255,255,0.7);
border-right-style: none;
border-left-style: none;
width: 100%;
top: 0;
}
#sidebar_categories::after{
position: absolute;
content: "";
border: 4px double rgb(255,255,255,0.7);
/* border-right-style: none; */
/* border-left-style: none; */
width: 100%;
bottom: 0;
}
h1.listtitle{
font-size: 25px;
}
.footer{
border: 1px solid white;
bottom: 5px;
left: 20px;
position: fixed;
background: rgba(0, 0, 0, 0.2);
color: white;
}
.footer a{
color:white;
}
/* 博文内容 */
#blog_post_info_block{
border: 5px double white;
}
.moreinfotitle{
padding: 5px;
margin: 0;
}
.moreinfotitle{
display: inline-block;
border-top: 3px double white;
border-right: 3px double white;
background: black;
color: white;
}
.moreinfotitle::before{
content: ">>";
/* display: inline-block; */
border-right: 4px double white;
margin-right: 5px;
}
.moreinfotitle{
/* position: relative; */
/* float: left; */
padding: 0;
margin: 5px;
color: white;
border: 3px double rgb(128, 128, 255);
/* border-left-style: none; */
display: inline-block;
padding: 2px;
padding-right: 5px;
}
.moreinfotitle::after{
content: "";
position: relative;
width: 100%;
height: 100%;
}
.comments,.comment{
border: 3px double white;
}
.comment_title,.comment_content,.comment_footer{
border: 1px solid white;
}
#comment_nav{
margin-right: 5px;
}
#comment_form_container{
border: 5px double white;
}
#commentform_title{
padding: 5px;
margin: 0;
}
#commentform_title{
display: inline-block;
border-top: 3px double white;
border-right: 3px double white;
background: black;
color: white;
}
#commentform_title::before{
content: ">>";
/* display: inline-block; */
border-right: 4px double white;
margin-right: 5px;
}
#commentform_title{
/* position: relative; */
/* float: left; */
padding: 0;
margin: 5px;
color: white;
border: 3px double rgb(128, 128, 255);
/* border-left-style: none; */
display: inline-block;
padding: 2px;
padding-right: 5px;
}
#commentform_title::after{
content: "";
position: relative;
width: 100%;
height: 100%;
}
#tip_comment+p{
display: inline-block;
float: right;
padding: 0;
margin: 0;
}
#tbCommentAuthor{
background: black;
color: white;
font-weight: 600;
}
.commentbox_title_left,.commentbox_title_right{
margin-top: 10px;
margin-left: 10px;
}
#tbCommentBody{
width:96%;
margin-left: calc(2% - 3px);
margin-top: 10px;
background: #000000;
color: white;
border:3px double rgb(128, 128, 255);
}
#commentbox_opt{
float:right;
margin-right: 10px;
}
}
/* logo只出现在宽于900px的屏幕上 /
@media screen and (min-width: 900px) {
a[name="top"]{
display: block;
position: absolute;
/ float: right; /
height: 100px;
width: 40%;
right: 5px;
}
a[name="top"]:hover::after{
display: inline-block;
}
a[name="top"]:hover::before{
display: none;
}
a[name="top"]::before{
content: "MyLOGO";
text-align: right;
font-size: 50px;
text-decoration: underline solid gray;
display: inline-block;
position: absolute;
height: 100%;
width: 100%;
padding-top: 25px;
}
a[name="top"]::after{
content: "图不重要看字去";
text-align: right;
font-size: 50px;
text-decoration: underline solid black;
display: none;
position: absolute;
top: 10px;
height: 100%;
width: 100%;
/ right:15px; /
/ top:10px; */
}
}
浙公网安备 33010602011771号