動させることはできません少し工夫が必要になります元の画像を移動すれば反射画像も一緒についてきますが反射画像だけが移動するように見せたいので元の画像の上には黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

Size: px

Start display at page:

Download "動させることはできません少し工夫が必要になります元の画像を移動すれば反射画像も一緒についてきますが反射画像だけが移動するように見せたいので元の画像の上には黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属"

こうだいはかまや
5 years ago
Views:

1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 )

1 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています近い将来 webkit 系以外のブラウザでも Reflection が使えるようになるでしょうサンプルCSSのスクリプトには box-reflect と-webkit-box-reflect を指定してありますが現在のところ機能するのは-webkit-box-reflect の方だけですサンプル CSS1 上下左右の反射画像を移動させる (1) 注意 :Chrome と Safari だけの機能です (2015 年 12 月 5 日現在 ) 1 つの画像に反射画像は 1 方向にしか指定できませんまた -webkit-box-reflect プロパティはアニメーションできないので元の画像と反射画像の隙間の距離の値を増減して移 1

2 動させることはできません少し工夫が必要になります元の画像を移動すれば反射画像も一緒についてきますが反射画像だけが移動するように見せたいので元の画像の上には黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属性 wrap の div 要素の中に div 要素を5つ指定し 1 番目から4 番目の div 要素の中には画像 images/dsc00203s.jpg と span 要素を指定します 5 番目の div 要素の中には画像 images/dsc00203s.jpg とだけを指定します <!DOCTYPE html> <html> <head> <title>reflectanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reflectanime1.css"> </head> <body> <p> 写像をアニメーションで動かす (1)</p> <div id="stage"> <div id="wrap"> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <div> <img src="images/dsc00203s.jpg" alt="green road"> </body> </html> CSS の記述 (ReflectAnime1.css) #stage ステージのスタイルを指定します width: 600px; height: 500px; 背景に黒色を指定します overflow: hidden; を指定しておきます 2

3 #stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; 画像の位置の起点を指定します position は absolute 位置は top: 180px; left: 210px; (#stage ボックスの左上端を起点とした位置 ) で指定します #wrap { top: 180px; left: 210px; 画像と黒色のボックスを入れる div 要素の共通のスタイルを指定しますこの div 要素を移動させると反射画像も一緒について来ます #wrap > div { top: 0px; left: 0px; 1つ目の div 要素はアニメーション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref1anime に対応するタイムライン (@keyframes) を指定します top: -60px; で上方向へ 60px 移動させます #wrap > div:nth-child(1) { animation: ref1anime 5s ease-in-out 0s infinite alternate; -webkit-animation: ref1anime 5s ease-in-out 0s infinite ref1anime { from { to { top: ref1anime { from { to { top: -60px; 3

4 2つ目の div 要素はアニメーション名を ref2anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 2.5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref2anime に対応するタイムラインを指定します left: 60px; で右方向へ 60px 移動させます #wrap > div:nth-child(2) { animation: ref2anime 5s ease-in-out 2.5s infinite alternate; -webkit-animation: ref2anime 5s ease-in-out 2.5s infinite ref2anime { from { to { left: ref2anime { from { to { left: 60px; 3つ目の div 要素はアニメーション名を ref3anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref3anime に対応するタイムライン (@keyframes) を指定します top: 60px; で下方向へ 60px 移動させます #wrap > div:nth-child(3) { animation: ref3anime 5s ease-in-out 5s infinite alternate; -webkit-animation: ref3anime 5s ease-in-out 5s infinite ref3anime { from { to { top: ref3anime { from { to { top: 60px; 4 つ目の div 要素はアニメーション名を ref4anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 7.5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref4anime に対応するタイムライン (@keyframes) を指定します left: 4

