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. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  2. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  3. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  4. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  5. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  6. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP