• 検索結果がありません。

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

N/A
N/A
Info
ダウンロード
Protected

Academic year: 2021

シェア "( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ"

Copied!
32
0
0

読み込み中.... (全文を見る)

今ダウンロードする ( 32 ページ )

全文

(1)

© 2016 電脳 Papa 1

1330-2 Radial Gradation のアニメーション（２）

背景（background）を円形グラデーション（Radial Gradation）のアニメーションにして

みましょう。

radial-gradient と repeating-radial-gradient の仕様は、別本「Transition を使いこな

す編」の「1238-1 円形グラデーション Radial Gradation (radial-gradient)」を参照し

てください。

radial-gradient( )関数または repeating-radial-gradient( )関数は background-image プ

ロパティ（または background プロパティで一括指定した中の background-image）の値とし

て指定します。W3C 仕様では、background-image プロパティはアニメーションできないよ

うになっているので、transition プロパティや animation プロパティでアニメーションに

することができません。

（グラデーションのアニメーションは多用されそうですが、残念で

すが現在の仕様ではできません。将来、仕様に取り込まれるかもしれませんが。）そこで、

どうしてもグラデーションのアニメーションを作りたいので、別の方法であたかもアニメ

ーションのように見せることにします。

●テキストの背景を円形グラデーションにして変化させる（１）

（webkit 仕様） （W3C 仕様）

サンプルＣＳＳ１

(2)

© 2016 電脳 Papa 2

（注）Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）は、テキストの輪郭や

色を、-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color

のプロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以

外のブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけにな

ります。

背景の円形グラデーションをアニメーションのように見せる方法は、opacity プロパティを

利用する方法です。

【RadialGradAndTextAnime1 の説明】

〔HTML の記述 （RadialGradAndTextAnime1.html）

〕

id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや

画像を記述します。

id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述します。id 属性 text1 の

div 要素の中にテキスト文字を記述します。

〔CSS の記述（RadialGradAndTextAnime1.css）

〕

#stage ステージのスタイルを指定します。

#stage ステージは width: 550px; height: 550px;

を指定します。

#stage { width: 550px; height: 550px; position: relative; } <!DOCTYPE html> <html> <head> <title>RadialGradAndTextAnime1</title> <meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="RadialGradAndTextAnime1.css"> </head> <body> <p>■背景を円形グラデーションでアニメーションさせる。（１）</p> <div id="stage"> <div id="div1"> <span></span><span></span><span></span><span></span><span></span><span></span> </div> <div id="text1">ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</div> </div> </body> </html>

(3)

© 2016 電脳 Papa 3

#div1 ボックスを記述します。width は 550px、height は 550px にします。

#div1 ボックスの子要素として６つの span 要素を記述しますが、各 span 要素に共通のプロ

パティをまとめて指定します。

top は 0px、left は 0px で、width は 550px、height は 550px にします。グラデーションの

変化を opacity プロパティの値を変化させて行うので、値が０と１の変化の途中で#div1 ボ

ックスの黒い背景色が透けて見えて画像が暗くならないように background-color: white;

で指定します。position: absolute;で指定します。opacity を opacity: 0.0;で指定しま

す。

以降は、各 span 要素で異なるプロパティを指定します。

#div1 ボックスの子要素の１番目の span 要素を記述します。span 要素の background-image

プロパティを radial-gradient( )関数を使用して、farthest-corner at 50% 50%（webkit

系ブラウザは 50% 50%, farthest-corner）で span 要素の中心から４隅の角に向かって紫色

（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色

（#FF0000）に指定します。アニメーション名を grad1Anime、実行時間を 10s、イージング

を linear、開始待ち時間を 0s、繰り返しを infinite、実行方向は normal で指定します。

#div1 { top:0px; left: 0px; width: 550px; height: 550px; position: absolute; } #div1 > span:nth-child(1) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

animation: grad1Anime 10s linear 0s infinite normal;

-webkit-animation: grad1Anime 10s linear 0s infinite normal; } #div1 span { top: 0px; left: 0px; width: 550px; height: 550px; background-color: white; position: absolute; opacity: 0.0; }

(4)

© 2016 電脳 Papa 4

#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と

background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い

ます。

