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

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

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

Academic year: 2021

シェア "ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個"

Copied!
14
0
0

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

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

全文

(1)

© 2016 電脳 Papa 1

1238-2 円形グラデーションのトランジション

〔ラディアルグラデーションのトランジション〕

W3C 仕様では、background-image プロパティは transition プロパティでのトランジション

や後で「アニメーション編」に出てくる animation プロパティでのアニメーションができ

ないようになっています。

ラディアルグラデーションの radial-gradient( )関数と repeating-radial-gradient( )関

数 は background-image プ ロ パテ ィ （ま たは background プ ロ パテ ィ で一 括 指定 した

background-image）の値として指定するので、トランジションやアニメーションにするこ

とはできません。

そこで、ここでは別の方法でトランジションのように見せることにしました。

“Hover”ボタンの上をマウスポインター（カーソル）で hover すると、グラデーションの

画像が変化します。

【RadialGradTransition の説明】

〔HTML の記述 （RadialGradTransition.html）

〕

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

画像を記述します。

id 属性 button の div 要素を作ります。これがボタンになります。font28GothicB クラスで

フォントを指定し、

“Hover”を記述します。

id 属性 div1 の div 要素から id 属性 div8 の div 要素の中に<span>タグで span 要素を次の

(2)

© 2016 電脳 Papa 2

ように記述をします。

div1 要素 ・・・ span 要素２個 div2 要素 ・・・ span 要素１個

div3 要素 ・・・ span 要素４個 div4 要素 ・・・ span 要素２個

div5 要素 ・・・ span 要素１個 div6 要素 ・・・ span 要素２個

div7 要素 ・・・ span 要素２個 div8 要素 ・・・ span 要素２個

〔CSS の記述（RadialGradTransition.css）

〕

先ず、トランジションが動く#stage の記述をします。

ボタンとなる#button ボックスを記述します。position は absolute にして、位置は top

10px、 left 247px で指定します。角丸矩形のボタンにしたいので、border-radius プロパ

ティでボックスの４隅の角丸の半径を 10px で指定します。

#stage { width: 600px; height: 570px; border: solid 1px #000000; background-color: black; position: relative; } <!DOCTYPE html> <html> <head> <title>RadialGradTransition</title> <meta charset="UTF-8">

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

<body>

<p>■円形グラデーションを動かす。</p> <div id="stage">

<div id="button"><font class="font28GothicB">Hover</font> <div id="div1"><span></span><span></span></div> <div id="div2"><span></span></div> <div id="div3"><span></span><span></span><span></span><span></span></div> <div id="div4"><span></span><span></span></div> <div id="div5"><span></span></div> <div id="div6"><span></span><span></span></div> <div id="div7"><span></span><span></span></div> <div id="div8"><span></span><span></span></div> </div> </div> </body> </html>

(3)

© 2016 電脳 Papa 3

# div1 ボックスを記述します。position は absolute にして、

位置は top 60px と left –220px

（#button ボックスの左上端を基準とした位置）で指定します。

#div1 ボックスには子要素として span 要素を２つ記述します。１つ目の span 要素と２つ目

の span 要素は異なる色でグラデーションを描いておき、２つのグラデーション画像を重ね

ます。１つ目の span 要素は opacity プロパティを 1.0 で指定し、２つ目の span 要素は

opacity を 0.0 で指定して、２つ目の span 要素は見えないようにしておきます。

#button ボックス（ボタン）を hover した時の変化として、この重ねた画像を opacity プロ

パティの値を変えることで透明度を変えると、あたかもグラデーションの色が変化するよ

うに見えます。

/***************************************************************************** * 四角形 円形グラデーション１ ******************************************************************************/ #div1 { top: 60px; left: -220px; width: 150px; height: 150px; position: absolute; } #button { top: 10px; left: 247px; width: 100px; height: 40px; border: solid 3px #666666; border-radius: 10px; text-align: center; color: #666666; line-height: 45px; cursor: default; position: absolute; } #button:hover { background-color: #555555; color: #000000; } .font28GothicB {

font: bold 28px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro", Verdana; }

(4)

© 2016 電脳 Papa 4

# div2 ボックスを記述します。position は absolute にして、位置は top 60px と left –30px

（#button ボックスの左上端を基準とした位置）で指定します。

#div2 ボックスには子要素として span 要素を１つ記述し、span 要素を拡大してあたかもグ

ラデーションが大きく広がるように見せます。

#div1 > span:nth-child(1) { top: 0px; left: 0px; width: 150px; height: 150px; border: solid 2px #FFFFFF; border-radius: 20px;

background: radial-gradient(red, yellow);

background: -webkit-radial-gradient(red, yellow); opacity: 1.0; position: absolute; transition: 2s linear; -webkit-transition: 2s linear; } #div1 > span:nth-child(2) { top: 0px; left: 0px; width: 150px; height: 150px; border: solid 2px #FFFFFF; border-radius: 20px;

background: radial-gradient(yellow, red);

background: -webkit-radial-gradient(yellow, red); opacity: 0.0; position: absolute; transition: 2s linear; -webkit-transition: 2s linear; }

#button:hover div#div1 > span:nth-child(1) { opacity: 0.0;

}

#button:hover div#div1 > span:nth-child(2) { opacity: 1.0;

(5)

© 2016 電脳 Papa 5

# div3 ボックスを記述します。position は absolute にして、位置は top 60px と left 155px

（#button ボックスの左上端を基準とした位置）で指定します。

#div3 ボックスには子要素として span 要素を４つ記述しますが、最初の２つの span 要素は

#div1 ボックスと同じようにグラデーションを変化させるためのもので、後の２つの span

要素は中央のクロスした太線を描くためのものです。#div3 ボックスを回転させて、グラデ

ーション画像を回転させます。

/***************************************************************************** * 四角形 円形グラデーション２ ******************************************************************************/ #div2 { top: 60px; left: -30px; width: 150px; height: 150px; border: solid 2px #FFFFFF; position: absolute; overflow: hidden; } #div2 span { top: 0px; left: 0px; width: 150px; height: 150px; background: radial-gradient(circle at 40% 50%, #0066FF 3%, #33FF33 25%); background: -webkit-radial-gradient(40% 50%, circle, #0066FF 3%, #33FF33 25%); position: absolute;

transition: 2s linear;

-webkit-transition: 2s linear; }

#button:hover div#div2 span { transform: scale(4.0, 4.0);

-webkit-transform: scale(4.0, 4.0); }

(6)

© 2016 電脳 Papa 6 /***************************************************************************** * 丸形 円形グラデーション３ ******************************************************************************/ #div3 { top: 60px; left: 155px; width: 160px; height: 160px; border: solid 2px #666666; background-color: #FFFFFF; border-radius: 82px; position: absolute; transition: 2s linear; -webkit-transition: 2s linear; } #div3 > span:nth-child(1) { top: 0px; left: 0px; width: 160px; height: 160px; border-radius: 80px; position: absolute; opacity: 1.0;

