WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

色が変わっていくバナー/三角形の色が変わる

f:id:mmmmofu:20160925174110j:plain

Photoshopでバナーを作り、文字部分(色を付けたい部分)を透明にし、
他を背景と同じ色(今回の場合白)にする。
作成したバナーをHTMLに貼り付け
CSS3のanimationでbackgroundを変化させていく

デモはこちら

http://efu.sakura.ne.jp/web/banner/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3でアニメーション</title>
<style>
html, body, div, p {
  margin: 0;
  padding: 0;
}
img {
  border: none;
  vertical-align: bottom;
}
#box {
  margin: 50px auto;
  width: 300px;
  height: 250px;
	background: pink;
  animation: bg-color 10s linear infinite;
  -webkit-animation: bg-color 10s linear infinite;
}
@-webkit-keyframes bg-color {
  0%{ background-color: #0cc; }
  20%{ background-color: #f1c40f; }
  40%{ background-color: #1abc9c; }
  60%{ background-color: #3498db; }
  80%{ background-color: #9b59b6; }
  100%{ background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
</style>
</head>
<body>
<div id="box">
<p><img src="banner.png"></p>
</div>
</body>
</html>

三角形の色が変わっていくアニメーション

デモはこちら
http://efu.sakura.ne.jp/web/triangle/

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>三角系の色が変化するアニメーション</title>
  <style>
    html, body, div {
      margin: 0;
      padding: 0;
      line-height: 1.0;
    }
    body {
      margin-bottom: 1000px;
    }
    .triangle_lt {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 200px 200px 0 0;
      border-color: #0cbfcc transparent transparent transparent;
      -webkit-animation: bg_color1 10s linear infinite;
      animation: bg_color1 10s linear infinite;
    }
    .triangle_rt {
      position: fixed;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 200px 200px 0;
      border-color: transparent #0cbfcc transparent transparent;
      -webkit-animation: bg_color2 10s linear infinite;
      animation: bg_color2 10s linear infinite;
    }
    @-webkit-keyframes bg_color1 {
      0%{ border-color: #0cc transparent transparent transparent; }
      20%{ border-color: #f1c40f transparent transparent transparent; }
      40%{ border-color: #1abc9c transparent transparent transparent; }
      60%{ border-color: #3498db transparent transparent transparent; }
      80%{ border-color: #9b59b6 transparent transparent transparent; }
      100%{ border-color: #e74c3c transparent transparent transparent; }
    }
    @keyframes bg_color1 {
      0% { border-color: #0CC transparent transparent transparent; }
      20% { border-color: #f1c40f transparent transparent transparent; }
      40% { border-color: #1abc9c transparent transparent transparent; }
      60% { border-color: #3498db transparent transparent transparent; }
      80% { border-color: #9b59b6 transparent transparent transparent; }
      100% { border-color: #e74c3c transparent transparent transparent; }
    }
    @-webkit-keyframes bg_color2 {
      0%{ border-color: transparent #0cc transparent transparent; }
      20%{ border-color: transparent #f1c40f transparent; }
      40%{ border-color: transparent #1abc9c transparent transparent; }
      60%{ border-color: transparent #3498db transparent transparent; }
      80%{ border-color: transparent #9b59b6 transparent transparent; }
      100%{ border-color: transparent #e74c3c transparent transparent; }
    }
    @keyframes bg_color2 {
      0%{ border-color: transparent #0cc transparent transparent; }
      20%{ border-color: transparent #f1c40f transparent; }
      40%{ border-color: transparent #1abc9c transparent transparent; }
      60%{ border-color: transparent #3498db transparent transparent; }
      80%{ border-color: transparent #9b59b6 transparent transparent; }
      100%{ border-color: transparent #e74c3c transparent transparent; }
    }
  </style>
</head>
<body>
  <div class="triangle_lt"></div>
  <div class="triangle_rt"></div>
</body>
</html>