コピペで簡単！ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets

Post on:2021年1月12日

CSSeffectsSnippetsのデモ

デモページでは、ボタンやテキストやアイコンのさまざまなエフェクトが実装されています。ちなみに、デモはVue.jsで構築されています。

CSSeffectsSnippets

以前、紹介した時からかなり増えています！

CSSeffectsSnippetsの使い方

使い方は簡単です。
デモページでエフェクトをクリックすると、CSSがコピーされます。あとは、ボタンやテキストやアイコンのHTMLを用意するだけです。

デモを実際にいくつかコピペしてみました。

テキスト

テキストをホバーすると、下線がアニメーションで表示されます。

<p class="borderLeftRight">テキスト</p>

1	<p class="borderLeftRight">テキスト</p>

HTMLはpタグにclassを与えるだけです。

.borderLeftRight {
    display: inline-block;
    position: relative;
    color: hsl(222, 25%, 14%);
  }
  
  .borderLeftRight::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: hsl(243, 80%, 62%);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .borderLeftRight:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

.borderLeftRight {

display: inline-block;

position: relative;

color: hsl(222, 25%, 14%);

}

.borderLeftRight::after {

content: '';

position: absolute;

width: 100%;

transform: scaleX(0);

height: 2px;

bottom: 0;

left: 0;

background-color: hsl(243, 80%, 62%);

transform-origin: bottom right;

transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);

}

.borderLeftRight:hover::after {

transform: scaleX(1);

transform-origin: bottom left;

}

カーソルをポインターにするために、CSSにcursor: pointer;を加えました。

ボタン

ボタンをホバーすると、パルスのエフェクトでアニメーションします。

<div class="pulseBtn">ボタン</div>

1	<div class="pulseBtn">ボタン</div>

HTMLはdivタグにclassを与えるだけです。
buttonタグでも機能しますが、外観のスタイルを加える必要があります。

.pulseBtn {
    padding: 12px 24px;
    background-color: hsl(222, 100%, 95%);
    color: hsl(243, 80%, 62%);
    border-radius: 6px;
    box-shadow: 0 0 0 0 rgba(230, 237, 255, 0.7);
    animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse {
    to {
      box-shadow: 0 0 0 30px rgba(230, 237, 255, 0);
    }
}

.pulseBtn {

padding: 12px 24px;

background-color: hsl(222, 100%, 95%);

color: hsl(243, 80%, 62%);

border-radius: 6px;

box-shadow: 0 0 0 0 rgba(230, 237, 255, 0.7);

animation: pulse 1.75s infinite cubic-bezier(0.66, 0, 0, 1);

}

@keyframes pulse {

to {

box-shadow: 0 0 0 30px rgba(230, 237, 255, 0);

}

カーソルをポインターにするために、CSSにcursor: pointer;を加えました。

Webページやスマホアプリで見かけるスピナーも簡単です。

<div class="donutSpinner"></div>

1	<div class="donutSpinner"></div>

スピナーは空のdivタグにclassを与えるだけです。

.donutSpinner {
    display: inline-block;
    border: 4px solid hsl(222, 100%, 95%);;
    border-left-color: hsl(243, 80%, 62%);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: donut-spin 1.2s linear infinite;
}

@keyframes donut-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.donutSpinner {

display: inline-block;

border: 4px solid hsl(222, 100%, 95%);;

border-left-color: hsl(243, 80%, 62%);

border-radius: 50%;

width: 30px;

height: 30px;

animation: donut-spin 1.2s linear infinite;

}

@keyframes donut-spin {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

スピナーも数行のCSSで簡単に実装できます。

ここをクリック、ここに注目のバウンドするアニメーションです。

<div class="arrowBounce"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="20"><path d="M7.5 0a.5.5 0 01.5.5v16.17l4.44-4.45a.5.5 0 01.71 0l.7.71a.5.5 0 010 .71l-6.13 6.14a.75.75 0 01-.53.22h-.38a.77.77 0 01-.53-.22L.15 13.64a.5.5 0 010-.71l.7-.71a.49.49 0 01.7 0L6 16.67V.5a.5.5 0 01.5-.5z"></path></svg></div>

divタグにclassを与え、アイコンを用意します。上記はSVGコードで、矢印のアイコンを実装しています。

.arrowBounce {
    position: relative;
    animation: bounce 2s infinite;
}

.arrowBounce svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: hsl(243, 80%, 62%);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}