vov.css
https://vaibhav111tandon.github.io/vov.css/
<head></head>にcssを読み込みます。CDNで呼び出すこともできます。
<link rel="stylesheet" href="vov.min.css">使い方はアニメーションさせたい要素にクラスを追加
<h1 class="vov flash">sample animations</h1>時間、遅延、回数なども指定可能。
CSS ANIMO
ホバーエフェクト、ローディングなどのアニメーションがクリックするとコピーできます。
Animista
アニメーションの動作を確認ながら細かい調整ができます。右上の{・}からソースを確認できます。
Keyframes
アニメーション、シャドウ、カラーを作れるジェネレータ。
Izmir Hover Effects
画像ホバースタイルを簡単に実装できるミニCSSライブラリ。
こちらも豊富なホバースタイルが揃っていてデモを確認できます。
https://tipsy.github.io/bubbly-bg/
泡がユラユラ漂う背景アニメ。
<script src="https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js"></script>
<script>bubbly();</script>オプション指定可能
bubbly({
animate: false, // アニメション無効にする デフォルトはtrue
blur: 1, // ぼかし具合 デフォルト 4
bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
bubbles: 100, // デフォルトは Math.floor((canvas.width + canvas.height) * 0.02);
canvas: document.querySelector("#background"), // default is created and attached
colorStart: "#4c004c", // default is blue-ish
colorStop: "#1a001a",// default is blue-ish
compose: "lighter", // デフォルト
shadowColor: "#0ff", // デフォルトは #fff
angleFunc: () => Math.random() * Math.PI * 2, // デフォルト
velocityFunc: () => 0.1 + Math.random() * 0.5, // デフォルト
radiusFunc: () => 4 + Math.random() * 25 // デフォルトは 4 + Math.random() * width / 25
});
