OOO的CSS

　　　　应ooo要求

　　　　寻找他手写一千年的css的继承人

　　　　

html {
 background:#f7f7f7 url(images/bg-pattern.jpg)
}
body {
 margin:0;
 padding:5em 0;
 font-family:Verdana,Arial,Helvetica,sans-serif
}
#comment_form
{
     120% !important;;
    margin-left:-110px !important;   
}
#blog-comments-placeholder {
    border: solid 1px #ffffff !important;;
    border-radius: 5px;
}
#blog-comments-placeholder
{
    color: #fff !important;;
     120% !important;;
    margin-left:-110px !important;
}
.blog_comment_body{
    margin-left: 10px !important;;
    min-height: 25px !important;
}
#div_digg{
    display: none;
}
#header {
 position:fixed;
 top:0;
 left:0;
 right:0;
 height:40px;
 background:#fff;
 z-index:999;
 border-bottom:1px solid #ddd
}
#blogTitle .title {
 font-size:35px;
 margin:0;
 line-height:40px
}
#blogTitle .title a {
 color:#555;
 text-decoration:none;
 display:block;
 float:left;
 padding:0 1em 0 .3em
}
#blogTitle .title a:hover {
 background:#00D2FF;
 color:#fff
}
#blogTitle .title a:hover:first-letter {
 color:#fff
}
#blogTitle .title a:first-letter {
 color:#00D2FF
}
#blogTitle .subtitle {
 font-size:20px;
 line-height:1.2em;
 color:#00D2FF !important;
 background:#ffffff4d;
 float:left;
 padding-top: 0px !important;
 clear:both;
 min-100%;
 min-height: 20px;
}
.blogStats {
 display:none
}
#navigator {
 position:absolute;
 left:15em;
 top:0
}
#navList {
 list-style:none;
 margin:0;
 padding:0
}
#navList li {
 height:14px;
 margin:0;
 padding:0;
 line-height:40px;
 float:left
}
#navList li a {
 display:block;
 color:#666;
 text-decoration:none;
 padding:0 1em
}
#navList li a:hover {
 background:#00D2FF;
 color:#fff
}
#navList li a.aHeaderXML {
 background:url(data:image/gif;base64,R0lGODlhDgAOANUAAP3+/v7+/f75/P3v9v3v9/3q9Pzf7vze7vzZ6/zZ7PzW6vzV6fzV6vvH4vvG4vvB3/vA3/q22vqs1fmk0fmj0Pmi0Pmh0Pmhz/mgz/iYy/iNxfiNxveFwveFwfeDwPd/vvd+vvZ5vPd5u/Z4u/ZzuPZyuPZutvZttvVjsPZjsPVbrPVarPVUqfRKpPRJo/RJpPRGofRGovRFovRAn/RBoPQ+nvM9nfQ9nvM5nPM4m/MzmPM0mfMymP///wAAAAAAACH5BAEHAD0ALAAAAAAOAA4AAAZ1wNuqFBkAesgkksdkegrKJEUUa+Iu0WQiw2p+BNlAT8HRmU9gZIrDSFZkTFCyaTIgJXAeBil6MWsNSBZmOVBIGzQ8OA5IHU5KEC08NQc9C108BEoPMzwmSBlMEVEaTAs9CDA8JFkuPB1IIzwqWSE8KEgTPDZBADs=) no-repeat;
 14px;
 height:14px;
 position:relative;
 left:2.75em;
 bottom:48px
}
#navList li a:hover+a.aHeaderXML {
 background-image:url(data:image/gif;base64,R0lGODlhDgAOANUAAP/////9/v/5/P71+v7z+f7x+P7w9/7s9f7q9P7o8/3c7v3X6/3V6vzP5/zN5vzE4fvA3/u+3vu73fu42/uz2fqt1vqj0fmazPmRyPiOxviNxviFwvd6vPdwt/dutvZqtPVbrfVYq/VUqfVSqPRGovRDoPMymAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEHACYALAAAAAAOAA4AAAZtQMICwimZjkgkYAkIVEhJpGaCYAowUWToomBSskhQhflIOiogZOaw/B7Jo+OGDcCaJoll4XPELAVQRxYGAAJ8JmMAFUkdeQUiJiBdAUZIHgUAZSYXSxxRFktpIVURWXmLJhIADFkTAA1HGgADQQA7)
}
#navList li a.aHeaderXML img {
 display:none
}
#mainContent {
 600px;
 margin:auto;
 position:relative;
 margin-top:2.5em;
 z-index:20
}
.postCon,
.postBody {
 margin-left: -100px;
 background:#fff;
 border-right:3px solid #ddd;
 border-bottom:3px solid #ddd;
 min-height:12em
}
.postCon{
    border-radius: 25px;
    background-color: #56EDFF12;
}
.postTitle {
 text-align: center;
 background:#00D2FF;
 padding:.4em;
 position:absolute;
 left: -100px;
 margin-top:-40px;
 40em;
 font-size:1.3em
}
#post_next_prev {
 font-size:small
}
.feedback_area_title {
 display:none
}
.feedbackItem {
 border-top:1px dotted #999;
 font-size:90%;
 position:relative;
 padding:.4em 0;
 margin-bottom:1.2em
}
.feedbackItem a {
 color:#c28
}
.feedbackCon {
 margin:.4em 1em;
 color:#444
}
.feedbackListSubtitle {
    min-height: 80px !important;
 color:#666
}
.feedbackListSubtitle a {
 color:#a56;
 text-decoration:none
}
.feedbackManage {
 position:absolute;
 right:0
}
#comment_form {
 background:#fff;
 border:1px solid #ddd;
 outline:1px solid #fff;
 padding:10px;
 position:relative;
 font-size:90%;
 margin-top:2.5em
}
#commentform_title {
 background:none;
 padding-left:0;
 font-size:1.4em
}
#comment_form a {
 color:#00D2FF !important;;
 text-decoration:none
}
#comment_nav {
 font-size:small;
 position:absolute;
 right:.5em
}
#comment_nav a {
 color:#f5a
}
.commentbox_title_left {
 display:none
}
.ad_commentbox_up {
 display:none
}
.commentbox_title,
div.commentform .comment_textarea {
 570px
}
.newsItem {
 border:1px solid #ddd;
 font-size:90%;
 background:#fff;
 padding:10px;
 16em;
 min-height:7em;
 opacity:.0;
 position:absolute;
 left:70%;
 margin-left:110px;
 margin-top: 150px;
 top:-2.75em;
 z-index:1;
 transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -webkit-transform:rotate(90deg);
 -o-transform:rotate(90deg);
 transform-origin:0 0;
 -moz-transform-origin:0 0;
 -webkit-transform-origin:0 0;
 -o-transform-origin:0 0;
 transition:3s;
 -moz-transition:3s;
 -webkit-transition:3s;
 -o-transition:3s
}
#sideBar zhushi{
    float: right;
    opacity: 0.5;
}
#sideBar poem{
    color: #00A681;
    font-size: 15px;
}
.newsItem h3.catListTitle {
 position:absolute;
 right: 0;
 bottom:100%;
 margin:0;
 padding:;
 color:#666;
 font-size:14px;
}
.newsItem:hover {
 z-index:999;
 opacity:1;
 transform:none;
 -moz-transform:none;
 -webkit-transform:none;
 -o-transform:none
}
#calendar,
#profile_block,
.mySearch h3,
.catListComment {
 display:none
}
div.mySearch div {
 position:absolute;
 top:.2em;
 right:0;
 margin-right:.75em
}
#leftcontentcontainer {
 background:#fff;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ddd;
 height:3em;
 font-size:90%;
 position:fixed;
 bottom:0;
 right:0;
 left:0;
 z-index:40
}
#leftcontentcontainer li a {
 color:#00D2FF;
 text-decoration:none;
 display:block;
 padding:.3em
}
#leftcontentcontainer li a[id$=RssLink] {
 position:absolute;
 right:0;
 top:0
}
#leftcontentcontainer li a:hover {
 background:#00D2FF;
 color:#fff
}
#leftcontentcontainer ul {
 position:absolute;
 12em;
 margin:0;
 padding:.4em .4em 3em .4em;
 list-style:none;
 bottom:-1em;
 min-height:10em;
 left:0;
 background:#fff;
 outline:1px solid #fff;
 border:1px solid #ddd;
 z-index:60;
 display:none
}
#leftcontentcontainer ul li {
 position:relative
}
#leftcontentcontainer>div:hover ul {
 display:block
}
#leftcontentcontainer>div {
 float:left;
 height:2em;
 position:relative
}
#leftcontentcontainer>div.mySearch {
 position:static
}
#leftcontentcontainer h3 {
 font-size:1.2em;
 line-height:1;
 padding:.7em .75em;
 margin:0;
 position:relative;
 z-index:50;
 cursor:pointer
}
#leftcontentcontainer>div:hover h3 {
 z-index:70
}
#leftcontentcontainer .catListTag li a {
 display:inline
}
#leftcontentcontainer .catListTag li {
 display:inline-block;
 padding:0 .4em;
 white-space:nowrap
}
#footer {
 margin-top:2em;
 text-align:center;
 color:#999
}
#header,
#leftcontentcontainer,
#blogTitle .subtitle {
 box-shadow:rgba(0,0,0,.075) 0 0 32px;
 -moz-box-shadow:rgba(0,0,0,.075) 0 0 32px;
 -webkit-box-shadow:rgba(0,0,0,.075) 0 0 32px
}
.topicListFooter {
 margin:0
}
.topicListFooter a {
 color:#00D2FF
}
.postTitle a {
 color:#fff;
 text-decoration:none
}
.dayTitle {
 display:none;
}
.postDesc {
 //font-size:small;
 margin-bottom:4em;
 text-align:right;
 padding:.4em 0;
 color:#44FFF5;
}
.postDesc a {
 color:#44FFF5 !important;
 font-size: 15px;
}
.postBody,
.postCon {
 line-height:1.5
}
.c_b_p_desc:first-letter{
    font-size: 40px;
    color:#44FFF5 !important;
}
.postBody a,
.postCon a {
 color:#00D2FF;
 text-decoration:none
}
.postBody a:hover,
.postCon a:hover {
 background:#00A681;
 color:#fff
}
.postBody pre span {
 line-height:1.2em
}
.postCon p,
.postBody p {
 margin:1.2em 0!important
}
.c_ad_block,
#digg_block,
#relative_search,
#blog_ad_google {
 display:none!important
}
h1,
h2,
h3,
h4,
h5,
h6,
#blogTitle,
.postTitle,
#navigator,
.feedback_area_title,
#commentform_title,
.newsItem {
 font-weight:normal
}
.feedbackItem,
.postDesc,
#comment_form,
#leftcontentcontainer,
#footer,
.topicListFooter {
 line-height:1.2
}
#cnblogs_post_body ul li {
 list-style-type:inherit
}
body {
    color: #000;
    background: url(https://pic22.nipic.com/20120629/10417481_213150335132_2.jpg) fixed;
    background-size: cover;
    background-repeat: repeat;
    font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 13px;
    min-height: 101%;
}
#blogTitle h1 {
    font-size: 50px;
    font-family: Consolas,monospace;
    font-weight: bold;
    font-style: italic;
    margin-top: 20px;
}
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(82, 168, 236, 0.8);
    padding: 5px 0 5px 10px;
    background-color: rgba(245,245,245,0.3);
}
.covered:hover {
    background: black;
    color: white !important;
}
.covered {
    background: black;
    color: black !important;
}
.invisible {
    color: rgba(233,233,233,0.1) !important;
}
.hidden {
    display: none;
}
#home {
    margin: 0 auto;
     65%;
    min- 950px;
    background-color: rgba(255,255,255,0.8);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    opacity: 0.8;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: none;
    margin-bottom: 35px;
    word-wrap: break-word;
}
#blog-calendar td {
    font-size: 12px;
    font-family: Consolas,"Ubuntu Mono",monospace;
}
.input_my_zzk {
    border: 1px solid #ccc;
    background: none;
     100%;
    height: 25px;
    padding-right: 30px;
    padding-left: 5px;
    outline: 0;
}
.CalDayHeader {
    background: rgba(245,245,245,0.3) !important;
    font-weight: 100;
    color: #5E5F63;
}
.CalTitle {
    background: none;
     100%;
    height: 25px;
    text-align: center;
    font-size: 1px;
    font-weight: bold;
    padding: 5px 0;
    color: #FFF;
}
.CalTitle td {
    background: rgba(245,245,245,0.3) !important;
    border: 0px !important;
    color: #5E5F63;
    font-family: "Comic Sans MS",sans-serif;
}
a:link {
    color: cornflowerblue;
}
a:visited {
    color: cornflowerblue;
}
a:hover {
    color:cadetblue;
}
a:active {
    color:black;
}
.CalTodayDay {
    background: rgba(247,247,247,0.3) !important;
    color: #FFF;
    font-weight: bold;
}
blockquote {
    background: rgba(247,247,247,0.3);
    border: 2px solid #efefef;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}
div.commentform input.author, div.commentform input.email, div.commentform input.url {
    background-image: url(https://static.cnblogs.com/images/icon_form.gif);
    border: 1px solid white !important;
    padding: 4px 4px 4px 30px;
     300px;
    font-size: 13px;
    background-color: rgba(247,247,247,0.3);
}
#comment_form_container .comment_textarea {
     362px;
    height: 200px;
    font-size: 13px;
    padding: 8px;
    margin-bottom: 10px;
    color: #555;
    border: 1px solid white;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: rgba(247,247,247,0.3);
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}
.feedbackItem {
    border-radius: 15px;
    margin: 10px 5px 0px;
    padding: 5px;
    box-shadow: 0 0 10px 0 #AAA;
}
.postTitle{
    background-color: #56EDFF;
}
.postTitle a{
    color:#0287AC !important;
}
#topics .postTitle {
    font-size:130%;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
.entrylistPosttitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
    color: #21759b;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.entrylistItemTitle a:link, .entrylistPosttitle a:visited, .entrylistPosttitle a:active {
    color: #21759b;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
#cnblogs_post_body h2 {
    border-left: 10px solid rgba(82, 168, 236, 0.3);
    background: rgba(247,247,247, 0.3);
    padding: 3px 10px;
}
#cnblogs_post_body h3{
    border-left: 5px solid rgba(0, 235, 255, 0.3);
    padding: 2px 5px;
    background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{
    border-left: 5px solid rgba(222, 101, 114,0.3);
    padding-left: 5px;
    background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h1{
    background: rgba(247,247,247,0.3);
    border-left: 15px solid rgba(0, 122, 255, 0.3);
    padding: 3px 10px;
    font-size: 175%;
    border-right: 15px solid rgba(0, 122, 255, 0.3);
}
.buryit {
    display: none;
}
#div_digg {
    float: right;
    position: fixed;
     auto;
    bottom: 10px;
    left: 70%;
    margin-bottom: 10px;
    background: rgba(247,247,247,0.3);
    margin-right: 30px;
    font-size: 12px;
    box-shadow: 0 0 10px 0 #AAA;
    padding: 10px;
    border: 2px solid rgba(82, 168, 236, 0.8);
    text-align: center;
    margin-top: 10px;
}
textarea {
    background: rgba(247,247,247,0.3);
    font-family: Consolas !important;
}
.pager a{
    color: rgb(247,247,247);
}
#nav_next_page a{
    box-shadow: 0 1px 3px #3671a5;
    border: 1px solid #3671a5;
    background: #3671a5;
    color: rgb(247,247,247);
    transition: all 0.4s linear 0s;
    padding: 2px 5px;
    margin: 0px 2px;
}
#nav_next_page a:hover{
    background: black;
}
.button{
    cursor: pointer;
}
#green_channel
{
    display: none;
}




