CSSで背景画像をアニメーションさせる

CSS

CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CSSを使った背景アニメーションのやり方です。テキストに自分の好きな背景画像を用意して、テキストの位置はそのままで背景だけをアニメーションさせるやり方です。

[ads_center]

CSSの設定

背景画像を設定したら、それをテキストの形にクロップしてアニメーションを設定していきます。これだけでは動かないので@keyframesを使ってアニメーションの流れを指定することで、背景画像を動かすことが可能になります。

CSSだけで作ることができるので便利ですね。

HTML

<p>SAMPLE TEXT</p>

CSS

p {
	background: url("image.jpg");
	-webkit-background-clip: text;
	-webkit-background-size: cover;
	-webkit-text-fill-color: transparent;
	-webkit-animation: 10s infinite linear animate;
	font-size: 150px;
	font-weight: bold;
	text-align: center;
}

@-webkit-keyframes animate{
	0% {background-position: 0;}
	100% {background-position: -1000px 0;}
}

backgroudには各自お好きな画像を設定して下さい。

やり方自体はとても簡単に設定できるので、アニメーションを利用してちょっとユーザーの目を魅きたい時なんかに活用できそうですね。手軽にできる点が個人的にいいなぁと思ったポイントです。

Creating Simple Text Effects With CSS | Pencil Scoop | Web Design & Development

関連記事

  1. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  2. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  3. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  4. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  5. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  6. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP