PC版 限定ですが、リンクにマウスオーバーするとそこのバナーやテキストがぼよよんと反応する CSS を入れてみました。
qxlA063_b
Internet explorer と Microsoft Edge では正しく動作しない、どころかバナーが消えたりするので、JavaScript でブラウザを判定してスキップするようにしました。
理論上は Opera や Safari でもうまくいくはずですが、テスト環境がないので当面 Chrome と Firefox 限定です。
ぼよよんCSSそのものは、様々なオープンソースを提供している GitHub樣のサンプルから拝借しました。こちらから、他にも面白い HOVERエフェクトがたくさん見られます。

では以下、自分のための覚書。
時間が経つといろいろ忘れてしまうので …

目次

JavaScript

var agentH = window.navigator.userAgent.toLowerCase();
まず、JavaScriptのオブジェクトwindow の孫プロパティuserAgentを取得します。
これにはOSやブラウザの情報が入っています。
例えばあなたが今お使いの環境なら
※JavaScriptがオフになっています
という文字列として取得されます。
最後についているtoLowerCase()は、この文字列の中の大文字を小文字に置換するメソッドです。 
if((agentH.indexOf('chrome') != -1
|| agentH.indexOf('firefox') != -1))
&& agentH.indexOf('edge') == -1)
文字列１.indexOf(文字列２)というメソッドで、文字列１に文字列２が含まれるかどうかを調べられます。含まれていれば文字列２が何文字目に含まれているかのインデックスを、含まれていなければ-1を返します。
Edgeについては、なぜか Chrome や Safari という文字列を含むので、上のように二重に確認する必要があります。
また、ここでは使っていませんが Internet explorer11 は Msei という文字列を含まないので、識別するには代りに trident/7 という文字列を使います。

以下、if文の中身。 
{
  var $st = document.createElement('style');
  $st.setAttribute('type','text/css');
  $st.innerHTML =  '(CSSコード)';
  document.getElementsByTagName('head')[0].appendChild($st);
}
<head>要素の中に<style>要素を書き込んでいます。
(CSSコード)の部分は、改行や余分な空白などを除去した書き方をしています。

CSS

そのCSSコード(ベンダープレフィックスは省略) 
@keyframes hvr-wobble-vertical{
  16.65%{transform:translateY(8px)}
  33.3%{transform:translateY(-6px)}
  49.95%{transform:translateY(4px)}
  66.6%{transform:translateY(-2px)}
  83.25%{transform:translateY(1px)}
  100%{transform:translateY(0)}
}
この hvr-wobble-vertical というのがアニメの名前になります。
transform:translateY(移動距離)で縦方向の変化を指定、これを@keyframes の中に書けば、スケジュール通りに要素が動きます。
この部分をいじることで、様々な動きをさせることができます。 
a{
  display:inline-block;
  vertical-align:middle;
  transform:translateZ(0);
  box-shadow:0 0 1px rgba(0,0,0,0);
  backface-visibility:hidden;
}
ソースではここのセレクタは a ではなく、アニメーションの名前と同じクラス名 .hvr-wobble-verticalでした。
すべての a に対し<a class="hvr-wobble-vertical">と書き直すのが面倒なので、このように書き換えました。 
a:active,a:focus,a:hover{
  top: 0; left: 0;
  animation-name:hvr-wobble-vertical;
  animation-duration:1s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:1
}
デフォルトではマウスオーバー時 top と left を 2px ずらす仕様なので、リセットしておきます。
animationの部分は 
  animation:hvr-wobble-vertical 1s ease-in-out 1;
と、一行にまとめて書くこともできます(ショートハンド記法)

ぼよよんしないリンク

サードバーに並んでいるブログパーツのうち、にほんブログ村やニコニコチャンネルのプラグインに附属のリンクは、ぼよよんしません。
これはプラグインのスクリプトでCSSを上書きしているからだと思います。
まあ外部サービスなので上書きし返すこともないですよね。
このままにしておきます。

【1月22日追記】
ぼよよんのCSSを、小刻みに横揺れする種類に変えました。 
@keyframes hvr-buzz-out{
  10%{transform: translateX(3px) rotate(2deg)}
  20%{transform: translateX(-3px) rotate(-2deg)}
  30%{transform: translateX(3px) rotate(2deg)}
  40%{transform: translateX(-3px) rotate(-2deg)}
  50%{transform: translateX(2px) rotate(1deg)}
  60%{transform: translateX(-2px) rotate(-1deg)}
  70%{transform: translateX(2px) rotate(1deg)}
  80%{transform: translateX(-2px) rotate(-1deg)}
  90%{transform: translateX(1px) rotate(0)}
  100%{transform: translateX(-1px) rotate(0)}
}
a{
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0,0,0,0);
  backface-visibility: hidden;
}
a:active, a:focus, a:hover{
  animation: hvr-buzz-out .75s linear 1;
}
【6月14日追記】
追記の日附よりだいぶ前にですが、アンダーバーが伸びるエフェクトに変えました。(例によってChrome、Firefox系のみです) 
a{
  display:inline-block;
  vertical-align:middle;
  transform:translateZ(0);
  box-shadow:0 0 1px transparent;
  backface-visibility:hidden;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  overflow:hidden;
  text-decoration:none!important
}
a:before{
  content:"";
  position:absolute;
  z-index:10;
  left:50%;right:50%;bottom:0;
  background:rgba(220,20,60,.5);
  height:4px;
  transition:left,right .3s ease-out;
}
a:active:before,
a:focus:before,
a:hover,
a:hover:before{
  left:0;right:0
}
#page-top a:before{
  content:none;/*エフェクトをかけたくない要素*/
}
タグ ：
#CSS
#JavaScript