Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[CSS]7/7授業 スマホ対応、アニメ効果

スマホ対応

yachin29.hatenablog.com

CSS3を利用したアニメ効果

  • 背景をグラデーションで色変化。
  • これに文字部分だけ透過させたpngを置くと、文字部分を色変化させたりできる。
  • background-colorをrgbaにして透過させると、色をかぶせることができる。
#container {
  width: 300px;
  height: 250px;
  -webkit-animation: bg-color 8s linear alternate infinite;
  animation: bg-color 8s linear alternate infinite;
}
@-webkit-keyframes bg-color{
  0%{ background-color: #0CC;}
  50%{ background-color: #3498db;}
  100%{ background-color:#C00;}
}
@keyframes bg-color{
  0%{ background-color: #0CC;}
  50%{ background-color: #3498db;}
  100%{ background-color:#C00;}
}

www.flapism.jp

リンク集

指定した技術のブラウザのサポート状況を調べられるサイト。
ちょっとした短い動画をダウンロードできるサイト。

videos.pexels.com