Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

cssで画像をふわふわと点滅させてみた。

cssで画像をふわふわと点滅させてみた。

すっかり忘れておりましたが、こんなことをやっているんです。

 

次のカメラ散歩の参考に!「次はどこ行く?」

 

どなたか存じませんが、アンケートに答えてくださった方が・・

うれしいです。ありがとうございました!

 

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;}
}

 


 

カメラが趣味の方も、そうでない方も。

行って良かった場所、行ってみたい場所、よかったらぜひぜひ教えてください。

アンケートフォームはこちらです。

 

お待ちしております。

 

share on