【布局和界面】鼠标悬停动物显示和隐藏动画特效源码库

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="./style.css">

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
<script src="./script.js"></script>

<h1>基于vuejs的鼠标悬停动物显示和隐藏动画特效 <span>Mochi Shiba (vuejs, svg, css, cute)</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.zzfriend.com/" title="蚂蚁开源社区" target="_blank"><span> 蚂蚁开源社区</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://bbs.zzfriend.com/forum.php?mod=forumdisplay&fid=43" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<h1>MOCHISHIBA</h1>
<p class="sub">These loyal Shiba Inu are fully cute!</p>
<main id=app>
<mochi-box shiba="ume" mood="happy" blush left-eye="laugh" right-eye="laugh" left-ear="down" right-ear="down">
<h2>うめ</h2>
<h3>
<a target="_blank" href="">Plum</a>
</h3>
<p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
</mochi-box>
<mochi-box shiba="sesame" mood="drool" left-ear="up" right-ear="up">
<h2>ごま</h2>
<h3>
<a target="_blank" href="">Sesame</a>
</h3>
<p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
</mochi-box>
<mochi-box shiba="tuna" mood="" left-ear="up" right-ear="middle">
<h2>つな</h2>
<h3>
<a target="_blank" href="">Tuna</a></h3>
<p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
</mochi-box>
<mochi-box shiba="okaka" pop mood="excited" left-ear="up" right-ear="flat">
<h2>おかか</h2>
<h3>
<a target="_blank" href="">Okaka</a></h3>
<p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
</mochi-box>
<mochi-box shiba="random">
<h2>おどろき</h2>
<h3>Random</h3>
<button>Randomize()</button>
</mochi-box>
<br>
<mochi-box shiba="anko" mood="cheeky" left-eye="open" right-eye="laugh" left-ear="flat" right-ear="middle">
<h2>あんこ</h2>
<h3>
<a target="_blank" href="o">Sweet Bean</a>
</h3>
<p class="shop uemachi" title="uemachi">うえまち団子</p>
</mochi-box>
<mochi-box shiba="kinako" mood="gleam" blush left-eye="open" right-eye="open" left-ear="middle" right-ear="middle">
<h2>きなこ</h2>
<h3>
<a target="_blank" href="">Kiwi</a>
</h3>
<p class="shop uemachi" title="uemachi">うえまち団子</p>
</mochi-box>
<mochi-box shiba="sakura" mood="cute" blush left-eye="shy" right-eye="open" left-ear="down" right-ear="middle">
<h2>さくら</h2>
<h3>
<a target="_blank" href="">Sakura</a>
</h3>
<p class="shop uemachi" title="uemachi">うえまち団子</p>
</mochi-box>
<mochi-box shiba="monaka" mood="content" left-eye="open" right-eye="wink" left-ear="middle" right-ear="flat">
<h2>もなか</h2>
<h3>
<a target="_blank" href="">Monaka</a>
</h3>
<p class="shop uemachi" title="uemachi">うえまち団子</p>
</mochi-box>
</main>
</div>