２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色

（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。

３番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして黄

色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑

色（#00FF00）に指定します。アニメーション名を grad3Anime と指定します。

４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑

色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水

色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。

#div1 > span:nth-child(2) { background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

animation: grad2Anime 10s linear 0s infinite normal;

-webkit-animation: grad2Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(3) {

background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

animation: grad3Anime 10s linear 0s infinite normal;

-webkit-animation: grad3Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(4) {

background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

animation: grad4Anime 10s linear 0s infinite normal;

-webkit-animation: grad4Anime 10s linear 0s infinite normal; }

(5)

© 2016 電脳 Papa 5

５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水

色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青

色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。

６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青

色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫

色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。

#text1 ボックスを記述します。top は 0px、left は 0px で、width は 550px、height は 520px

にします。テキスト文字を#div1 ボックスの中央に置きたいので、横方向は text-align:

center;で中央に指定し、縦方向は span 要素のパディングを padding-top: 30px;で指定し

ています。

（そのため、height は 30px ずつ減らして、#div1 ボックスの中央に収まるよう

にしています。

）-webkit-text-stroke-width: 3px;、-webkit-text-stroke

-color: white;、-webkit-text-fill-color: black;で文字の輪郭を描いています。

（これは Chrome と Safari だけの機能です。下の CSS には-webkit-の付いていない

text-stroke-width: 3px;、text-stroke-color: white;、text-fill-color: black;も指定

していますが、実際には機能しません。W3C 仕様にも取り込んでほしい機能です。

）

#div1 > span:nth-child(5) {

background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

animation: grad5Anime 10s linear 0s infinite normal;

-webkit-animation: grad5Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(6) {

background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

animation: grad6Anime 10s linear 0s infinite normal;

-webkit-animation: grad6Anime 10s linear 0s infinite normal; } #text1 { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているので、 ボックスも下方向に 30px はみ出す為、height を 30px 減らしている。 */

(6)

© 2016 電脳 Papa 6

アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を

指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分

割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に

grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう

にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目

の時間で opacity: 1.0;にしてグラデーションが見えるようにします。

grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。

grad1Anime は、

タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。

grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな

るようにします。これであたかもレインボーカラーが永久に繰り返すように見えます。

/* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } padding-top: 30px; text-align: center;

font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 3px; text-stroke-color: white; text-fill-color: black; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white; -webkit-text-fill-color: black; position: absolute; }

(7)

© 2016 電脳 Papa 7 /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; }

(8)

© 2016 電脳 Papa 8 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } /* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }

(9)

© 2016 電脳 Papa 9

●テキストの背景を円形グラデーションにして変化させる（２）

（webkit 仕様） （W3C 仕様）

（注）Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）は、テキストの輪郭や

色を、-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color

のプロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以

外のブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけにな

ります。

背景の円形グラデーションをアニメーションのように見せる方法は、opacity プロパティを

利用する方法です。

【RadialGradAndTextAnime3 の説明】

〔HTML の記述 （RadialGradAndTextAnime3.html）

〕

id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや

画像を記述します。

id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述します。id 属性 text1 の

div 要素の中にテキスト文字を記述します。

サンプルＣＳＳ２

<!DOCTYPE html> <html> <head> <title>RadialGradAndTextAnime3</title> <meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="RadialGradAndTextAnime3.css"> </head>

<body>

(10)

© 2016 電脳 Papa 10

〔CSS の記述（RadialGradAndTextAnime3.css）

〕

#stage ステージのスタイルを指定します。

#stage ステージは width: 550px; height: 550px;

を指定します。

#div1 ボックスを記述します。width は 550px、height は 550px にします。border-radius:

50%;と指定して円形にします。

#div1 ボックスの子要素の１番目の span 要素を記述します。top は 0px、left は 0px で、

width は 550px、height は 530px にします。border-radius: 50%;と指定して円形にします。

span 要 素 の background-image プ ロ パ テ ィ を radial-gradient( ) 関 数 を 使 用 し て 、

farthest-corner at 50% 50%（webkit 系ブラウザは 50% 50%, farthest-corner）で span

要素の中心から４隅の角に向かって紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、

緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）に指定します。opacity: 0.0;と指定

して、見えないようにしておきます。

アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

#stage { width: 550px; height: 550px; position: relative; } #div1 { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; position: absolute; } <div id="stage"> <div id="div1"> <span></span><span></span><span></span><span></span><span></span><span></span> </div> <div id="text1">ABC<br>DEFGHIJ<br>KLMNOPQ<br>RSTUVW<br>XYZ</div> </div> </body> </html>

(11)

© 2016 電脳 Papa 11

#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と

background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い

ます。

２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色

（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。

３番目の span 要素を記述します。グラデーションの色の順番はさらに１つ分ずらして黄色

（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色

（#00FF00）に指定します。アニメーション名を grad3Anime と指定します。

#div1 > span:nth-child(2) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

↓

animation: grad2Anime 10s linear 0s infinite normal;

-webkit-animation: grad2Anime 10s linear 0s infinite normal; } #div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: black; background-image: radial-gradient(farthest-side at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); background-image: -webkit-radial-gradient(50% 50%, farthest-side, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

position: absolute; opacity: 0.0;

animation: grad1Anime 10s linear 0s infinite normal;

-webkit-animation: grad1Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(3) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

(12)

© 2016 電脳 Papa 12

４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑

色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水

色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。

５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水

色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青

色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。

６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青

色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫

#div1 > span:nth-child(4) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

↓

animation: grad4Anime 10s linear 0s infinite normal;

-webkit-animation: grad4Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(5) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

↓

animation: grad5Anime 10s linear 0s infinite normal;

-webkit-animation: grad5Anime 10s linear 0s infinite normal; }

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

↓

animation: grad3Anime 10s linear 0s infinite normal;

-webkit-animation: grad3Anime 10s linear 0s infinite normal; }

(13)

© 2016 電脳 Papa 13

色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。

#text1 ボックスを記述します。top は 0px、left は 0px で、width は 550px、height は 520px

にします。テキスト文字を# text1 ボックスの中央に置きたいので、padding-top: 30px;

を指定しています。

（そのため、height は 30px 減らして、# text1 ボックスに収まるよう

にしています。

）-webkit-text-stroke-width: 3px;、-webkit-text-stroke-color: white;、

-webkit-text-fill-color: black;で文字の輪郭を描いています。

（これは Chrome と Safari だけの機能です。下の CSS には-webkit-の付いていない

text-stroke-width: 3px;、text-stroke-color: white;、text-fill-color: black;も指定

していますが、実際には機能しません。W3C 仕様にも取り込んでほしい機能です。

）

アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を

#div1 > span:nth-child(6) {

↓

background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

↓

animation: grad6Anime 10s linear 0s infinite normal;

-webkit-animation: grad6Anime 10s linear 0s infinite normal; } #text1 { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているので、 ボックスも下方向に 30px はみ出す為、height を 30px 減らしている。 */ padding-top: 30px; text-align: center;

font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 3px; text-stroke-color: white; text-fill-color: black; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: white; -webkit-text-fill-color: black; position: absolute; }

