博客园特效简单添加
为了是博客稍微花哨一点,不要太单调,简单的添加了一些特效进来.
时钟人特效添加,只需要一段代码就可以达到效果了.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle"> <param name="allowScriptAccess" value="always"> <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <param name="wmode" value="transparent"> <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object>
界面悬浮的轮播图,本来是位置固定的,但是能够展示的位置太小,就悬浮放置了.
直接上界面的代码:
<div id="carousel" title="点击消失"> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_1.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_2.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_3.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_4.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_5.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_6.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_7.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_8.jpg" alt="" title="点击消失"></figure> <figure><img src="http://images.cnblogs.com/cnblogs_com/wangkun1993/1032939/o_9.jpg" alt="" title="点击消失"></figure> </div>
应该可以看出需要你提前找到几张图片,上传到博客或者那里都行吧.
这个添加了还没有完成,需要添加相关的动态效果,不然只是静止的.相关的css如下:
#carousel{ width: 100%; height: auto; position: fixed; transform-style: preserve-3d; animation: rotation 20s infinite linear; opacity:0.1; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } #carousel:hover{ animation-play-state: paused; opacity:1; filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */ } #carousel figure{ display: block; position: absolute; width: 186px; height: 116px; left: 10px; top: 10px; background: black; overflow: hidden; border: solid 5px black; } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} img{ -webkit-filter: grayscale(0); cursor: pointer; transition: all .5s ease; } img:hover{ -webkit-filter: grayscale(0); transform: scale(1.2,1.2); } @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }
有时候可能觉得轮播图比较碍眼,可以设置成点击消失吧:
<script type="text/javascript"> $(document).on("click","#carousel",function(){ $(this).css({"display":"none"}); $(this).siblings().css({"display":"block"}); }); </script>
这个就是轮播图的所有代码了.
这个部分参考的是:
下面介绍的是一个宠物的代码:
<object type="application/x-shockwave-flash" style="outline:none; width:97%" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160"> <param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&"> <param name="AllowScriptAccess" value="always"> <param name="wmode" value="opaque"></object>
参考的是博客主页如下:
ASP.NET MVC5 怒跨 Linux 平台 - Mr.Tua - 博客园
http://www.cnblogs.com/poepoe/p/7234668.html
下面介绍一个访客国家人数的一个统计图片.
<a href="http://info.flagcounter.com/926p"><img src="//s11.flagcounter.com/count2/926p/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
[URL=http://info.flagcounter.com/926p][IMG]http://s11.flagcounter.com/count2/926p/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/[/IMG][/URL]
代码很简单,但是需要用到这个对应的服务地址,不然只能统计别人的地址了.下面的第二个连接就是申请的地址.
参考的代码来自下面的主页,以及服务提供商:
龚细军 - 博客园
http://www.cnblogs.com/gongxijun/
Flag Counter - Free counters - Instant, easy and fun!
https://s11.flagcounter.com/index.html
下面介绍一个世界地理位置的访客统计:
<div style="text-align:center; margin:0; padding:0; width:202px;"><embed src="//rf.revolvermaps.com/f/g.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" wmode="window" allowScriptAccess="always" allowNetworking="all" width="202" height="202" flashvars="m=0&i=591dohmimnk&r=false&v=true&b=000000&n=false&s=202&c=ff0000"></embed><br /><img src="//rf.revolvermaps.com/js/c/591dohmimnk.gif" width="1" height="1" alt="" /><a href="http://www.revolvermaps.com/?target=enlarge&i=591dohmimnk">Large Visitor Globe</a></div>
代码和上面那个差不多,也是需要申请,参考的博客是下面的这个:
龚细军 - 博客园
http://www.cnblogs.com/gongxijun/
Welcome to RevolverMaps | RevolverMaps - Free 3D Visitor Maps
http://www.revolvermaps.com/?target=home
