合体９　キラキラ＋電飾・ツリー４種CSS

■4.クリスマス・ツリーはCSSで描いた絵です。電飾の数は19個。
◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>合体９　キラキラ＋電飾・ツリー４種CSS</title>

<!--★ここからコピー。ここからCSSで描いた絵-->
<style type="text/css">
<!--
body{
/*★背景色を赤緑黒灰色と、４色を縦に並べる指定。幅はpx指定。%でも可能。90degは角度*/
background-image:linear-gradient(90deg,#f00 10px,#0f0 10px,#0f0 20px,#000 20px,#000 330px,#333 330px);
color:#fff;/*★文字色指定　白*/
}

/*★電飾の基準になる領域。ここの位置だけずらせば、ツリーも電飾の位置も移動します。*/
#Timg{
position:absolute;/*★必須。position:relativeでも可能。位置指定のしやすい方で、*/
top:100px;/*★この位置をずらせば、ツリーも電飾も移動します。上からの位置*/
left:90px;/*★この位置をずらせば、ツリーも電飾も移動します。左からの位置*/
width:150px;/*★JavaScriptを変更しないなら横幅はこのままで*/
height:200px;/*★JavaScriptを変更しないなら縦幅はこのままで*/
background:linear-gradient(#000,#00f); /*★背景色の線形グラデーション */
border-top-left-radius:40px;/*★左上角丸*/
border-top-right-radius:40px;/*★右上角丸*/
border:solid 5px #a82;/*★茶色の枠指定*/
box-shadow:3px 3px 10px #ff0 inset;/*★領域の内側に黄色の影指定*/
}

/*★電飾の装飾 。opacity以外を指定*/
#il{       
font-size:80%;   /*★電飾の文字の大きさ。ページの文字指定の影響を受けるので、調整*/
text-shadow: 5px 5px 5px #fff,/*★電飾の影指定*/
    -1px 1px 1px #666,
    1px -1px 1px #f0f,
    -1px -1px 1px #ff0;
}

/*★キラキラ星の領域指定。*/
#waku{
position:absolute;/*★絶対位置指定。ただし、絶対位置指定もtopとleft指定も必須ではありません。お好みで*/
top:130px;
left:100px;
width:110px;/*★横幅指定は必須。数値はお好みで*/
height:130px;/*★縦幅指定は必須。数値はお好みで*/
}
/*★キラキラ星の文字装飾。色以外を指定。装飾不要なら削除*/
#font-deko{
font-size:180%;/*★文字の大きさ*/
text-shadow: 3px 3px 10px #f00;/*★文字の影。赤色のボカシを入れてます*/
opacity:0.7;/*★透過指定。1で透過無し。0を入れると完全透過で文字が消えます*/
}

/*★ここから以下はCSSで描いた絵*/
/*star*/
.star{
position:absolute; 
top:-40px;
left:60px;
font-size:200%;
color:#ff0;
text-shadow:3px 3px 10px #ff0;/*★星の周りの黄色の影指定*/
}

.tree_top,
.tree_middle,
.tree_bottom{
widht:0px;
height:0px;
border-radius:50px;
position: absolute;
left:50%;
}

/* top */
.tree_top{
border-bottom: solid 40px #092;
border-left: solid 40px transparent;
border-right: solid 40px transparent;
margin-left: -40px;
top:-10px;
}

/* middle */
.tree_middle {
border-bottom: solid 80px #072;
border-left: solid 80px transparent;
border-right: solid 80px transparent;
margin-left: -80px;
top: 10px;
}

/* bottom */
.tree_bottom {
border-bottom: solid 120px #052;
border-left: solid 120px transparent;
border-right: solid 120px transparent;
margin-left: -120px;
top: 50px;
}

