html动画效果收集篇

1

<!-- 时钟控件 -->

    <div id="clockdiv"><canvas id="dom" width="180" height="180">您的浏览器不兼容canvas</canvas></div>

    <script type="text/javascript" src="https://blog-static.cnblogs.com/files/cyuanwu/clock.js"></script>

---------------------------------------------------------------------------------------------------------------------------------------------

2

<!-- 小企鹅游戏控件 -->

    <object type="application/x-shockwave-flash" style="outline:none;"

        data="http://cdn.abowman.com/widgets/penguins/penguins.swf?" width="100%" height="100%">

        <param name="movie" value="http://cdn.abowman.com/widgets/penguins/penguins.swf?">

        </param>

        <param name="AllowScriptAccess" value="always">

        </param>

        <param name="wmode" value="opaque">

        </param>

        <param name="scale" value="noscale" />

        <param name="salign" value="tl" />

    </object>

 

 

有水印！！！！！！！！！！！！！

---------------------------------------------------------------------------------------------------------------------------------------------

3

<!-- 背景动画 -->

    <canvas id="c_n9" width="1920" height="990"

        style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>

    <script src="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>

 

 ---------------------------------------------------------------------------------------------------------------------------------------------

4

<!-- 猫咪动画 -->

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

     <script>

         L2Dwidget.init({

             "model": {

                 jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",

                 "scale": 1

             },

             "display": {

                 "position": "left",

                 "width": 100,

                 "height": 200,

                 "hOffset": 70,

                 "vOffset": 0

             },

             "mobile": {

                 "show": true,

                 "scale": 0.5

             },

             "react": {

                 "opacityDefault": 0.7,

                 "opacityOnHover": 0.2

             }

         });

     window.onload = function(){

          $("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")

     }

     </script>

 

 

  ---------------------------------------------------------------------------------------------------------------------------------------------

5

   <!-- 底部加了小鱼-->

  <div id="jsi-flying-fish-container" class="container"></div>

  <script src='https://blog-static.cnblogs.com/files/elkyo/fish.js'></script>

  

<style>

  @media only screen and (max-width: 767px){

  #sidebar_search_box input[type=text]{width:calc(100% - 24px)}

  }

  </style>

  ---------------------------------------------------------------------------------------------------------------------------------------------

6

<!--点击冒点-->

  <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

  <script src="https://blog-static.cnblogs.com/files/elkyo/mouse-click.js"></script>

 

 

   ---------------------------------------------------------------------------------------------------------------------------------------------

7

<!--音乐-->

  <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">

  <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="3025663508" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>

  <script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>

  <script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>

 

 （注：正常应该通过npm下载hexo使用 Aplayer）

上传自己的歌单

示例

打开自己的网易云歌单 https://music.163.com/#/playlist?id=2357514702

网址后的id替换掉代码中的data-id的值即可自动上传自己歌单里的歌曲

 

   ---------------------------------------------------------------------------------------------------------------------------------------------

 

7

<!--仓鼠-->

<canvas id="c_n9" width="1920" height="990"
style="position: fixed; top: 0px; right: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://blog-static.cnblogs.com/files/cyuanwu/canvas-nest.min.js"></script>
<div classname="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.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="240" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.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></div>