5 -60px; で左方向へ 60px 移動させます #wrap > div:nth-child(4) { animation: ref4anime 5s ease-in-out 7.5s infinite alternate; -webkit-animation: ref4anime 5s ease-in-out 7.5s infinite ref4anime { from { to { left: ref4anime { from { to { left: -60px; 5 つ目の div 要素はアニメーションの指定はしません中心に表示される画像になります #wrap > div:nth-child(5) { div 要素に入れる画像の共通のプロパティと値を指定します width: 180px; height: 135px; で指定します border-radius: 20px; で 4 隅を丸くします #wrap > div img { top: 0px; left: 0px; width: 180px; height: 135px; border-radius: 20px; 1つ目の画像の反射画像を指定します上方向で元の画像と反射画像の隙間の距離が 2px の反射画像で円形グラデーションの中心が画像の 50% 150%( 左右中央で上辺から下方向へ高さの 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると見た目は上から下方向へ黒色が薄くなっていくグラデーションになります ) #wrap > div:nth-child(1) img { box-reflect: above 2px radial-gradient(circle at 50% 150%, transparent, transparent 60%, white); -webkit-box-reflect: above 2px -webkit-radial-gradient(50% 150%, circle, transparent, transparent 60%, white); 5

6 2つ目の画像の反射画像を指定します右方向で元の画像と反射画像の隙間の距離が 2px の反射画像で円形グラデーションの中心が画像の-50% 50%( 上下中央で左辺から左方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると見た目は右から左方向へ黒色が薄くなっていくグラデーションになります ) #wrap > div:nth-child(2) img { box-reflect: right 2px radial-gradient(circle at -50% 50%, transparent, transparent 60%, white); -webkit-box-reflect: right 2px -webkit-radial-gradient(-50% 50%, circle, transparent, transparent 60%, white); 3つ目の画像の反射画像を指定します下方向で元の画像と反射画像の隙間の距離が 2px の反射画像で円形グラデーションの中心が画像の 50% -50%( 左右中央で上辺から上方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると見た目は下から上方向へ黒色が薄くなっていくグラデーションになります ) #wrap > div:nth-child(3) img { box-reflect: below 2px radial-gradient(circle at 50% -50%, transparent, transparent 60%, white); -webkit-box-reflect: below 2px -webkit-radial-gradient(50% -50%, circle, transparent, transparent 60%, white); 4つ目の画像の反射画像を指定します左方向で元の画像と反射画像の隙間の距離が 2px の反射画像で円形グラデーションの中心が画像の 150% 50%( 上下中央で左辺から右方向へ幅の 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定します ( 反射画像になると見た目は左から右方向へ黒色が薄くなっていくグラデーションになります ) #wrap > div:nth-child(4) img { box-reflect: left 2px radial-gradient(circle at 150% 50%, transparent, transparent 60%, white); -webkit-box-reflect: left 2px -webkit-radial-gradient(150% 50%, circle, transparent, transparent 60%, white); 6

7 div 要素の1 番目から4 番目に入れた画像の上に覆い被せる span 要素の共通のプロパティと値を指定します width: 180px; height: 135px; で指定します border-radius: 20px; で4 隅を丸くします背景色を #stage の背景色 ( 黒色 ) に合わせて background-color: #000000; で指定します ( 反射画像だけが見えるように元の画像に黒色の span 要素を覆い被せて見えなくします ) #wrap > div span { top: 0px; left: 0px; width: 180px; height: 135px; border-radius: 20px; background-color: #000000; サンプル CSS2 上下左右の反射画像を移動させる (2) サンプルCSS1と同じようなアニメーションは -webkit-box-reflect プロパティを使用して反射画像を表示する方法でなくても作ることができますこのサンプルCSS2の方法は反射画像ではなく普通の画像を 180 度回転させて反射画像のように見せてその上にグラデーションを被せる方法ですが W3C 標準仕様のプロパティだけを使用するので Chrome Safari はもちろんのこと Firefox IE でも反射画像のアニメーションのように見せることができます ReflectAnime2 の説明 HTML の記述 (ReflectAnime2.html) 7