/* end */
.tree_end {
position:absolute;
left:50%;
width: 50px;
height:50px;
background:linear-gradient(#000,#740); /*★背景色の線形グラデーション。黒から濃茶 */
margin-left: -25px;
top: 160px;
}
<!--★ここまでCSSで描いた絵-->
-->
</style>
<!--★bodyにもコピーがあります-->

</head>

<body>

<!--★ここからコピー。キラキラ星の位置指定-->
<div id="waku"></div>
<!--★ここからCSSで描いた絵の位置指定-->
<div id="Timg">
<!--★注意!!★CSSで作成した形は、上に記述したモノが重なり方の一番下になります-->
<div class="tree_end"></div>
<div class="tree_bottom"></div>
<div class="tree_middle"></div>
<div class="tree_top"></div>
<div class="star">★</div>
</div>
<!--★ここまでコピー。ここまでCSSで描いた絵の位置指定-->


<!--★ここからコピー　位置は<body>の中です-->
<script type="text/javascript">
<!--
/*===============================================================================
by 便利eelife(http://eelife.org/java/java_top.html)
キラキラ星　http://eelife.org/java/ly/kirakirabosi.html
★原本をHTML5対応にし、領域指定と文字フォントの装飾をCSSで指定できるよう改造　2014/11/20
================================================================================*/
var no=15; //★発生させる星の数。好みで
var speed=200; //★画像が動く速度。(単位は千分の一秒)。原本200。小さいほど速い
//★好みの色を指定。増減可能
//var clrs = new Array('#fff','#ff0','aqua','pink'); 
var clrs = new Array('#aaa','#ff0','#f60','pink');

var dsp_haniX =waku.offsetWidth;  // 発生する星の位置の幅
var dsp_haniY =waku.offsetHeight;  // 発生する星の位置の高さ
var W_top =waku.offsetTop;  // 画面 上からの位置
var W_left =waku.offsetLeft;  // 画面 左からの位置
var i=0; // 色を変える為の変数
var v=0; // 星を得る為の変数

function act(){
v = Math.floor(Math.random()*no); // 乱数の発生０～７（星の発生数）まで
i = Math.floor(Math.random()*clrs.length); // 乱数の発生０～clrs.length（配列 clrs の色の数この場合は４）
M_x = Math.floor(Math.random()*dsp_haniX);
M_y = Math.floor(Math.random()*dsp_haniY);
document.getElementById("Hosi"+v).style.color = clrs[i]; // 求めた星に clrs[i] の色を表示
document.getElementById("Hosi"+v).style.left =(M_x+W_left)+"px";  /*★HTML5対応のため+"px"追加。下も*/
document.getElementById("Hosi"+v).style.top =(M_y+W_top)+"px";
setTimeout("act()",speed); 
}

for (v=0; v<no; v++){
document.write('<div id="Hosi'+v+'" style="position:absolute;-1000px;left:-1000px;"><span id="font-deko">★</span></div>');}/*■文字フォント指定。★を指定しています。変更可能*/
window.onload=act();


/*=====================================================================================
クリスマス・ツリー電飾 By  HIMAJIN(http://himajin.moo.jp/freejava/tree/tree.html)
★ブラウザIE専用(最新のIEでは動作不可)を、最新IEと他ブラウザ対応に改造。 古いIEでは不可。
text-shadow:を追加して、光にぼかしを追加。　2014/11/17
====================================================================================*/
//色設定（必ず2色以上で）
Colors=new Array();
Colors[0]="#f00";//★赤
Colors[1]="#aaa";//★灰色
Colors[2]="#0f0";//★緑
Colors[3]="#ff0";//★黄色
Colors[4]="#f0f";//★ピンク
Colors[5]="#f60";//★オレンジ
Colors[6]="#80f";//★紫
Colors[7]="#0ff";//★水色
Colors[8]="#00f";//★白ではなく青で

//ポジション設定(画像左上からの位置を指定x,y)
//positions[i]の数だけランプができます(iは必ず連番で)

positions=new Array();//★(左からの位置、上からの位置)
positions[0]=new Array(60,-5);
positions[1]=new Array(70,20);
positions[2]=new Array(70,60);
positions[3]=new Array(70,90);
positions[4]=new Array(60,120);
positions[5]=new Array(70,150);
positions[6]=new Array(40,40);
positions[7]=new Array(20,70);
positions[8]=new Array(30,100);
positions[9]=new Array(30,140);
positions[10]=new Array(100,40);
positions[11]=new Array(110,70);
positions[12]=new Array(110,100);
positions[13]=new Array(100,130);
positions[14]=new Array(2,120);
positions[15]=new Array(-20,140);
positions[16]=new Array(140,120);
positions[17]=new Array(120,150);
positions[18]=new Array(160,150);


/*動作設定(new Array(8,0)を指定しなければ繰り返す)
control[i]の数だけ順に動作する(iは必ず連番で)
control[i]=new Array(動作の種類,動作回数)
 0:カラーランダム(動作回数を指定)
 1:フェードイン(スピードを指定)
 2:フェードアウト(スピードを指定)
 3:同時点滅(動作回数を指定)
 4:点滅移動(動作回数を指定)
 5:カラーランダムフェードイン(スピードを指定)
 6:カラーランダムフェードアウト(スピードを指定)
 7:ランダム点滅(動作回数を指定)
 8:終了(0を指定)*/

control=new Array();
control[0]=new Array(0,2);
control[1]=new Array(1,100);
control[2]=new Array(3,100);
control[3]=new Array(4,100);
control[4]=new Array(2,2);
control[5]=new Array(5,1);
control[6]=new Array(7,100);
control[7]=new Array(6,1);
//control[8]=new Array(8,0);

//点滅スピード
cyclesec=100;       //ミリ秒
//-----------------------------------------------設定ここまで
basex=Timg.offsetLeft;
basey=Timg.offsetTop;
count=0;fs1=0;fs2=0;fs3=100;
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
xpx = basex + positions[i][0]; 
ypx = basey + positions[i][1];
star="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;color:"+color+";opacity:0;'id='lamp"+i+"'><span id='il'>●</span></div>";
document.write(star);
}

