博客园特效简单添加

  为了是博客稍微花哨一点,不要太单调,简单的添加了一些特效进来.

  时钟人特效添加,只需要一段代码就可以达到效果了.

<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&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="200" height="160">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;">
<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&amp;i=591dohmimnk&amp;r=false&amp;v=true&amp;b=000000&amp;n=false&amp;s=202&amp;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&amp;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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励