文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > CSSでズーム

CSSで背景画像をズームして切り替える

CSSで背景画像をズーム・遠近で表示後に画像を切り替えるサンプルを掲載しています。
当ページでは、背景画像の動き(遠近/近遠)やズームサイズ・表示切り替えの速度などを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろ背景画像の切り替えを試してみよう

表示時間と変化の大きさ
切り替え時間
ズームサイズ
背景画像の動き
背景が
切り替わる
使用したhtml
<div class="box">
  <div class="bgImg src1"></div>
  <div class="bgImg src2"></div>
  <div class="bgImg src3"></div>
  <div class="bgImg src4"></div>
  <div class="boxString">背景が<br>切り替わる</div>
</div>
生成したCSS
<style type="text/css">
/* --- 背景が上下左右に動くのBOX定義 ------------------------ */
.box {
  position   : relative;
  max-width  : 500px;                   /* 背景の大きさに変更 */
  height     : 200px;
  margin     : auto;
  background : #ffffff;
}
/* --- 背景が上下左右に動くの背景定義 ----------------------- */
.box::before {
  display    : block;
  content    : "";
  position   : absolute;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background-image : url(./image.png);  /* 使用する画像を指定 */
  animation  : bgAnime 15s linear infinite;
}
@keyframes bgAnime {
   0% { background-position: 0 0 }
                /* 使用する画像幅と画像高さのpxに変更ください */
 100% { background-position: 500px -666px }
}
/* --- 前面の文字定義(サンプルのため変更してください) ----- */
.boxString{
  position   : absolute;
  display    : inline-block;
  background : rgba(0, 127, 255, 0.7);
  top        : 50%;
  left       : 50%;
  padding    : 20px;
  color      : #fff;
  transform  : translate(-50%,-50%);
}
</style>
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン