推荐（下面大多是引用这三个blogs里面的东西的）三个 nice 的 博客美化blogs：
全网最全的博客美化系列教程（疑似太监QAQ）
公告栏里的立方体：
1 <div id="blog-news"> 2 3 <style> 4 /*最外层容器样式*/ 5 .wrap { 6 width: 100px; 7 height: 100px; 8 margin: 150px; 9 position: relative; 10 } 11 12 /*包裹所有容器样式*/ 13 .cube { 14 width: 50px; 15 height: 50px; 16 margin: 0 auto; 17 transform-style: preserve-3d; 18 transform: rotateX(-30deg) rotateY(-80deg); 19 animation: rotate linear 20s infinite; 20 } 21 22 @-webkit-keyframes rotate { 23 from { 24 transform: rotateX(0deg) rotateY(0deg); 25 } 26 to { 27 transform: rotateX(360deg) rotateY(360deg); 28 } 29 } 30 31 .cube div { 32 position: absolute; 33 width: 200px; 34 height: 200px; 35 opacity: 0.8; 36 transition: all .4s; 37 } 38 39 /*定义所有图片样式*/ 40 .pic { 41 width: 200px; 42 height: 200px; 43 } 44 45 .cube .out_front { 46 transform: rotateY(0deg) translateZ(100px); 47 } 48 49 .cube .out_back { 50 transform: translateZ(-100px) rotateY(180deg); 51 } 52 53 .cube .out_left { 54 transform: rotateY(-90deg) translateZ(100px); 55 } 56 57 .cube .out_right { 58 transform: rotateY(90deg) translateZ(100px); 59 } 60 61 .cube .out_top { 62 transform: rotateX(90deg) translateZ(100px); 63 } 64 65 .cube .out_bottom { 66 transform: rotateX(-90deg) translateZ(100px); 67 } 68 69 /*定义小正方体样式*/ 70 .cube span { 71 display: block; 72 width: 100px; 73 height: 100px; 74 position: absolute; 75 top: 50px; 76 left: 50px; 77 } 78 79 .cube .in_pic { 80 width: 100px; 81 height: 100px; 82 } 83 84 .cube .in_front { 85 transform: rotateY(0deg) translateZ(50px); 86 } 87 88 .cube .in_back { 89 transform: translateZ(-50px) rotateY(180deg); 90 } 91 92 .cube .in_left { 93 transform: rotateY(-90deg) translateZ(50px); 94 } 95 96 .cube .in_right { 97 transform: rotateY(90deg) translateZ(50px); 98 } 99 100 .cube .in_top { 101 transform: rotateX(90deg) translateZ(50px); 102 } 103 104 .cube .in_bottom { 105 transform: rotateX(-90deg) translateZ(50px); 106 } 107 108 /*鼠标移入后样式*/ 109 .cube:hover .out_front { 110 transform: rotateY(0deg) translateZ(200px); 111 } 112 113 .cube:hover .out_back { 114 transform: translateZ(-200px) rotateY(180deg); 115 } 116 117 .cube:hover .out_left { 118 transform: rotateY(-90deg) translateZ(200px); 119 } 120 121 .cube:hover .out_right { 122 transform: rotateY(90deg) translateZ(200px); 123 } 124 125 .cube:hover .out_top { 126 transform: rotateX(90deg) translateZ(200px); 127 } 128 129 .cube:hover .out_bottom { 130 transform: rotateX(-90deg) translateZ(200px); 131 } 132 </style> 133 134 135 <!-- 外层最大容器 --> 136 <div class="wrap"> 137 <!--包裹所有元素的容器--> 138 <div class="cube"> 139 <!--前面图片 --> 140 <div class="out_front"> 141 <img src="http://你的图片.jpg" class="pic"> 142 </div> 143 <!--后面图片 --> 144 <div class="out_back"> 145 <img src="http://你的图片.jpg" class="pic"> 146 </div> 147 <!--左面图片 --> 148 <div class="out_left"> 149 <img src="https://你的图片.jpg" class="pic"> 150 </div> 151 <!--右面图片 --> 152 <div class="out_right"> 153 <img src="https://你的图片.jpg" class="pic"> 154 </div> 155 <!--上面图片 --> 156 <div class="out_top"> 157 <img src="https://你的图片.jpg" class="pic"> 158 </div> 159 <!--下面图片 --> 160 <div class="out_bottom"> 161 <img src="http://你的图片.jpg" class="pic"> 162 </div> 163 164 <!--小正方体 --> 165 <span class="in_front"> 166 <img src="https://你的图片.jpg" class="in_pic"> 167 </span> 168 <span class="in_back"> 169 <img src="https://你的图片.jpg" class="in_pic"> 170 </span> 171 <span class="in_left"> 172 <img src="https://你的图片.jpg" class="in_pic"> 173 </span> 174 <span class="in_right"> 175 <img src="http://你的图片.jpg" class="in_pic"> 176 </span> 177 <span class="in_top"> 178 <img src="http://你的图片.jpg" class="in_pic"> 179 </span> 180 <span class="in_bottom"> 181 <img src="http://你的图片.jpg" class="in_pic"> 182 </span> 183 </div> 184 185 </div>
公告栏里的时钟：
<embed src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" width="230" height="100"></embed>
页首Html里的鼠标点击效果：
<!DOCTYPE html> <html> <script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤请❤","❤开始❤","❤你的❤","❤表演❤","★%%%♚bztdalao♚★"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script> <body> /* 这里是其他的设置 */ </body> </html>
至于动态背景和背景变换之类的...算了吧 _(:з」∠)_