(14)

© 2016 電脳 Papa 14

指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分

割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に

grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう

にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目

の時間で opacity: 1.0;にしてグラデーションが見えるようにします。

grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。

grad1Anime は、

タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。

grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな

るようにします。これであたかもレインボーカラーが永久に繰り返すように見えます。

/* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } }

(15)

© 2016 電脳 Papa 15 /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; }

(16)

© 2016 電脳 Papa 16

●テキスト文字の中に背景の円形グラデーションを抜き出して変化させる（１）

注意：Chrome、Safari、Microsoft Edge だけの機能です（2016 年 4 月 24 日現在）

。

（webkit 仕様） （W3C 仕様）

サンプルＣＳＳ３

51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } /* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }

(17)

© 2016 電脳 Papa 17

Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）はテキストの輪郭や色を、

-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color のプ

ロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以外の

ブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけになりま

す。

また、webkit 系ブラウザは-webkit-text-fill-color に transparent（透明）を指定して、

-webkit-background-clip プロパティの値に text を指定すると、text 文字の形に合わせて

背景を抜き出すことができますが、webkit 系以外のブラウザは text の指定ができません。

※Microsoft Edge は webkit 系ブラウザではありませんが、-webkit-text-fill-color プロ

パティと-webkit-background-clip プロパティについては、ベンダープリフィックスが

-webkit-であるにも関わらず対応してくれているようです。ですから-webkit-text-fill-

color に transparent（透明）を指定して、-webkit-background-clip プロパティの値に text

を指定すると、text 文字の形に合わせて背景を抜き出すことができます（やるじゃないで

すか Microsoft Edge）

。

背景の線形グラデーションをアニメーションのように見せる方法は、opacity プロパティを

利用する方法です。

【RadialGradInTextAnime1 の説明】

〔HTML の記述 （RadialGradInTextAnime1.html）

〕

id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや

画像を記述します。

id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述し、それぞれの span 要素

は、中にテキスト文字を記述します。

<!DOCTYPE html> <html> <head> <title>RadialGradInTextAnime1</title> <meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="RadialGradInTextAnime1.css"> </head> <body> <p>■文字の内容を、円形グラデーションでアニメーションさせる。（１）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span>

(18)

© 2016 電脳 Papa 18

〔CSS の記述（RadialGradInTextAnime1.css）

〕

#stage ステージのスタイルを指定します。

#stage ステージは width: 450px; height: 550px;

を指定します。

#div1 ボックスを記述します。width は 550px、

height は 550px にします。

background-color:

black;を指定します。

#div1 ボックスの子要素の１番目の span 要素を記述します。top は 0px、left は 0px で、

width は 420px、height は 520px にします。テキスト文字を#div1 ボックスの中央に置きた

いので、span 要素のパディングを padding: 30px 0px 0px 30px;で指定しています。

（その

ため、width と height は 30px ずつ減らして、#div1 ボックスに収まるようにしています。

）

span 要素の background-image プロパティを repeating-linear-gradient( )関数を使用し

て上から下へ紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）

、赤色（#FF0000）に指定します。

-webkit-text-stroke-width: 0px;、-webkit-text-stroke-color: #000000;、-webkit-text

-fill-color: transparent;で文字を透明にして描き、-webkit-background-clip: text;を

指定して文字の部分に背景のグラデーションを抜き出して表示させ、#div1 ボックスに重ね

ます。

（これは Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）だけの機能で

す。下の CSS には text-stroke-width: 0px;、text-stroke-color: #000000;、text-fill

#stage { width: 450px; height: 550px; position: relative; } #div1 { top: 0px; left: 0px; width: 550px; height: 550px; background-color: black; position: absolute; } <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>

(19)

© 2016 電脳 Papa 19

-color: transparent;、background-clip: text;を指定していますが、実際には機能しま

せん。W3C 仕様にも取り込んでほしい機能です。

）

アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と

background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い

ます。

２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色

（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。

#div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているため、グラデーションも 30px 下にずれる。それを防ぐ為、height を 550px ではなく 520px で指定し、グラデー ションの中心を合わせている。 */ background-color: white; background-image: radial-gradient(farthest-corner at 50% 50%, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

padding-top: 30px; text-align: center;

font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 0px; text-stroke-color: #000000; text-fill-color: transparent; background-clip: text; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; position: absolute; opacity: 0.0;

animation: grad1Anime 10s linear 0s infinite normal;

-webkit-animation: grad1Anime 10s linear 0s infinite normal; }

