Loading…

WordPress カスタマイズ 伝えたいこと 備忘録

テキストにリンクがある場合にくるっと回るアニメーション

テキストにリンクがある場合にアニメーション効果をつけるCSS方法11選

本日の人気記事BEST10

所要時間目安:5

この記事は2017年3月5日のものです。現在は状況が異なる可能性がありますのでご注意ください。

WordPress カスタマイズ 伝えたいこと 備忘録

テキストにリンクがある場合にくるっと回るアニメーション

先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。

画像にリンクがある場合にCSSだけでゆっくりと透過させる方法

こちらの続編で忘れないうちに記事にして備忘録として残しておこうと思います。

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ
よく読まれている人気記事一覧

テキストにリンクがある場合にアニメーションをつける方法11個です。

 

まずは、現在の私のサイトでも採用しているテキストにリンクがある場合にゆっくりと色が変わるアニメーション効果を再現するCSSです。

 

a {
 color: #808080;
 text-decoration: underline;
 -webkit-transition: .8s;
 -moz-transition: .8s;
 -o-transition: .8s;
 -ms-transition: .8s;
 transition: .8s;
 }

 a:hover {
 color: #ffd700;
 }

 

こちらのデモです。

次に、テキストにリンクがある場合にゆっくりと背景色が変わるリンクテキストアニメーションのCSです。

 

a {
 color: #f5f5f5;
 background: #a9a9a9;
 text-decoration: none;
 -webkit-transition: .8s;
 -moz-transition: .8s;
 -o-transition: .8s;
 -ms-transition: .8s;
 transition: .8s;
 }

 a:hover {
 color: #f0f8ff;
 background: #ff99cc;
 }

 

デモは以下になります。

テキストにリンクがある場合に背景色がゆっくりと変わるアニメーション

 

次に、テキストにリンクがある場合に拡大するアニメーション効果をつけるCSSの方法です。

 

a {
 display: inline-block;
 color: #4169e1;
 -webkit-transition: .3s;
 -moz-transition: .3s;
 -o-transition: .3s;
 -ms-transition: .3s;
 transition: .3s;
 }

 a:hover {
 -webkit-transform: scale(1.2,1.2);
 -moz-transform: scale(1.2,1.2);
 -o-transform: scale(1.2,1.2);
 -ms-transform: scale(1.2,1.2);
 transform: scale(1.2,1.2);
 }

 

以下がデモになります。

テキストにリンクがある場合にゆっくり大きくなるアニメーション

 

次に、テキストにリンクがある場合に中央からアンダーラインが現れるアニメーション効果をつけるCSSの方法です。

 

a {
 position: relative;
 display: inline-block;
 color: #4169e1;
 padding: .4em;
 text-decoration: none;
 }

 a:hover {
 color: #ff69b4;
 }

 a::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 1px;
 -webkit-transform: scaleX(0);
 -ms-transform: scaleX(0);
 transform: scaleX(0);
 background-color: #ff69b4;
 -webkit-transition: all .3s ease;
 transition: all .3s ease;
 }

 a:hover::after {
 -webkit-transform: scaleX(1);
 -ms-transform: scaleX(1);
 transform: scaleX(1);
 }

 

以下がデモになります。

テキストにリンクがある場合に中央からアンダーラインが表示されるアニメーション

 

次に、テキストにリンクがある場合にマウスオーバーで傾いてしまうアニメーション効果をつけるCSS方法です。

 

a {
 display: inline-block;
 transition: .3s;
 }
 a:hover {
 transform: rotate(5deg);
 }

 

以下がデモになります。

テキストにリンクがある場合にゆっくり傾くアニメーション

 

次に、テキストにリンクがある場合に縦にくるっと一回転するアニメーション効果をつけるCSS方法です。

 

a,
 a span {
 display: inline-block;
 }
 a span {
 transition: .5s;
 }
 a:hover span {
 -webkit-transform: rotateX(360deg);
 transform: rotateX(360deg);
 }

以下がデモになります。

テキストにリンクがある場合にくるっと回るアニメーション

 

注意)

この一回転させる場合にはHTMLの記述も以下のようにしなければなりません。

この場合のHTMLの記述

<a href=”リンク先のURL”><span>リンクテキスト</span></a>

簡単に言うと、
リンクテキストをさらに<span></span>で囲って上げる必要があります。

 

 

次に、テキストにリンクがある場合に背景が左から現われるアニメーションつけるCSSの方法です。

 

a {
 padding: 0 .3em;
 text-decoration: underline;
 background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(255,187,255,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 }
 a:hover {
 background-position: -100% 0;
 text-decoration: none;
 color: #fff;
 }

 

以下がデモになります。

テキストにリンクがある場合に左から背景が現われるアニメーション

 

次に、テキストにリンクがある場合に下から背景が現われるアニメーションをつけるCSSの方法です。

 

a {
 padding: 0 .3em;
 background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(255,187,255,1) 50%);
 background-position: 0 0;
 background-size: auto 200%;
 transition: .3s;
 }
 a:hover {
 background-position: 0 100%;
 color: #fff;
 }

 

以下がデモになります。

テキストにリンクがある場合に背景が下から現われるアニメーション

次に、テキストにリンクがある場合にマウスオン時にふわっとアンダーラインが出てくるアニメーションをつけるCSSでの方法です。

 

a {
 position: relative;
 display: inline-block;
 text-decoration: none;
 transition: .3s;
 }

 a:hover {
 color: #ff80ff;
 }

 a::after {
 position: absolute;
 bottom: .3em;
 left: 0;
 content: '';
 width: 100%;
 height: 1px;
 background-color: #ff80ff;
 opacity: 0;
 transition: .3s;
 }

 a:hover::after {
 bottom: 0;
 opacity: 1;
 }

 

以下がデモになります。

テキストにリンクがある場合にアンダーラインがふわっと現われるアニメーション

 

次に、テキストにリンクがある場合にアンダーラインが左から現われるアニメーションをつけるCSSの方法です。

 

a {
 position: relative;
 display: inline-block;
 transition: .3s;
 text-decoration: none;
 }
 a:hover {
 color: #ff80ff;
 }

 a::after {
 position: absolute;
 bottom: 0;
 left: 0;
 content: '';
 width: 0;
 height: 1px;
 background-color: #ff80ff;
 transition: .3s;
 }
 a:hover::after {
 width: 100%;
 }

 

以下がデモになります。

テキストにリンクがある場合にアンダーラインが左から出てくるアニメーション

 

目次に戻る


最後に、テキストにリンクがある場合にマウスオン時に上下にラインが現われるアニメーション効果をつけるCSSの方法です。

 

a {
 position: relative;
 display: inline-block;
 text-decoration: none;
 transition: .3s;
 }

 a:hover {
 color: #ff80ff;
 }

 a::before,
 a::after {
 position: absolute;
 content: '';
 width: 0;
 height: 1px;
 background-color: #ff80ff;
 transition: .3s;
 }

 a::before {
 top: 0;
 left: 0;
 }

 a::after {
 bottom: 0;
 right: 0;
 }

 a:hover::before,
 a:hover::after {
 width: 100%;
 }

 

以下がデモになります。

テキストにリンクがある場合に上下にラインが表示されるアニメーション

 

以上テキストにリンクがある場合にアニメーション効果を簡単にCSSのみでつける方法11選でした。

 

スポンサーリンク

もう一度最後にです。

 

色などの部分は気に入ったものをご自分でカラーコードを変更して使用してみてください。

色のカラーコードを確認する場合に参考になるサイトはいろいろありますが、

今回は元祖20年前の1997年からカラーコードについてのサイトである以下のサイトを紹介させていただきます。

WEB色見本 原色大辞典 - HTMLカラーコード

是非、参考にして他のサイトとの差別化などしてみてください!!

 

追記)

すみません。デモのgifアニメーションが2個めから混ざってしまったものになっています…。


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

つぶつぶ入りのスクラブ洗顔料

伝えたいこと 備忘録 時事ネタ

マイクロプラスチック・マイクロビーズがつぶつぶ入り洗顔料や歯磨き粉に…。環境汚染も

画像出典元:5 Gyres 今年に入ってから、 インターネットニュースサイトやテレビのニュースなどでも報道されているマイクロプラスチック(もしくは、マイクロビーズ)というものがあります。 このマイクロ…

もっと読む

インフィード広告アドセンス

参議院議員選挙自民党広告

伝えたいこと 備忘録 時事ネタ

そうだ!選挙に行こう!!今回は18才以上の選挙権初の参院選です。

(アイキャッチ画像は今回の参議院議員選挙のインターネット広告のスクリーンショットです。) いよいよ、明日7月10日は参議院議員選挙の投票日です。 投票日でもあり開票日でもあります。(投開票日) (今更…

もっと読む

インフィード広告アドセンス

ギャル語アイキャッチ

SNS Twitter インターネット 伝えたいこと 備忘録 時事ネタ

ギャル語最近の動向とトップ10を紹介します。いくつわかりますか?

もうギャル語と言えば多くの人達は言わずと知れたものかと思います。 そんなギャル語が登場したのは、 1990年代頃からかと記憶しています。 言葉ってある意味生き物なので、 もっと前からあったかもしれませ…

もっと読む

インフィード広告アドセンス

WordPress日本語化

WordPress アップグレード 伝えたいこと 備忘録

WordPressを日本語化する方法と設定は実は1秒でできる…。

先日(昨日)WordPressのバージョンをやっとこさ4.5.2の最新版にしました。なぜか?それは一番はセキュリティ上の問題の解消ですが、他にもサイトのページ表示速度が、もしかしたら速くなるかもなんて…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください