WEB Tips デザイン・コーディング

コピペできるCSSアニメーションのスニペット

コピペできるCSSアニメーションのスニペット

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

https://cssanimo.netlify.app/

ホバーエフェクト、ローディングなどのアニメーションがクリックするとコピーできます。

Animista

https://animista.net/play

アニメーションの動作を確認ながら細かい調整ができます。右上の{・}からソースを確認できます。

Keyframes

https://keyframes.app/

アニメーション、シャドウ、カラーを作れるジェネレータ。

Izmir Hover Effects

https://ciar4n.com/izmir/

画像ホバースタイルを簡単に実装できるミニ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
});

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-