(20)

© 2016 電脳 Papa 20

３番目の span 要素を記述します。グラデーションの色の順番はさらに１つ分ずらして黄色

（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色

（#00FF00）に指定します。アニメーション名を grad3Anime と指定します。

４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑

色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水

色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。

#div1 > span:nth-child(2) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

↓

animation: grad2Anime 10s linear 0s infinite normal;

-webkit-animation: grad2Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(4) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

↓

animation: grad4Anime 10s linear 0s infinite normal;

-webkit-animation: grad4Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(3) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

↓

animation: grad3Anime 10s linear 0s infinite normal;

-webkit-animation: grad3Anime 10s linear 0s infinite normal; }

(21)

© 2016 電脳 Papa 21

５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水

色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青

色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。

６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青

色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫

色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。

アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を

指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分

割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に

grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう

にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目

の時間で opacity: 1.0;にしてグラデーションが見えるようにします。

grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。

grad1Anime は、

タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。

grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな

るようにします。これでテキスト文字の中に、あたかもレインボーカラーが永久に繰り返

#div1 > span:nth-child(5) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

↓

animation: grad5Anime 10s linear 0s infinite normal;

-webkit-animation: grad5Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(6) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

↓

animation: grad6Anime 10s linear 0s infinite normal;

-webkit-animation: grad6Anime 10s linear 0s infinite normal; }