/* BEGIN: hightlight.js Theme "Code Brewer"*/
/*END hightlight.js Theme*/
/*for code Theme  gedit*/
code{
 line-height: 17px;
 font-family:Ubuntu Mono;
 font-size:15px !important;
 font-weight: bold;
}
pre{
 padding-left:15px;
 padding-top:15px;
 padding-bottom: 15px;
 margin-top: 30px !important;;
 min-height: 10px;
  min- 500px;
 opacity: 1.0! important;
 //background-color:#000000;
}
.postTitle::after {
    -webkit-transition: width .5s;
    transition: width .5s;
    content: "";
    color:#56edff;
    right: 0;
     0;
    bottom: -3px;
    position: absolute;
    border-bottom: 2px solid;
    border-radius: 10px;
}
.postTitle:hover::after {
    left: 0;
     100%
}
/*for code Theme  "hzoj"*/
.hll { background-color: #d6d6d6 !important }
.pl-c { color: #8e908c !important } /* Comment */
.pl-err { color: #c82829 !important } /* Error */
.pl-k { color: #8959a8 !important } /* Keyword */
.pl-l { color: #f5871f !important } /* Literal */
.pl-n { color: #4d4d4c !important } /* Name */
.pl-o { color: #3e999f !important } /* Operator */
.pl-p { color: #4d4d4c !important } /* Punctuation */
.pl-ch { color: #8e908c !important } /* Comment.Hashbang */
.pl-cm { color: #8e908c !important } /* Comment.Multiline */
.pl-cp { color: #8e908c !important } /* Comment.Preproc */
.pl-cpf { color: #8e908c !important } /* Comment.PreprocFile */
.pl-c1 { color: #8e908c !important } /* Comment.Single */
.pl-cs { color: #8e908c !important } /* Comment.Special */
.pl-gd { color: #c82829 !important } /* Generic.Deleted */
.pl-ge { font-style: italic !important } /* Generic.Emph */
.pl-gh { color: #4d4d4c; font-weight: bold !important } /* Generic.Heading */
.pl-gi { color: #718c00 !important } /* Generic.Inserted */
.pl-gp { color: #8e908c; font-weight: bold !important } /* Generic.Prompt */
.pl-gs { font-weight: bold !important } /* Generic.Strong */
.pl-gu { color: #3e999f; font-weight: bold !important } /* Generic.Subheading */
.pl-kc { color: #8959a8 !important } /* Keyword.Constant */
.pl-kd { color: #8959a8 !important } /* Keyword.Declaration */
.pl-kn { color: #3e999f !important } /* Keyword.Namespace */
.pl-kp { color: #8959a8 !important } /* Keyword.Pseudo */
.pl-kr { color: #8959a8 !important } /* Keyword.Reserved */
.pl-kt { color: #eab700 !important } /* Keyword.Type */
.pl-ld { color: #718c00 !important } /* Literal.Date */
.pl-m { color: #f5871f !important } /* Literal.Number */
.pl-s { color: #718c00 !important } /* Literal.String */
.pl-na { color: #4271ae !important } /* Name.Attribute */
.pl-nb { color: #4d4d4c !important } /* Name.Builtin */
.pl-nc { color: #eab700 !important } /* Name.Class */
.pl-no { color: #c82829 !important } /* Name.Constant */
.pl-nd { color: #3e999f !important } /* Name.Decorator */
.pl-ni { color: #4d4d4c !important } /* Name.Entity */
.pl-ne { color: #c82829 !important } /* Name.Exception */
.pl-nf { color: #4271ae !important } /* Name.Function */
.pl-nl { color: #4d4d4c !important } /* Name.Label */
.pl-nn { color: #eab700 !important } /* Name.Namespace */
.pl-nx { color: #4271ae !important } /* Name.Other */
.pl-py { color: #4d4d4c !important } /* Name.Property */
.pl-nt { color: #3e999f !important } /* Name.Tag */
.pl-nv { color: #c82829 !important } /* Name.Variable */
.pl-ow { color: #3e999f !important } /* Operator.Word */
.pl-w { color: #4d4d4c !important } /* Text.Whitespace */
.pl-mb { color: #f5871f !important } /* Literal.Number.Bin */
.pl-mf { color: #f5871f !important } /* Literal.Number.Float */
.pl-mh { color: #f5871f !important } /* Literal.Number.Hex */
.pl-mi { color: #f5871f !important } /* Literal.Number.Integer */
.pl-mo { color: #f5871f !important } /* Literal.Number.Oct */
.pl-sb { color: #718c00 !important } /* Literal.String.Backtick */
.pl-sc { color: #4d4d4c !important } /* Literal.String.Char */
.pl-sd { color: #8e908c !important } /* Literal.String.Doc */
.pl-s2 { color: #718c00 !important } /* Literal.String.Double */
.pl-se { color: #f5871f !important } /* Literal.String.Escape */
.pl-sh { color: #718c00 !important } /* Literal.String.Heredoc */
.pl-si { color: #f5871f !important } /* Literal.String.Interpol */
.pl-sx { color: #718c00 !important } /* Literal.String.Other */
.pl-sr { color: #718c00 !important } /* Literal.String.Regex */
.pl-s1 { color: #718c00 !important } /* Literal.String.Single */
.pl-ss { color: #718c00 !important } /* Literal.String.Symbol */
.pl-bp { color: #4d4d4c !important } /* Name.Builtin.Pseudo */
.pl-vc { color: #c82829 !important } /* Name.Variable.Class */
.pl-vg { color: #c82829 !important } /* Name.Variable.Global */
.pl-vi { color: #c82829 !important } /* Name.Variable.Instance */
.pl-il { color: #f5871f !important } /* Literal.Number.Integer.Long */
/*something*//

::selection{
    color: #00514D !important;
}
@keyframes light {
    from {
       box-shadow:0px 0px 1px #00D2FF;
    }
    to {
      box-shadow:0px 0px 60px #00D2FF;
    }
}
.light {
   15px;
  height: 15px;
  margin:20px;
  border-radius: 50%;
  animation: light 2s ease-in-out infinite alternate;
}
@keyframes llight {
    from {
       box-shadow:0px 0px 1px #000000;
    }
    to {
      box-shadow:0px 0px 60px #000000;
    }
}
.llight {
   15px;
  height: 15px;
  margin:20px;
  border-radius: 50%;
  animation: llight 2s ease-in-out infinite alternate;
}
@keyframes left_cirlce_spin {
    0%,50% {
      transform: rotate(-45deg);
    }
    100%{
      transform: rotate(135deg);
    }
}
@keyframes right_cirlce_spin {
    0% {
      transform: rotate(45deg);
    }
    50%,100%{
      transform: rotate(225deg);
    }
}
.progress {
    overflow: hidden;
     100px;
    height: 100px;
}
.progress .wrapper-circle {
    overflow: hidden;
     50%;
    height: 100%;
}
.left {
    float: left;
}
.right {
    float: right;
}
.progress {
    margin: 20px;
}
.progress .circle {
    border-radius: 50%;
     90px;
    height: 90px;
}
.progress .left .circle {
    float: left;
    border: 5px solid red;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: left_cirlce_spin 4s linear infinite;
}

.progress .right .circle {
    float: right;
    border: 5px solid red;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: right_cirlce_spin 4s linear infinite;
}
.center{
     0px;
    height: 0px;
    position:fixed;
    left: 5.5%;
    top: 25%;
    margin: -100px 0 0 -50px;
}
.subtitle{
    position:fixed;
    left: 0.5%;
    top: 10%;
    padding-left: 20px;
}
.feeling{
    font-size: 20px;
    display: inline-block;
    /*position: absolute;*/
    padding: 10px;
    /*padding-right: 30px;*/
    border: 2px solid #00ffe4;
    border-radius: 20px;
    color: #00f6ff;
}
.feeling:before{
    background-color: #c778ff;
    border-radius: 10px;
    font-size: 15px;
    content: "feeling";
    position:  absolute;
    margin-left: -20px;
    margin-top:-30px;
    color: #fff;
}
new:before{
    content: "something there";
    font-size: 12px;
    height: 25px;
    position: absolute;
    margin-top:-2px;
    color: #ffffff;
    transition: all 10s step-end;
    background-color: #000000;;
}
new:hover:before{
    transition: all 1s ease-in;
    opacity: .0 !important;
}
test{
    font-family: "Icons" !important;
}
#page_end_html
{
    left: 0px;
    min- 100%;
    z-index: -1;
    background-color:#56EDFF;
    position: fixed;
    bottom: 0px;
    opacity: 0.6 !important;;
}
.comment_date:after{
    font-size: 20px;
    padding-left: 10px;
    content: "stO";
    color: #e69286;
}
.louzhu:after{
    position: absolute;
    content: " 蒟蒻";
    border: 8px solid #fff;
    min- 20px;
    margin-left: 110px;
    z-index: 100;
    background-color: #fff;
    color: #fc8f8c;
}

　　　　

　　　　效果