function Illumination(){

if(control[count][0]==1){                                    // カラーランダム
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.opacity= 1;
document.getElementById("lamp"+i).style.color=color;
}
fs2++;
if(fs2==control[count][1]){count++;count%=control.length;fs2=0;}

}else if(control[count][0]==0){                              //フェードイン
fs1=fs1+control[count][1];
for (i=0; i < positions.length; i++){ 
document.getElementById("lamp"+i).style.opacity= fs1;
}
if(fs1>=1){count++;count%=control.length;fs1=0;}

}else if(control[count][0]==2){                             //フェードアウト
fs3=fs3-control[count][1];
for (i=0; i < positions.length; i++){ 
document.getElementById("lamp"+i).style.opacity= fs3;
}
if(fs3<=0){count++;count%=control.length;fs3=1;}

}else 
if(control[count][0]==3){                             //同時点滅
fs2++;
for (i=0; i < positions.length; i++){
if(fs2%2)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
}
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}


}else if(control[count][0]==4){                           //点滅移動
fs2++;
for (i=0; i < positions.length; i++){
if(i==fs2%positions.length)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
}
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}

}else if(control[count][0]==5){                            //カラーランダムフェードイン
fs1=fs1+control[count][1];
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.color=color;
document.getElementById("lamp"+i).style.opacity= fs1;
}
if(fs1>=1){count++;count%=control.length;fs1=0;}

}else if(control[count][0]==6){                            //カラーランダムフェードアウト
fs3=fs3-control[count][1];
for (i=0; i < positions.length; i++){ 
color=Colors[Math.floor(Math.random()*Colors.length)];
document.getElementById("lamp"+i).style.color=color;
document.getElementById("lamp"+i).style.opacity= fs3;
}
if(fs3<=0){count++;count%=control.length;fs3=1;}

}else if(control[count][0]==7){                            //ランダム点滅
fs2++;
for (i=0; i < positions.length; i++){ 
flag=Math.floor(Math.random()*2);
if(flag)
document.getElementById("lamp"+i).style.opacity= 0;
else
document.getElementById("lamp"+i).style.opacity= 1;
if(fs2==control[count][1]){
for (i=0; i < positions.length; i++){
document.getElementById("lamp"+i).style.opacity= 1;
}
count++;count%=control.length;fs2=0;}
}

}else if(control[count][0]==8){                           //終了
clearInterval(setlamp);
}
}
setlamp=setInterval("Illumination()",cyclesec);/* himajin.moo.jp */
// -->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>