(22)

© 2016 電脳 Papa 22

すように見えます。

（注：タイムラインを７分割にしたり、opacity の値を変えるタイミングをいろいろ試して

みましたが、100%から 0%に戻るときにグラデーションが一瞬止まったりして、滑らかにグ

ラデーションが変化しなかったので、上で記述した方法が比較的良いようです。

）

/* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; }

(23)

© 2016 電脳 Papa 23 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }

(24)

© 2016 電脳 Papa 24

●テキスト文字の中に背景の円形グラデーションを抜き出して変化させる（２）

注意：Chrome、Safari、Microsoft Edge だけの機能です（2016 年 4 月 24 日現在）

。

（webkit 仕様） （W3C 仕様）

/* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }

サンプルＣＳＳ４

(25)

© 2016 電脳 Papa 25

Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）はテキストの輪郭や色を、

-webkit-text-stroke-width、-webkit-text-stroke-color、-webkit-text-fill-color のプ

ロパティで描くことができますが、W3C 仕様には同様の機能がないので、webkit 系以外の

ブラウザ（Firefox、IE など）はテキストの色を color プロパティで指定するだけになりま

す。

また、webkit 系ブラウザは-webkit-text-fill-color に transparent（透明）を指定して、

-webkit-background-clip プロパティの値に text を指定すると、text 文字の形に合わせて

背景を抜き出すことができますが、webkit 系以外のブラウザは text の指定ができません。

※Microsoft Edge は webkit 系ブラウザではありませんが、-webkit-text-fill-color プロ

パティと-webkit-background-clip プロパティについては、ベンダープリフィックスが

-webkit-であるにも関わらず対応してくれているようです。ですから-webkit-text-fill-

color に transparent（透明）を指定して、-webkit-background-clip プロパティの値に text

を指定すると、text 文字の形に合わせて背景を抜き出すことができます（やるじゃないで

すか Microsoft Edge）

。

背景の線形グラデーションをアニメーションのように見せる方法は、opacity プロパティを

利用する方法です。

【RadialGradInTextAnime4 の説明】

〔HTML の記述 （RadialGradInTextAnime4.html）

〕

id 属性 stage の div 要素（アニメーションが動くステージ）を作り、その中にボックスや

画像を記述します。

id 属性 div1 の div 要素の中に<span>タグで span 要素を６つ記述し、それぞれの span 要素

は、中にテキスト文字を記述します。

<!DOCTYPE html> <html> <head> <title>RadialGradInTextAnime4</title> <meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="RadialGradInTextAnime4.css"> </head> <body> <p>■文字の内容を、円形グラデーションでアニメーションさせる。（４）</p> <div id="stage"> <div id="div1"> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span>

(26)

© 2016 電脳 Papa 26

〔CSS の記述（RadialGradInTextAnime4.css）

〕

#stage ステージのスタイルを指定します。

#stage ステージは width: 550px; height: 550px;

を指定します。

#div1 ボックスを記述します。width は 550px、height は 550px にします。border-radius:

50%;と指定して円形にします。background-color: black;を指定します。

#div1 ボックスの子要素の１番目の span 要素を記述します。top は 0px、left は 0px で、

width は 550px、height は 530px にします。border-radius: 50%;と指定して円形にします。

テ キ ス ト 文 字 を #div1 ボ ッ ク ス の 中 央 に 置 き た い の で 、 span 要 素 の パ デ ィ ン グ を

padding-top: 30px;で指定しています。

（そのため、height を 30px 減らして、#div1 ボッ

クスの中央に収まるようにしています。

）

span 要素の background-image プロパティを repeating-linear-gradient( )関数を使用し

て上から下へ紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）

、赤色（#FF0000）に指定します。

-webkit-text-stroke-width: 0px;、-webkit-text-stroke-color: #000000;、-webkit-text

-fill-color: transparent;で文字を透明にして描き、-webkit-background-clip: text;を

指定して文字の部分に背景のグラデーションを抜き出して表示させ、#div1 ボックスに重ね

#stage { width: 550px; height: 550px; position: relative; } #div1 { top: 0px; left: 0px; width: 550px; height: 550px; border-radius: 50%; background-color: black; position: absolute; } <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> <span>ABC<br>DEFGHIJ<br>KLMNOP<br>QRSTUV<br>WXYZ</span> </div> </div> </body> </html>

(27)

© 2016 電脳 Papa 27

ます。

（これは Safari （webkit 系ブラウザ）と Chrome（webkit にも対応）だけの機能で

す。下の CSS には text-stroke-width: 0px;、text-stroke-color: #000000;、text-fill

-color: transparent;、background-clip: text;を指定していますが、実際には機能しま

せん。W3C 仕様にも取り込んでほしい機能です。

）

アニメーション名を grad1Anime、実行時間を 10s、イージングを linear、開始待ち時間を

0s、繰り返しを infinite、実行方向は normal で指定します。

#div1 ボックスの子要素の２番目から６番目の span 要素は、１番目の span 要素と

background-image プロパティのグラデーションの色の順番とアニメーション名だけが違い

ます。

２番目の span 要素を記述します。グラデーションの色の順番は、１つ分ずらして赤色

（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色

（#FFFF00）に指定します。アニメーション名を grad2Anime と指定します。

#div1 > span:nth-child(1) { top: 0px; left: 0px; width: 550px; height: 520px; /* TEXT を中央に配置するため padding-top を 30px に指定しているため、 グラデーション 30px 下にずれる。それを防ぐ為、height を 550px ではなく 520px で指定し、グラデーションの中心を合わせている。 */ border-radius: 50%; background-color: white;

