suzuto今回は前回の記事で作成した透過画像を使ってキラキラバナーを表示させる方法を解説します！
こんにちは、suzutoです。
Webサイトに動きをつけるCSSアニメーション。難しそうに感じるけど覚えてしまうと実は簡単に実装できます。
今回はCSSで背景の色を変化させるアニメーションを使って、
こんな感じのCSSアニメーションを作ってみようと思います。
Webデザインとかバナーとかに使えますのでぜひ試してみてください。
【CSSアニメーション】背景透過画像を使ってオシャレなキラキラバナーを表示させてみよう！
まずは簡単なHTMLとCSSで背景を表示させるアニメーションを作ります。
今回は練習なので、HTMLと同じファイルにCSSも書いてしまいます。
フォルダ構成はこんな感じです！
「animetionフォルダ」の中に「imgフォルダ（画像用フォルダ）」と「imdex.html」を作ります。「imgフォルダ」野中に透過画像を入れておいてください。
ちなみに透過画像の作り方は前回の記事を参考にしてみてね。
透過画像のファイルの大きさは「幅（300px）×高さ（250px）」で作っていきます。
早速HTMLファイルを書いていきましょう！
まずはHTMLで箱を作ります。index.htmlを開いてboxというクラス名のdivを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSアニメーションの練習</title>
</head>
<body>
<div class="box"></div>
</body>
</html>divにCSSを当てていきます。まずは全体に薄い背景色をつけて、「.box」に幅と高さを指定します。幅と高さはバナー画像と同じに設定します。
見やすいように左右の余白を100pxだけつけておきます。
全体の背景色と「.box」の背景色はお好みでどうぞ。
body {
background-color: #cadefc;
}
.box {
margin: 100px;
width: 300px;
height: 250px;
background-color: #888;
}こんな感じです。
いまのところ全体のコードはこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSアニメーションの練習</title>
<style>
body {
background-color: #cadefc;
}
.box {
margin: 100px;
width: 300px;
height: 250px;
background-color: #888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>ブラウザで確認すると、
こんな感じです。「300×250」の箱ができております。
HTMLでイメージ画像を配置します。
boxクラスのdivにイメージタグをマークアップしてください。
<body>
<div class="box"><img src="img/背景透過.png" alt=""></div>
</body>先ほどCSSでboxクラスのdivにスタイルを当てた場所にぴったり入ります。
最後に画像の透過部分にアニメーションを付けます。今回は付けるアニメーションは背景色が変わるアニメーションをつけていきますね。
CSSでboxクラスの部分の仮背景色を削除して、アニメーションを定義します。
.box {
margin: 100px;
width: 300px;
height: 250px;
animation: bg-color 10s;
}上記のような感じで「animation: bg-color 10s;」と指定します。
「bg-color(任意のアニメーション名)」「アニメーションの時間(10sは10秒)」で指定していきます。アニメーション名は任意の名前で大丈夫です。（今回は背景色のアニメーションなので「bg-color」としています。）
次にキーフレームを設定していきます。.boxの指定の次に続けてコードを書きます。
.box {
margin: 100px;
width: 300px;
height: 250px;
animation: bg-color 10s;
}
@keyframes bg-color {
0% { background-color: #f00; }
25% { background-color: #0f0;}
50% { background-color: #00f;}
75% { background-color: #ff0;}
100% { background-color: #0ff;}
}キーフレームは「@keyframes bg-color(animationで任意に付けた名前)」で設定します。「%」でそれぞれ処理を書きます。「％」の意味は以下の通りです。
- 0% → アニメーション開始時の処理
- 50% → アニメーションの中間のCSS
- 100％ → アニメーションの終了時の処理
ちなみに「25%」と「75％」の時の処理も加えて、よりアニメーションがなめらかになるように設定してあります。
変化する背景色はお好みでどうぞ！
最後にCSSで.boxにループさせる処理を付け加えます。
.box {
margin: 100px;
width: 300px;
height: 250px;
animation: bg-color 10s infinite;
}「infinite」を追記しました。これで完成です！
ブラウザで確認すると以下のようになります。
最後に全体のコードはこんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSアニメーションの練習</title>
<style>
body {
background-color: #cadefc;
}
.box {
margin: 100px;
width: 300px;
height: 250px;
animation: bg-color 10s infinite;
}
@keyframes bg-color {
0% { background-color: #f00; }
25% { background-color: #0f0;}
50% { background-color: #00f;}
75% { background-color: #ff0;}
100% { background-color: #0ff;}
}
</style>
</head>
<body>
<div class="box"><img src="img/背景透過.png" alt=""></div>
</body>
</html>【CSSアニメーション】背景透過画像を使ってオシャレなキラキラバナーを表示させる方法のまとめ
今回は透過画像を使って背景色の色が変化するバナーを表示させました。
簡単なHTMLとCSSで実装できるので、Webサイトのロゴやバナーなどでぜひためしてみてください。
CSSアニメーションは難しそうですが、考え方は意外とシンプルです。いろいろ遊んでアニメーションをますたーしてみましょう。
ボクもいろいろためしていきます！
suzuto透過画像を作って、アニメーションでいろいろアレンジしてみよう！