background-image: radial-gradient(at bottom, #FFFFFF, #FF0000 80%), radial-gradient(at top, #FFFFFF, #0000FF 80%); background-image: -webkit-radial-gradient(bottom, #FFFFFF, #FF0000 80%), -webkit-radial-gradient(top, #FFFFFF, #0000FF 80%); background-position: 0px 0px, 0px 80px; background-size: 160px 80px; background-clip: border-box; background-repeat: no-repeat; transition: 2s linear; -webkit-transition: 2s linear; } #div3 > span:nth-child(2) { top: 0px; left: 0px; width: 160px; height: 160px; border-radius: 80px; position: absolute; opacity: 0.0;

background-image: radial-gradient(at bottom, #FFFFFF, #006400 80%), radial-gradient(at top, #FFFFFF, #FF1493 80%); background-image: -webkit-radial-gradient(bottom, #FFFFFF, #006400 80%), -webkit-radial-gradient(top, #FFFFFF, #FF1493 80%); background-position: 0px 0px, 0px 80px; background-size: 160px 80px; background-clip: border-box; background-repeat: no-repeat; transition: 2s linear; -webkit-transition: 2s linear; }

(7)

© 2016 電脳 Papa 7

# div4 ボックスを記述します。position は absolute にして、

位置は top 240px と left –220px

（#button ボックスの左上端を基準とした位置）で指定します。width は 250px、height は

100px にします。

#div4 ボックスには子要素として span 要素を２つ記述し、#div1 ボックスと同じ方法であ

たかもグラデーションの色が変化するように見せます。

#div3 > span:nth-child(3) { top: 20px; left: 70px; width: 20px; height: 120px; background: radial-gradient(circle, #FFFFFF, #000000 150%); background: -webkit-radial-gradient(circle, #FFFFFF, #000000 150%); position: absolute; transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); } #div3 > span:nth-child(4) { top: 70px; left: 20px; width: 120px; height: 20px; background: radial-gradient(circle, #FFFFFF, #000000 150%); background: -webkit-radial-gradient(circle, #FFFFFF, #000000 150%); position: absolute; transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); } #button:hover div#div3 { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); }

#button:hover div#div3 > span:nth-child(1) { opacity: 0.0;

}

#button:hover div#div3 > span:nth-child(2) { opacity: 1.0;

(8)

© 2016 電脳 Papa 8

# div5 ボックスを記述します。position は absolute にして、位置は top 240px と left 60px

（#button ボックスの左上端を基準とした位置）で指定します。width は 250px、height は

100px にします。

#div5 ボックスには子要素として span 要素を１つ記述します。top は 0px、left は 0px で、

width は 500px、height は 100px にします。span 要素の background プロパティを

radial-gradient( )関数を使用してレインボーカラーのグラデーションで指定します。

/***************************************************************************** * 角丸四角形 円形グラデーション４（中心移動） ******************************************************************************/ #div4 { top: 240px; left: -220px; width: 250px; height: 100px; position: absolute; } #div4 > span:nth-child(1) { top: 0px; left: 0px; width: 250px; height: 100px; border: solid 2px #FFFFFF; border-radius: 20px;

background: radial-gradient(circle at 20% 50%, #2E3B57 5%, #00BFFF 70%); background: -webkit-radial-gradient(20% 50%, circle, #2E3B57 5%, #00BFFF 70%); opacity: 1.0; position: absolute; transition: 2s linear; -webkit-transition: 2s linear; } #div4 > span:nth-child(2) { top: 0px; left: 0px; width: 250px; height: 100px; border: solid 2px #FFFFFF; border-radius: 20px; background: radial-gradient(circle at 80% 50%, #4B0082 5%, #FF69B4 70%); background: -webkit-radial-gradient(80% 50%, circle, #4B0082 5%, #FF69B4 70%); opacity: 0.0; position: absolute; transition: 2s linear; -webkit-transition: 2s linear; }

#button:hover div#div4 > span:nth-child(1) { opacity: 0.0;

}

#button:hover div#div4 > span:nth-child(2) { opacity: 1.0;

(9)

© 2016 電脳 Papa 9

#button ボックス（ボタン）を hover した時の変化として、この span 要素を left: 0px;か

ら left: -250px;に移動します。#div5 ボックスには overflow プロパティの値を hidden で

指定してあるので、あたかも#div5 ボックスの中をグラデーションの色が動くように見えま

す。

/***************************************************************************** * 円形グラデーション５（全体移動） ******************************************************************************/ #div5 { top: 240px; left: 60px; width: 250px; height: 100px; border: solid 2px #FFFFFF; position: absolute; overflow: hidden; } #div5 span { top: 0px; left: 0px; width: 500px; height: 100px; background: radial-gradient(circle at 50% 50%, #00F, #0FF, #0F0, #FF0, #F00); background: -webkit-radial-gradient(50% 50%, circle, #00F, #0FF, #0F0, #FF0, #F00); position: absolute;

transition: 2s linear 0s;

-webkit-transition: 2s linear 0s; }

#button:hover div#div5 span { left: -250px;

(10)

© 2016 電脳 Papa 10

# div6 ボックスを記述します。position は absolute にして、

位置は top 370px と left -220px

（#button ボックスの左上端を基準とした位置）で指定します。width は 150px、height は

150px にします。

#div6 ボックスには子要素として span 要素を２つ記述します。top は-50px、left は-175px

で、width は 500px、height は 250px にして、反時計回りに 45 度回転させます。ここまで