background-image: linear-gradient(to bottom, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000);

background-image: -webkit-linear-gradient(top, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000); padding-top: 30px;

text-align: center;

font: bold 96px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; color: black; text-stroke-width: 0px; text-stroke-color: #000000; text-fill-color: transparent; background-clip: text; -webkit-text-stroke-width: 0px; -webkit-text-stroke-color: #000000; -webkit-text-fill-color: transparent; -webkit-background-clip: text; position: absolute; opacity: 0.0;

animation: grad1Anime 10s linear 0s infinite normal;

-webkit-animation: grad1Anime 10s linear 0s infinite normal; }

(28)

© 2016 電脳 Papa 28

３番目の span 要素を記述します。グラデーションの色の順番はさらに１つ分ずらして黄色

（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水色（#00FFFF）、緑色

（#00FF00）に指定します。アニメーション名を grad3Anime と指定します。

４番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして緑

色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青色（#0000FF）、水

色（#00FFFF）に指定します。アニメーション名を grad4Anime と指定します。

#div1 > span:nth-child(2) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00, #FFFF00);

↓

animation: grad2Anime 10s linear 0s infinite normal;

-webkit-animation: grad2Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(3) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF, #00FF00);

↓

animation: grad3Anime 10s linear 0s infinite normal;

-webkit-animation: grad3Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(4) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF, #00FFFF);

↓

animation: grad4Anime 10s linear 0s infinite normal;

-webkit-animation: grad4Anime 10s linear 0s infinite normal; }

(29)

© 2016 電脳 Papa 29

５番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして水

色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫色（#FF00FF）、青

色（#0000FF）に指定します。アニメーション名を grad5Anime と指定します。

６番目の span 要素を記述します。グラデーションの色の順番は、さらに１つ分ずらして青

色（#0000FF）、水色（#00FFFF）、緑色（#00FF00）、黄色（#FFFF00）、赤色（#FF0000）、紫

色（#FF00FF）に指定します。アニメーション名を grad6Anime と指定します。

アニメーション名 grad1Anime から grad6Anime に対応するタイムライン（@keyframes）を

指定します。タイムラインを６分割（グラデーションの span の数）し、grad1Anime は６分

