
cssで画像をふわふわと点滅させてみた。
2020-03-12 | web
すっかり忘れておりましたが、こんなことをやっているんです。
どなたか存じませんが、アンケートに答えてくださった方が・・
うれしいです。ありがとうございました!
Googleフォームを利用しております。
「新しい回答が来たときに通知を受け取る」
これにチェックを入れてなかったために、投稿してくださったことに気が付いておりませんでした。
「ありがとう」も「うれしい」もお伝えできずにごめんなさい。
折角いただいた回答、目立たせたい。
そうだ。こういうときは「NEW!」のアイコンをつけよう。
注目です。
cssで画像をゆっくり点滅させたい。
昔はこんなのがあったのですね。テキスト点滅。
現在は非推奨です。
text-decoration: blink;
cssのanimation、keyframesで実装する
blinkのようなものをやりたい。しかも画像。
cssのanimationでやります。
.new-icon {
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}
@keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
Safariのためにベンダプレフィックス(-webkit)を付けてみました。
@-webkit-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink {
0% {opacity:0;}
100% {opacity:1;}
}
カメラが趣味の方も、そうでない方も。
行って良かった場所、行ってみたい場所、よかったらぜひぜひ教えてください。
お待ちしております。