は span(1)要素も span(2)要素も同じ指定です。span(1)要素の background プロパティを

repeating-radial-gradient( )関数を使用してレッド、ブルー、イエローのグラデーショ

ンで指定します。span(2)要素はシアン、オレンジ、グリーンで指定します。

#button ボックス（ボタン）を hover した時の変化として、span(1)要素と span(2)要素を

時計回りに 405 度回転させると同時に、span(1)要素の opacity を 1 から 0 へ、span(2)要

素の opacity を 0 から 1 に変化させます。#div6 ボックスには overflow プロパティの値を

hidden で指定してあるので、あたかも#div6 ボックスの中で、グラデーションが回転しな

がら色が変化するように見えます。

≪グラデーションが回転して色が変化する仕組み≫

span(1)とspan(2)を重ねて表示し回転させると同時に、span(1)とspan(2)のopacityを

変更し、span(1)が見える状態からspan(2)が見える状態に変化させる。

#div6ボックス（見える範囲）

span(1)見える

span(2)見えない

span(1)見えない

span(2)見える

(11)

© 2016 電脳 Papa 11 /***************************************************************************** * 四角形 円形グラデーション６ ******************************************************************************/ #div6 { top: 370px; left: -220px; width: 150px; height: 150px; border: solid 2px #FFFFFF; position: absolute; overflow: hidden; } #div6 > span:nth-child(1) { top: -50px; left: -175px; width: 500px; height: 250px;

background: repeating-radial-gradient( red, blue 10px, yellow 20px, red 30px); background: -webkit-repeating-radial-gradient( red, blue 10px, yellow 20px, red 30px); position: absolute; opacity: 1.0; transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transition: 2s linear 0s; -webkit-transition: 2s ease-in-out 0s; } #div6 > span:nth-child(2) { top: -50px; left: -175px; width: 500px; height: 250px;

background: repeating-radial-gradient( cyan, orange 10px, green 20px, cyan 30px); background: -webkit-repeating-radial-gradient( cyan, orange 10px, green 20px,

cyan 30px); position: absolute; opacity: 0.0; transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transition: 2s linear 0s; -webkit-transition: 2s ease-in-out 0s; }

#button:hover div#div6 > span:nth-child(1) { transform: rotateZ(405deg);

-webkit-transform: rotateZ(405deg); opacity: 0.0;

}

#button:hover div#div6 > span:nth-child(2) { transform: rotateZ(405deg);

-webkit-transform: rotateZ(405deg); opacity: 1.0;

(12)

© 2016 電脳 Papa 12

# div7 ボックスを記述します。position は absolute にして、

位置は top 370px と left –30px

（#button ボックスの左上端を基準とした位置）で指定します。width は 160px、height は

160px にします。

#div7 ボックスには子要素として span 要素を２つ記述し、#div1 ボックスと同じ方法であ

たかもグラデーションの色が変化するように見せます。

/***************************************************************************** * 丸形 円形グラデーション７ ******************************************************************************/ #div7 { top: 370px; left: -30px; width: 160px; height: 160px; border-radius: 80px; position: absolute; } #div7 > span:nth-child(1) { top: 0px; left: 0px; width: 160px; height: 160px; border-radius: 80px;

background: radial-gradient(at 35% 30%, #AAEEFF, #557799 50%, #111144); background: -webkit-radial-gradient(35% 30%, #AAEEFF, #557799 50%, #111144); position: absolute; opacity: 1.0; transition: 2s linear 0s; -webkit-transition: 2s linear 0s; } #div7 > span:nth-child(2) { top: 0px; left: 0px; width: 160px; height: 160px; border-radius: 80px;

background: radial-gradient(at 35% 30%, #FFEEAA, #997755 50%, #441111); background: -webkit-radial-gradient(35% 30%, #FFEEAA, #997755 50%, #441111); position: absolute;

opacity: 0.0;

(13)

© 2016 電脳 Papa 13

# div8 ボックスを記述します。position は absolute にして、

位置は top 370px と left –220px

（#button ボックスの左上端を基準とした位置）で指定します。width は 150px、height は

150px にします。

#div8 ボックスには子要素として span 要素を２つ記述し、#div1 ボックスと同じ方法であ

たかもグラデーションの色が変化するように見せます。

/***************************************************************************** * 四角形 円形グラデーション８ ******************************************************************************/ #div8 { top: 370px; left: 155px; width: 150px; height: 150px; border: solid 2px #FFFFFF; position: absolute; overflow: hidden; } #div8 > span:nth-child(1) { top: 0px; left: 0px; width: 150px; height: 150px; position: absolute; opacity: 1.0; transition: 2s linear 0s; -webkit-transition: 2s linear 0s; }

#button:hover div#div7 > span:nth-child(1) { opacity: 0.0;

}

#button:hover div#div7 > span:nth-child(2) { opacity: 1.0;

(14)

© 2016 電脳 Papa 14

background-image: repeating-radial-gradient(at left top, blue 20%, yellow 40%), repeating-radial-gradient(at right top, blue 20%, yellow 40%), repeating-radial-gradient(at left bottom, blue 20%, yellow 40%), repeating-radial-gradient(at right bottom, blue 20%, yellow 40%); background-image: -webkit-repeating-radial-gradient(left top, blue 20%, yellow 40%), -webkit-repeating-radial-gradient(right top, blue 20%, yellow 40%), -webkit-repeating-radial-gradient(left bottom, blue 20%, yellow 40%), -webkit-repeating-radial-gradient(right bottom, blue 20%, yellow 40%); background-position: 0px 0px, 75px 0px, 0px 75px, 75px 75px; background-size: 75px 75px; background-clip: border-box; background-repeat: no-repeat; transition: 2s linear 0s; -webkit-transition: 2s linear 0s; } #div8 > span:nth-child(2) { top: 0px; left: 0px; width: 150px; height: 150px; position: absolute; opacity: 0.0;

background-image: repeating-radial-gradient(at left top, red 20%, pink 40%), repeating-radial-gradient(at right top, red 20%, pink 40%), repeating-radial-gradient(at left bottom, red 20%, pink 40%), repeating-radial-gradient(at right bottom, red 20%, pink 40%); background-image: -webkit-repeating-radial-gradient(left top, red 20%, pink 40%), -webkit-repeating-radial-gradient(right top, red 20%, pink 40%), -webkit-repeating-radial-gradient(left bottom, red 20%, pink 40%), -webkit-repeating-radial-gradient(right bottom, red 20%, pink 40%); background-position: 0px 0px, 75px 0px, 0px 75px, 75px 75px; background-size: 75px 75px; background-clip: border-box; background-repeat: no-repeat; transition: 2s linear 0s; -webkit-transition: 2s linear 0s; }

#button:hover div#div8 > span:nth-child(1) { opacity: 0.0;

}

#button:hover div#div8 > span:nth-child(2) { opacity: 1.0;

参照

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

関連したドキュメント

フリッツ・ロース「主観的正当化要素の内容につい て」

被祝賀者エーラーはへその箸『違法行為における客観的目的要素』二九五九年）において主観的正当化要素の問題をも論じ、その内容についての有益な熟考を含んでいる。もっとも、彼の議論はシュペンデルに近

肥料をめぐる情勢 令和 4 年 4 農産局技術普及課

農産局 技術普及課.. ○ 肥料の「三要素」は、窒素（Ｎ）、りん酸（Ｐ）、加⾥（Ｋ）。.

③ 曲面上のグラフの彩色について

変形を 2000 個準備する

Visual Studio 2008、または Visual Studio 2010 で開発した要素モデルを Visual Studio

水素爆発による原子炉建屋等の損傷を 防止するための設備について

水素爆発による原子炉建屋等の損傷を防止するための設備 2.1 概要 2.2 水素濃度制御設備（静的触媒式水素再結合器）について 2.2.1

福島第一原子力発電所第１～４号機に対する

水素濃度 3％以上かつ酸素濃度 4％以上（可燃限界：水素濃度 4％以上かつ酸素

の立法過程 日本民法九六条 ヽ

それに対して現行民法では︑要素の錯誤が発生した場合には錯誤による無効を承認している︒ここでいう要素の錯

　　　 押 し倒 し抵 抗 値 お よ び 収 量 構 成 要 素 と 品 質

[r]