あなたの興味を広げる話題を。

コピペでOK!【リンクの装飾】ホバーエフェクトのCSSアニメーション

2019年05月15日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など 0

CSS3のロゴ

FC2ブロガーのMです。今回は、ハイパーリンクhyperlink)のお話しを。ちなみに、ハイパーリンクとは、Web上でページとページをつなぐ仕組みのことですが、今ではほとんど「リンク」という呼び名で通じますよね。

リンクは、CSSだけでいろんな装飾カスタマイズが出来るので、自分のFC2ブログを使って遊んでみることにしました。実装してみたら案外おもしろかったので、記事でご紹介しようと思います。

コピペでOKですので、ウェブデザインのご参考まで。

スポンサードリンク

【リンクの装飾】CSSだけでホバーエフェクトをカスタマイズ

リンクホバー(マウスを上に乗せる、指をあてる)すると上下に揺れ動くホバーエフェクトCSSだけで実装してみました。

▼こちら

どうでしょうか?ブログのお好きな場所に使うことでかなりのインパクトが演出できると思います。

コピペでOK!ホバーエフェクトのHTMLとCSSコード

ボクが実際にブログへ埋め込んだHTMLCSSコードを載せておきますね。

▼HTML(<>は全角です)

<div class="swingVertical"><a href="#" target="_blank" title="ホバーすると文字が上下に揺れ動きます">ホバーすると文字が上下に揺れ動きます</a></div>

▼CSS

/***------------------------------------------
swingVertical
------------------------------------------***/

.swingVertical:hover
{
animation: swingVertical 1s ease;
animation-iteration-count: 1;
}

@keyframes swingVertical
{
15%
{
transform: translateY(6px);
}
30%
{
transform: translateY(-6px);
}
50%
{
transform: translateY(4px);
}
65%
{
transform: translateY(-2px);
}
80%
{
transform: translateY(2px);
}
100%
{
transform: translateY(0);
}
}

なお、お使いになる際は、あらかじめテンプレートバックアップしたうえでお願いします。

Webデザインの参考にした便利サイトはこちら

ボクが参考にさせてもらった便利サイトはこちら。

>>CSSeffectsSnippets.

インパクトを演出できる印象的なホバーエフェクトや、ボタン、テキストなどをあつめたアニメーションライブラリ。クリックするだけでCSSをコピーできる便利なお役立ちツールです。

スポンサードリンク
関連記事

コメント 0件

コメントはまだありません
未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5853)
┣  胃がんブログ (247)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5541)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (33)
┗  がん治療のクラウドファンディング (10)
胃がん History (83)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (25)
がん のこと(ガン情報全般) (442)
┣  がんブログ (246)
┗  がんニュース (196)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (132)
┣  Amazonセール (2)
┗  📱kindleセール (129)
おもしろグッズ (9)
今日のエッセイ (73)
ニュース・芸能・話題 (665)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (45)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (73)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (113)
┗  その他、簡単レシピなど (39)
ブログ (207)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (172)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (26)
┗  ファッション (1)
iPhone の使い方・アプリなど (27)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (26)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (4)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)