スポンサーリンク

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

投稿日:

本日の人気記事BEST10

所要時間目安: 約 5

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

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

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

リンクが付いたテキストや画像にマウスを乗せた時(マウスオーバー時)に、 いろんなアニメーショや何かしらの効果があると…。 なんだかカッコいいサイトになった気分になりますよね。

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

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



スポンサーリンク

目次

テキストにリンクがある場合にアニメーションをつける方法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個めから混ざってしまったものになっています…。

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

おすすめ記事一部広告

スポンサーリンク


  • この記事を書いた人
  • 最新記事

izu

はじめまして、izuと申します。医療ミスにより長胸神経麻痺になってしまい若干の障害がありブログをさせていただいています。旦那との共同運営になりつつありますがよろしくお願いいたします。

Follow Me !

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!




Copyright© WordPressデビュー津々浦々 , 2017 AllRights Reserved Powered by AFFINGER4.