为了是博客稍微花哨一点,不要太单调,简单的添加了一些特效进来.
时钟人特效添加,只需要一段代码就可以达到效果了.
<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