CSSでアニメーション
今回は、CSSのみで行うアニメーション効果をご紹介いたします
1.background-clip
背景画像を横に移動させる
テキスト上に画像を載せて画像のみ移動させるプロパティです。
background-clipを使って画像をテキストでくり抜き、アニメーションでbackground-positionの位置を右に移動させます。
SAMPLE TEXT
SAMPLE TEXT
.sample_text h1{ -webkit-animation: scrollmask 15s ease 2s infinite; -webkit-background-clip: text; background-image: url(背景画像.png); color: transparent; font-size: 100px; padding-top: 50px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; } @-webkit-keyframes scrollmask { 0% {background-position: 0 0;} 100% {background-position: 100% 0;} }
2.スターウォーズのようなアニメーション
遠近感を出して動かす
遠近感の指定をするperspectiveを使用。perspectiveの数値は小さいほど遠近感が強くなります。
Daiichi Star Wars. Daiichi Star Wars.
Daiichi Star Wars.
Daiichi Star Wars.Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.
Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars.Daiichi Star Wars. Daiichi Star Wars.
~入れたいワード~ ~入れたいワード~ ~入れたいワード~ ~入れたいワード~
.starwars-box { perspective: 200px; -webkit-perspective: 150px; height: 200px; background-color: #FFF; overflow: hidden; } .starwars-content { text-align: justify; padding: 5%; -webkit-animation: typetext linear 30s infinite; color: #666; letter-spacing: 5px; font-size: 30px; } @-webkit-keyframes typetext { 0% {transform: rotateX(60deg) translate(0,0);} 100% {transform: rotateX(60deg) translate(0,-500px);} }
以上、ホームページ制作の際は、試してみて下さい。
関連ニュース
・水滴の簡単なつくり方
・湯気の簡単な描き方
・アクア風ボタンの簡単な作り方
・ネオン文字の作り方
・シルバーブロック文字の作り方
・ロングシャドウの作り方