分享自己的博客模板

页面定制 CSS 代码（禁用模板默认CSS）

/*
back: e5eef7;
element:6b86b3
element:hover:b6c9e7

*/

/************自定义的*************/
body {
/*http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_3.jpg*/
font-size:15px;
padding:0;
margin:0;
font-family:"微软雅黑","宋体",Arial;
min-width:1200px;
height: 100%;
}


#home {
/* opacity: 0.85;
filter: alpha(opacity=85); */
box-shadow:0 0 10px #6b86b3;
margin:40px auto;
width:1200px;
background:#fff;
overflow:auto;
border:solid 1px #fff;
}
/*段落*/
.postBody p,.postCon p {
margin:7px 0;
line-height:24px;
}
h1 {
margin:0;
}
h3 {
color: #fff;
background-color: #6b86b3;
-moz-border-radius: 5px;
border-radius: 5px;
padding:6px;
margin:10px 0px;
text-shadow:2px 2px 3px #404040;
}
/*超链接*/
a {
color:#708090;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited,a:hover {
color:#708090;
}
ul {
list-style:none;
margin:0;
padding:0;
}
image {
border:none;
}
#header {
padding:20px;
}
/*博客标题*/
#blogTitle,#blogTitle a {
font-weight:bold;
color: #6b86b3;
}

#blogTitle .title {
margin-top:0px;
height:80px;
line-height:100px;
font-size:36px;
padding-left:5px;
/* background:#fff url('http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_o_light2.png') no-repeat; */
} 
.headermaintitle {
}#blogTitle,#blogTitle a:hover {
text-decoration:none;
}
/*子标题*/
.subtitle {
padding-left:5px;
font-size:20px;
line-height:30px;
color:#6b86b3;
font-weight:bold;
margin:10px 0;
animation: change 3s ease-in; 
}
.subtitle:hover{
padding-left:5px;
font-size:20px;
line-height:30px;
color:#6b86b3;
font-weight:bold;
margin:10px 0;
animation: change 3s ease-in infinite; 
}
@keyframes change {
0%{ color: #6b86b3;}
14%{ color: #FF6666; text-shadow: 0 0 4px #FF6666}
28%{ color: #FF9966; text-shadow: 0 0 8px #FF9966 }
42%{ color: #FFFF99; text-shadow: 0 0 12px #FFFF99 }
56%{ color: #CCFF99; text-shadow: 0 0 12px #CCFF99 }
70%{ color: #CCFFFF; text-shadow: 0 0 8px #CCFFFF }
85%{ color: #FFCCFF; text-shadow: 0 0 4px #FFCCFF}
100%{ color: #6b86b3; }
}
@keyframes oldChange {
0%{ text-shadow: 0 0 12px #6b86b3}
25%{ text-shadow: 0 0 12px #66CCFF}
50%{ text-shadow: 0 0 12px #66FFFF}
75%{ text-shadow: 0 0 12px #66CCFF}
100%{ text-shadow: 0 0 12px #6b86b3}
}
/*导航栏*/
#navigator {
font-size:16px;
height:48px;
background: #6b86b3;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
#navList li {
margin:0;
line-height:48px;
display:inline-block;
float:left;
}
#navList li:hover {
background:#b6c9e7;
}
#navList li a {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#fff;
display:-moz-inline-box;
display:inline-block;
}
.blogStats {
height:48px;
color:#fff;
line-height:48px;
}
#main {
padding:20px;
}
/*左边*/
#sideBarMain {
padding:0 10px 0 0;
background:#fff;
margin:0 0 20px 0;
width:190px;
font-size:12px;
line-height:22px;
}
#sideBarMain a {
color:#666;
}
#leftcontentcontainer {
color:#666;
}
.newsItem {
color:#666;
}
/*公告*/
#profile_block {
margin-top:0px;
line-height:24px;
text-align:left;
}
/*主面板*/
#mainContent {
margin-top:0px;
padding-top:0px;
padding-right:0px;
background:#fff;
padding-bottom:0px;
float:right;
width:960px;
padding-left:0px;
}
/*每日文章列表*/
.day {
background:#fff;
padding:0;
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
color:#464646;
}
.postTitle {
padding-bottom:10px;
font-size:20px;
font-weight:bold;
color:#464646;
background:url('http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_o_br229512.link%28en-us,MSDN.10%29.gif') no-repeat 0 3px;
padding-left:30px;
}
.dayTitle {
display:none;
}
/*摘要*/
.c_b_p_desc {
padding:10px;
line-height:24px;
color:#888;
}
.c_b_p_desc a {
color:#888;
}
.c_b_p_desc a:hover {
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:dotted;
}
/*右侧图片*/
.desc_img {
margin-left:10px;
border:solid 1px #fff;
box-shadow:0 0 10px #aaa;
}
/*博文页*/
#topics .post {
background:#fff;
}
.postCon {
padding:10px 20px 0 20px;
}
.postDesc {
margin:0 30px;
margin-bottom:2px;
padding:8px 0px;
font-size:12px;
color:#aaa;
background:#fff;
text-align:right;
}
.postDesc a {
color:#AAA;
}
.postBody {
padding:0;
}
/*google搜索框*/
#google_q,#q {
height:22px;
width:120px;
border:solid 1px #ccc;
box-shadow:inset 0 0 3px #ddd;
border-radius:4px;
}
/*搜索按钮*/
.btn_my_zzk {
font-family:'Microsoft Yahei';
border:none;
height:26px;
width:60px;
padding:1px;
font-size:14px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#6b86b3;
border-radius:4px;
color:#fff;
}
.btn_my_zzk:hover {
background:#b6c9e7;
}
/*评论按钮*/

#btn_comment_submit {
border:none;
height:48px;
width:120px;
}
/*评论按钮*/
.comment_btn {
font-family:'Microsoft Yahei';
border:none;
height:48px;
width:120px;
font-size:18px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#6b86b3;
color:#fff;
}
#btn_comment_submit:hover {
background:#b6c9e7;
}
/*评论标题*/
.feedback_area_title {
padding:10px;
font-size:24px;
font-weight:bold;
color:#6b86b3;
border-bottom:solid 6px #6b86b3;
}
.feedbackListSubtitle {
font-size:12px;
color:#888;
}
.feedbackListSubtitle a {
color:#888;
}
.comment_quote {
background:#FCFAAC;
padding:15px;
border:1px solid #CCC;
}
#commentform_title {
color:#6b86b3;
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:10px 20px 10px 10px;
font-size:24px;
font-weight:bold;
border-bottom:solid 6px #708090;
}
/*评论框*/
#comment_form {
margin:10px 0;
padding:0;
}
.commentform {
margin:10px 0;
padding:10px 20px;
background:#fff;
}
/*评论输入域*/
#tbCommentBody {
font-family:'MIcrosoft Yahei';
margin-top:10px;
width:940px;
max-width:940px;
min-width:940px;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
padding:10px;
height:120px;
font-size:14px;
min-height:120px;
}
/*评论条目*/
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}
/*分类页*/
.entrylist {
padding:10px 20px;
background:#fff;
}
.entrylistItem {
margin:10px 0;
padding:10px;
}
.entrylistPosttitle {
font-size:18px;
font-weight:bold;
background:url('http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_o_br229512.link%28en-us,MSDN.10%29.gif') no-repeat 0 3px;
padding-left:30px;
}
.entrylistPostSummary {
padding:10px;
}
.entrylistItemPostDesc {
font-size:12px;
color:#999;
padding-left:40px;
}
/*尾部*/
#footer {
font-size:12px;
margin:20px;
padding:12px;
text-align:center;
background:#6b86b3;
color:#DDD;
font-size:14px;
}
/*文章内图片*/
#cnblogs_post_body p img {
margin:10px;
}
/*顶一下*/
.diggnum {
font-size:28px;
color:#616161;
font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
line-height:100px;
}
.diggit {
float:left;
width:128px;
height:100px;
background:url('http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_1429026411_187773.png') no-repeat;
background-position:0px 35px;
text-align:center;
cursor:pointer;
}
.diggit:hover {
background:url('http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_1429026814_441088.png') no-repeat;
background-position:0px 35px;
}
/*踩一下*/
.buryit {
display:none;
}
.diggword {
display:none;
}
/*green_channel*/
#green_channel {
text:align:right;
background:#6b86b3;
padding-left:20px;
font-weight:normal;
font-size:15px;
width:920px;
border:none;
color:#fff;
padding:20px;
border-radius:4px;
}
/*最新评论*/
#myposts .PostList {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
color:#C2C2C2;
}

/*评论框*/
.list .out .topleft, .list .out .topright, .list .out .bottomleft, .list .out .bottomright, .list .inc .topleft, .list .inc .topright, .list .inc .bottomleft, .list .inc .bottomright
{
background-image:url("http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_t_o_bubbles.png");
background-attachment:no-repeat;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:transparent;

}
.list .out .top, .list .out .bottom, .list .inc .top, .list .inc .bottom
{
background-image:url("http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_t_o_horizontal.png");
background-attachment:scroll;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:transparent;
}
.list .out .left, .list .out .right, .list .inc .left, .list .inc .right
{
background-image:url("http://images.cnblogs.com/cnblogs_com/zuoxiaolong/678771/o_t_o_vertical.png");
background-attachment:scroll;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:transparent;
}

 

 

 

 

 

 

 


/**body back**/
#bodyBack{
position: fixed;
left:0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #e5eef7 /*#e5eef7 196a73 url('http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/01/88/cd3d02b1392f0129dd320f51a906a2c9.jpg') no-repeat center fixed*/;
}
@keyframes bodyBackAnim {
0%{ opacity: 1; filter: alpha(opacity=100); }
12%{ opacity: 1; filter: alpha(opacity=100);}
24%{ opacity: 0.6; filter: alpha(opacity=60);}
36%{ opacity: 0.3; filter: alpha(opacity=30);}
50%{ opacity: 0; filter: alpha(opacity=0);}
62%{ opacity: 0.3; filter: alpha(opacity=30);}
74%{ opacity: 0.6; filter: alpha(opacity=60);}
85%{ opacity: 1; filter: alpha(opacity=100);}
100%{ opacity: 1; filter: alpha(opacity=100);}
}

 

 

 

 

 

/**left board**/

/*
default circle color : crimson;
*/


.view {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-perspective: 400;
perspective: 400;
}

.plane {
width: 120px;
height: 120px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plane.main {

margin-left: 35px;
margin-top: 30px;
margin-bottom:30px;
-webkit-transform: rotateX(60deg) rotateZ(-30deg);
transform: rotateX(60deg) rotateZ(-30deg);
-webkit-animation: rotate 20s infinite linear;
animation: rotate 20s infinite linear;
}
.plane.main .circle {
width: 120px;
height: 120px;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 100%;
box-sizing: border-box;
box-shadow: 0 0 60px #6b86b3, inset 0 0 60px #6b86b3;
}
.plane.main .circle::before, .plane.main .circle::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 10%;
height: 10%;
border-radius: 100%;
background: #6b86b3;
box-sizing: border-box;
box-shadow: 0 0 60px 2px #6b86b3;
}
.plane.main .circle::before {
-webkit-transform: translateZ(-90px);
transform: translateZ(-90px);
}
.plane.main .circle::after {
-webkit-transform: translateZ(90px);
transform: translateZ(90px);
}
.plane.main .circle:nth-child(1) {
-webkit-transform: rotateZ(72deg) rotateX(63.435deg);
transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
-webkit-transform: rotateZ(144deg) rotateX(63.435deg);
transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
-webkit-transform: rotateZ(216deg) rotateX(63.435deg);
transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
-webkit-transform: rotateZ(288deg) rotateX(63.435deg);
transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
-webkit-transform: rotateZ(360deg) rotateX(63.435deg);
transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

@keyframes rotate {
0% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}


.fly{
z-index: 100;
position: absolute;
left: 15%;
width: 70%;
height: 70%;
top: 30%;
}

 

博客侧边栏公告（支持HTML代码） （支持 JS 代码）

<div class="plane main">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div onclick="startFly()" style="width:100%;height:30px;background:#6b86b3;margin-top:55px;margin-bottom:5px;border-radius:5px;padding-top:4px; cursor:pointer;">
<span style="margin-left: 7px;color: white;text-shadow: 2px 2px 3px #404040;font-size: 1.17em;font-weight: bold;">纯CSS卫星</span> 
<span style="font-size:17px;font-weight:bold;color:white;margin-left:12px;">↑</span>
<span style="font-size:12px;color:white;margin-left:15px;">点我起飞</span>
</div>

<script>
var isFlying = false;
var isClicked = false;
var startFly = function(){
clickFlag = true;
if(isFlying){
jQuery('.plane').removeClass("fly");
}else{
jQuery('.plane').addClass("fly");
}
isFlying = !isFlying;
}
startFly();
isClicked = false;
var checkTimeOut = function(){
if(!isClicked){
startFly();
}
}
setTimeout('checkTimeOut()', 8000);
</script>

页首 HTML 代码

<div id="bodyBack">
</div>