割の１番目の時間で opacity: 1.0;にしてグラデーションが見えるようにします。次に

grad2Anime は６分割の２番目の時間で opacity: 1.0;にしてグラデーションが見えるよう

にします。同じように grad3Anime から grad6Anime も、６分割の３番目の時間から６番目

の時間で opacity: 1.0;にしてグラデーションが見えるようにします。

grad1Anime と grad6Anime は他タイムラインと少し違うところがあります。

grad1Anime は、

タイムラインの６番目の時間にも opacity: 1.0;にして、徐々に見えるようにします。

grad6Anime は、タイムラインの６番目の時間を opacity: 0.0;にして、徐々に見えなくな

#div1 > span:nth-child(5) { ↓ background-image: radial-gradient(farthest-corner at 50% 50%, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF, #0000FF);

↓

animation: grad5Anime 10s linear 0s infinite normal;

-webkit-animation: grad5Anime 10s linear 0s infinite normal; }

#div1 > span:nth-child(6) { ↓

background-image: radial-gradient(farthest-corner at 50% 50%, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

background-image: -webkit-radial-gradient(50% 50%, farthest-corner, #0000FF, #00FFFF, #00FF00, #FFFF00, #FF0000, #FF00FF);

↓

animation: grad6Anime 10s linear 0s infinite normal;

-webkit-animation: grad6Anime 10s linear 0s infinite normal; }

(30)

© 2016 電脳 Papa 30

るようにします。これでテキスト文字の中に、あたかもレインボーカラーが永久に繰り返

すように見えます。

/* grad1Anime ************************************************************/ @keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } @-webkit-keyframes grad1Anime { from { opacity: 1.0; } 17% { opacity: 1.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 1.0; } } /* grad2Anime ************************************************************/ @keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad2Anime { from { opacity: 0.0; } 17% { opacity: 1.0; } 34% { opacity: 1.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad3Anime ************************************************************/ @keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } }

(31)

© 2016 電脳 Papa 31 @-webkit-keyframes grad3Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 1.0; } 51% { opacity: 1.0; } 68% { opacity: 0.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad4Anime ************************************************************/ @keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } @-webkit-keyframes grad4Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 1.0; } 68% { opacity: 1.0; } 84% { opacity: 0.0; } to { opacity: 0.0; } } /* grad5Anime ************************************************************/ @keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad5Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 1.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } /* grad6Anime ************************************************************/ @keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; }

(32)

© 2016 電脳 Papa 32 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } } @-webkit-keyframes grad6Anime { from { opacity: 0.0; } 17% { opacity: 0.0; } 34% { opacity: 0.0; } 51% { opacity: 0.0; } 68% { opacity: 0.0; } 84% { opacity: 1.0; } to { opacity: 0.0; } }

参照

今ダウンロードする ( PDF - 32 ページ - 1.60 MB )

関連したドキュメント

鉄道開業150年記念 JR東日本パス ～パス（本券）の買い方、指定席の申込方～

また、JR東日本パス (本券) を駅の指定席券売機に

Ⅱ . 原産地基準について

方式で 45 ～ 55 ％、積上げ方式で 35 ～ 45% 又は純費用方式で 35 ～ 45 ％）の選択制 （※一部例外を除く）

輸出者

DECLARATION BY THE EXPORTER I, the undersigned, declare that the goods described above meet the conditions required for the issue of this certificate. (Note1) If goods are not

西ウイグル時代のウイグル文供出命令文書をめぐって

Matsui 2006, Text D）が Ch/U 7214

1Agreement between Japan and the Kingdom of Thailand for an Economic Partnership

If a new certificate of origin was issued in accordance with Rules 3(e) of the operational procedures referred to Chapter 2 (Trade in Goods) and Chapter 3 (Rules of

Agreement between the Government of Japan and the Government of Malaysia for an Economic Partnership Operational Procedures referred to in Chapter 3 (Rules of Origin)

With respect to each good of Chapter 50 through 63 of the Harmonized System, in the case where a material of the other Country or a third State which is a member country of the

Errata in the Sanskrit text of the Tantrav

[r]

IS SU E D RE T RO SP EC TI V EL

[r]