8 id 属性 wrap の div 要素の中に画像 images/dsc00203s.jpg を 5 つ指定し 1 番目から 4 番目の画像には後ろに span 要素を指定します <!DOCTYPE html> <html> <head> <title>reflectanime2</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reflectanime2.css"> </head> <body> <p> 写像をアニメーションで動かす (2)</p> <div id="stage"> <div id="wrap"> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <img src="images/dsc00203s.jpg" alt="green road"><span></span> <img src="images/dsc00203s.jpg" alt="green road"> </body> </html> CSS の記述 (ReflectAnime2.css) #stage ステージのスタイルを指定します width: 600px; height: 500px; 背景に黒色を指定します overflow: hidden; を指定しておきます #stage { width: 600px; height: 500px; background-color: #000000; position: relative; overflow: hidden; 画像の位置の起点を指定します position は absolute 位置は top: 180px; left: 210px; (#stage ボックスの左上端を起点とした位置 ) で指定します #wrap { top: 180px; left: 210px; サンプル CSS1 の ReflectAnime1.css と違う点は <img src="images/dsc00203s.jpg" 8

9 alt="green road"> の5 番目の画像を中心にして 1 番目から4 番目の画像を上下左右に反転させて反射画像のように見せるだけなので 1 番目から4 番目の反射画像には元の画像が必要ないというところです 1つ目の画像 #wrap img:nth-of-type(1) は上方の反射画像に相当します top: -137px; left: 0px; の位置 (#wrap を起点とした位置 ) で transform: rotatex(180deg); で X 軸の方向から見て 180 度回転 ( 反転 ) させますアニメーション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref1anime に対応するタイムライン (@keyframes) を指定します top: -137px; から top: -197px; で上方向へ 60px 移動させます #wrap img:nth-of-type(1) { top: -137px; left: 0px; transform: rotatex(180deg); -webkit-transform: rotatex(180deg); animation: ref1anime 5s ease-in-out 0s infinite alternate; -webkit-animation: ref1anime 5s ease-in-out 0s infinite ref1anime { from { to { top: ref1anime { from { to { top: -197px; 2つ目の画像 #wrap img:nth-of-type(2) は右方の反射画像に相当します top: 0px; left: 182px; の位置 (#wrap を起点とした位置 ) で transform: rotatey(180deg); で Y 軸の方向から見て 180 度回転 ( 反転 ) させますアニメーション名を ref2anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 2.5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref2anime に対応するタイムライン (@keyframes) を指定します left: 182px; から left: 242px; で右方向へ 60px 移動させます #wrap img:nth-of-type(2) { top: 0px; left: 182px; transform: rotatey(180deg); -webkit-transform: rotatey(180deg); animation: ref2anime 5s ease-in-out 2.5s infinite alternate; -webkit-animation: ref2anime 5s ease-in-out 2.5s infinite alternate; 9

