先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。
画像にリンクがある場合にCSSだけでゆっくりと透過させる方法
こちらの続編で忘れないうちに記事にして備忘録として残しておこうと思います。
車メンテナンス・カスタマイズ・点検・修理、WordPressカスタマイズ、PC設定、車、時事ネタ、情勢、日々の出来事など津々浦々に綴っていきます。
2025年7月14日 (月曜日)本日の人気記事トップ10
所要時間目安: 約 5 分
今日は2025年7月14日です。
この記事は2017年3月5日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年7月14日 (月曜日)↓における週間月間人気記事トップ3は?↓
計測データがありません。
カーメイトのエンジンスターターでエラー15表示と対処方法 25PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 14PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 14PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
カーメイトのエンジンスターターでエラー15表示と対処方法 25PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 14PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 14PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。
画像にリンクがある場合にCSSだけでゆっくりと透過させる方法
こちらの続編で忘れないうちに記事にして備忘録として残しておこうと思います。
アドセンス336pxPC閲覧記事下表示1つ目コード
a {
color: #808080;
text-decoration: underline;
-webkit-transition: .8s;
-moz-transition: .8s;
-o-transition: .8s;
-ms-transition: .8s;
transition: .8s;
}
a:hover {
color: #ffd700;
}
こちらのデモです。
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;
}
デモは以下になります。
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);
}
以下がデモになります。
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);
}
以下がデモになります。
a {
display: inline-block;
transition: .3s;
}
a:hover {
transform: rotate(5deg);
}
以下がデモになります。
a,
a span {
display: inline-block;
}
a span {
transition: .5s;
}
a:hover span {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
}
以下がデモになります。
注意)
この一回転させる場合にはHTMLの記述も以下のようにしなければなりません。
この場合のHTMLの記述
簡単に言うと、
リンクテキストをさらに<span></span>で囲って上げる必要があります。
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;
}
以下がデモになります。
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;
}
以下がデモになります。
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;
}
以下がデモになります。
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%;
}
以下がデモになります。
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年からカラーコードについてのサイトである以下のサイトを紹介させていただきます。
是非、参考にして他のサイトとの差別化などしてみてください!!
追記)
すみません。デモのgifアニメーションが2個めから混ざってしまったものになっています…。
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
公正取引委員会(公取委)が、Google(グーグル)を検索サービス(検索ポータルサイト。検索プラットフォーム)の独占禁止法疑いで審査へとのことのようです。(調査) ググるという言葉が出来たのが2000...
まぁ、誰もが思う。 自動販売機みたいにお金がちゃりんちゃりんって置いてあるだけで、収入得られないのかなぁ。 なんてことってあると思います。 家賃収入もそうなのではないでしょうか。 でも、...
えーっと、この度WordPressのバージョンを4.6.1にバージョンアップしてから管理画面にjetpack4.3.2のダッシュボードを表示した際に、ちょっとしたWarningメッセージが表示されるよ...
WordPressにおいてデフォルトだとミステリーパーソンになっていると思います。そこで、プラグインを使用しての自分のアバターを設定する方法もありますが、私はプラグインをあまり使用したくないのでfun...
Multiplex 広告
あなたが訪問してから
⏰ 0 秒経過 🎉ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ10
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
-WordPress, カスタマイズ, 伝えたいこと, 備忘録
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
The tracking opt-out feature requires cookies to be enabled.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyandTerms of Serviceapply.
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
新着コメント