0926 [CSS3] CSS3でグラデーション変化するバナーを表示する
CSS3コードについて
まず文字部分を透過した画像を作成します。
HTMLにimg指定をして、今回はboxというID名を付けたdivで囲みました。
そこに対してスタイルシートで下記のように記述します。
#box{
margin: auto;
padding: 10px;
width: 450px;
height: 200px;
/* 角丸 : 指定する数字は、角丸の半径 */
border-radius: 10px;
/* アニメーション指定 */
animation: bg-color 5s infinite;
-webkit-animation: bg-color 5s infinite;
-moz-animation: bg-color 5s infinite;
}
@-webkit-keyframes bg-color{
0%{ background-color: #e74c3c; }
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: #e74c3c; }
20%{ background-color: #f1c40f; }
40%{ background-color: #1abc9c; }
60%{ background-color: #3498db; }
80%{ background-color: #9b59b6; }
100%{ background-color: #e74c3c; }
}
するとこんな感じで背景がカラフルに変化します。
ベンダープレフィックスについて
CSS3では各ブラウザに向けて表示に関する指定をする必要がある
ベンダープレフィックス
今回はCSS3初回の授業という事でIEやOperaの指定はしていません。
それぞれの％を変えたりカラーコードを変える事で様々なバリエーションができます。