10 @keyframes ref2anime { from { to { left: ref2anime { from { to { left: 242px; 3つ目の画像 #wrap img:nth-of-type(3) は上方の反射画像に相当します top: 137px; left: 0px; の位置 (#wrap を起点とした位置 ) で transform: rotatex(180deg); で X 軸の方向から見て 180 度回転 ( 反転 ) させますアニメーション名を ref3anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref3anime に対応するタイムライン (@keyframes) を指定します top: 137px; から top: 197px; で下方向へ 60px 移動させます #wrap img:nth-of-type(3) { top: 137px; left: 0px; transform: rotatex(180deg); -webkit-transform: rotatex(180deg); animation: ref3anime 5s ease-in-out 5s infinite alternate; -webkit-animation: ref3anime 5s ease-in-out 5s infinite ref3anime { from { to { top: ref3anime { from { to { top: 197px; 4 つ目の画像 #wrap img:nth-of-type(4) は右方の反射画像に相当します top: 0px; left: -182px; の位置 (#wrap を起点とした位置 ) で transform: rotatey(180deg); で Y 軸の方向から見て 180 度回転 ( 反転 ) させますアニメーション名を ref4anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 7.5s 繰り返しを infinite 実行方向は alternate で指定しますアニメーション名 ref4anime に対応するタイムライン (@keyframes) を指定します left: -182px; から left: -242px; で左方向へ 60px 移動させます 10

11 #wrap img:nth-of-type(4) { top: 0px; left: -182px; transform: rotatey(180deg); -webkit-transform: rotatey(180deg); animation: ref4anime 5s ease-in-out 7.5s infinite alternate; -webkit-animation: ref4anime 5s ease-in-out 7.5s infinite ref4anime { from { to { left: ref4anime { from { to { left: -242px; 5 つ目の画像 #wrap img:nth-of-type(5) は中心に表示される画像になります top: 0px; left: 0px; の位置 (#wrap を起点とした位置 ) に置きます #wrap > img:nth-of-type(5) { top: 0px; left: 0px; 反射画像としての画像に被せるグラデーションを描く span 要素の共通のプロパティと値を指定します width: 180px; height: 135px; で指定します border-radius: 20px; で 4 隅を丸くします #wrap span { width: 180px; height: 135px; border-radius: 20px; 1 つ目の画像に被せるグラデーションを指定します top: -137px; left: 0px; の位置 (#wrap を起点とした位置 ) で円形グラデーションの中心が画像の 50% -50%( 左右中央で上辺から上方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定しますアニメーションの指定は 1 つ目の画像 #wrap img:nth-of-type(1) と同じでアニメーション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します 11

12 #wrap span:nth-of-type(1) { top: -137px; left: 0px; background-image: radial-gradient(circle at 50% -50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(50% -50%, circle, black, black 60%, transparent); animation: ref1anime 5s ease-in-out 0s infinite alternate; -webkit-animation: ref1anime 5s ease-in-out 0s infinite alternate; 2つ目の画像に被せるグラデーションを指定します top: 0px; left: 182px; の位置 (#wrap を起点とした位置 ) で円形グラデーションの中心が画像の 150% 50%( 上下中央で左辺から右方向へ幅の 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定しますアニメーションの指定は2つ目の画像 #wrap img:nth-of-type(2) と同じでアニメーション名を ref2anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 2.5s 繰り返しを infinite 実行方向は alternate で指定します #wrap span:nth-of-type(2) { top: 0px; left: 182px; background-image: radial-gradient(circle at 150% 50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(150% 50%, circle, black, black 60%, transparent); animation: ref2anime 5s ease-in-out 2.5s infinite alternate; -webkit-animation: ref2anime 5s ease-in-out 2.5s infinite alternate; 3つ目の画像に被せるグラデーションを指定します top: 137px; left: 0px; の位置 (#wrap を起点とした位置 ) で円形グラデーションの中心が画像の 50% 150%( 左右中央で上辺から下方向へ高さの 1.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定しますアニメーションの指定は3つ目の画像 #wrap img:nth-of-type(3) と同じでアニメーション名を ref3anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 5s 繰り返しを infinite 実行方向は alternate で指定します #wrap span:nth-of-type(3) { top: 137px; left: 0px; background-image: radial-gradient(circle at 50% 150%, black, black 60%, transparent); background-image: -webkit-radial-gradient(50% 150%, circle, black, black 60%, transparent); animation: ref3anime 5s ease-in-out 5s infinite alternate; -webkit-animation: ref3anime 5s ease-in-out 5s infinite alternate; 12

13 4つ目の画像に被せるグラデーションを指定します top: 0px; left: -182px; の位置 (#wrap を起点とした位置 ) で円形グラデーションの中心が画像の-50% 50%( 上下中央で左辺から左方向へ幅の 0.5 倍 ) の位置から円形グラデーションのマスクが掛かるように指定しますアニメーションの指定は4つ目の画像 #wrap img:nth-of-type(4) と同じでアニメーション名を ref1anime 実行時間を 5s イージングを ease-in-out 開始待ち時間を 7.5s 繰り返しを infinite 実行方向は alternate で指定します #wrap span:nth-of-type(4) { top: 0px; left: -182px; background-image: radial-gradient(circle at -50% 50%, black, black 60%, transparent); background-image: -webkit-radial-gradient(-50% 50%, circle, black, black 60%, transparent); animation: ref4anime 5s ease-in-out 7.5s infinite alternate; -webkit-animation: ref4anime 5s ease-in-out 7.5s infinite alternate; 13

14 サンプル CSS3 -webkit-box-reflect を使わずにテキストの写像のように見せる技このサンプルCSS3もサンプルCSS2と同様にテキスト反射写像ではなく普通のテキストを 180 度回転させて反射写像のように見せてその上にグラデーションを被せる方法ですが W3C 標準仕様のプロパティだけを使用するので Chrome Safari はもちろんのこと Firefox IE でも反射写像のアニメーションのように見せることができます ReflectAnime5 の説明 HTML の記述 (ReflectAnime5.html) id 属性 stage の div 要素を作りその中に div 要素でボックスを記述します id 属性 ref-text の div 要素を記述し中に span 要素を3つ記述します 1つ目と2つ目の span 要素にはテキストで Reflection と記述します <!DOCTYPE html> <html> <head> <title>reflectanime5</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="reflectanime5.css"> </head> <body> <p> テキストの写像をアニメーションで動かす (5)</p> <div id="stage"> <div id="ref-text"> <span>reflection</span><span>reflection</span><span></span> </body> </html> 14

15 CSS の記述 (ReflectAnime5.css) #stage ステージのスタイルを指定します背景色を background-color: #000000; で黒色に指定します 3 番目の span 要素が #stage からはみ出すので overflow: hidden; を指定します #stage { width: 700px; height: 420px; background-color: #000000; position: relative; overflow: hidden; テキストと写像を描く起点となる #ref-text ボックスのスタイルを指定します position は absolute 位置は top: 250px; left: 420px;(#stage ボックスの左上端を起点とした位置 ) で指定します width と height は指定しないので大きさゼロのボックスになります /*********************************************************************/ /* ref-text については -webkit-box-reflect を使用していない ( 拡大縮小傾斜ができないため ) */ #ref-text { top: 250px; left: 420px; #ref-text > span:nth-child(1) 要素のスタイルを指定しますテキスト文字 Reflection のスタイルになります position は absolute 位置は top: 0px; left: 0px; (#ref-text ボックスの左上端を起点とした位置 ) で指定します width は 230px height は 50px で指定しますテキストのフォントなどの指定をしますアニメーション名を ref3anime1 実行時間を 8s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #ref-text > span:nth-child(1) { top: 0px; left: 0px; width: 230px; height: 50px; text-align: center; font: bold 48px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 66px; color: lightgray; 15

16 animation: ref3anime1 8s ease-in-out 0s infinite alternate; -webkit-animation: ref3anime1 8s ease-in-out 0s infinite alternate; #ref-text > span:nth-child(2) 要素のスタイルを指定します写像のテキスト文字 Reflection のスタイルになります position は absolute 位置は top: 50px; left: 0px; (#ref-text ボックスの左上端を起点とした位置 ) で指定します width は 230px height は 50px で指定しますテキストのフォントなどの指定をします line-height: 60px; にしているので注意してください transform: perspective(500px) rotatex(60deg) scale(1.1, -2.5); とし scale(1.1, -2.5) で横方向を 1.1 倍縦方向を-2.5 倍に拡大させテキスト文字を上下反転 ( 縦方向を-2.5 倍と負の数値にすることで上下反転します ) させます rotatex(60deg) で文字を傾け perspective(500px) で遠近感を出しますアニメーション名を ref3anime2 実行時間を 8s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #ref-text > span:nth-child(2) { top: 50px; left: 0px; width: 230px; height: 50px; text-align: center; font: bold 48px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 60px; color: lightgray; transform: perspective(500px) rotatex(60deg) scale(1.1, -2.5); -webkit-transform: perspective(500px) rotatex(60deg) scale(1.1, -2.5); animation: ref3anime2 8s ease-in-out 0s infinite alternate; -webkit-animation: ref3anime2 8s ease-in-out 0s infinite alternate; #ref-text > span:nth-child(3) 要素のスタイルを指定します写像のテキスト文字に重ねるグラデーションになります position は absolute 位置は top: 50px; left: 0px; (#ref-text ボックスの左上端を起点とした位置 ) で指定します width は 230px height は 50px で指定します背景色に最上部が透明色で下へ向かって徐々に黒くなるようにグラデーションの指定をします 16

17 transform: perspective(500px) rotatex (60deg) scale(1.1, -2.5); とし scale(1.1, -2.5) で横方向を 1.1 倍縦方向を-2.5 倍に拡大させグラデーションを上下反転 ( 縦方向を-2.5 倍と負の数値にすることで上下反転します ) させます rotatex(60deg) でグラデーションを傾け perspective (500px) で遠近感を出しますアニメーション名を ref3anime3 実行時間を 8s イージングを ease-in-out 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #ref-text > span:nth-child(3) { top: 50px; left: 0px; width: 230px; height: 50px; background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1)); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1)); transform: perspective(500px) rotatex(60deg) scale(1.1, -2.5); -webkit-transform: perspective(500px) rotatex(60deg) scale(1.1, -2.5); animation: ref3anime3 8s ease-in-out 0s infinite alternate; -webkit-animation: ref3anime3 8s ease-in-out 0s infinite alternate; アニメーション名 ref3anime1 に対応するタイムライン (@keyframes) を指定してテキスト文字 Reflection を移動させます from から to の間に top: 0px; left: 0px; から top: -200px; left: -350px; ref3anime1 { from { to { top: -200px; left: ref3anime1 { from { to { top: -200px; left: -350px; アニメーション名 ref3anime2 に対応するタイムライン (@keyframes) を指定して写像の 17

18 テキスト文字 Reflection を変化させます from から to の間に top: 50px; left: 0px; から top: 70px; left: -350px; へ移動させ opacity: 0.2; で半透明にして scale(1.5, -4.5); で拡大しテキスト文字の色を color: dimgray;( 暗い灰色 ) にして ref3anime2 { from { to { top: 70px; left: -350px; opacity: 0.2; transform: perspective(500px) rotatex(60deg) scale(1.5, -4.5); color: dimgray; text-shadow: 1px 1px 10px dimgray, -1px 1px 10px dimgray, 1px -1px 10px dimgray, -1px -1px 10px ref3anime2 { from { to { top: 70px; left: -350px; opacity: 0.2; -webkit-transform: perspective(500px) rotatex(60deg) scale(1.5, -4.5); color: dimgray; text-shadow: 1px 1px 10px dimgray, -1px 1px 10px dimgray, 1px -1px 10px dimgray, -1px -1px 10px dimgray; アニメーション名 ref3anime3 に対応するタイムライン (@keyframes) を指定してグラデーションを変化させます from から to の間に top: 50px; left: 0px; から top: 70px; left: -370px; へ移動させ top: width: 230px; から width: 270px; へ変化させ scale(1.5, -4.5); ref3anime3 { from { to { top: 70px; left: -370px; width: 270px; transform: perspective(500px) rotatex(60deg) scale(1.5, ref3anime3 { from { to { top: 70px; left: -370px; width: 270px; -webkit-transform: perspective(500px) rotatex(60deg) scale(1.5, -4.5); 18

1つ目は MASK という文字の下に楕円形のマスクイメージでその文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージでその文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています近い将来 webkit