【CSS】CSSでクリスマスツリーを描いてみる【第三弾】

　どうも！LSSです！！

今回は、昨日の記事、

の続きです！！

クリスマスツリー　完成版？

 

 

 

 

★

●

●

●

●

●

●

●

●

コード

<style><!--
@keyframes redblnk{
0%{color:#ff000000;}
100%{color:#ff0000ff;}
}
@keyframes yellowblnk{
0%{color:#ffff0000;}
100%{color:#ffff00ff;}
}
@keyframes blueblnk{
0%{color:#0000ff00;}
100%{color:#0000ffff;}
}
@keyframes whiteblnk{
0%{color:#ffffff00;}
100%{color:#ffffffff;}
}
@keyframes snowd{
0%{background-position:0px 0px;}
50%{background-position:75px 75px;}
100%{background-position:0px 150px;}
}
.waku{
position:relative;
width:300px;
height:400px;
background-color:black;
background-image:radial-gradient(circle 25px at 50px 50px,#ffffff80,#ffffff00),radial-gradient(circle 25px at 125px 125px,#ffffff80,#ffffff00 );
background-size:150px 150px;
animation:snowd 10s linear 0s infinite;
}
.midori{
position:absolute;
right:50px;
border-color:transparent transparent green transparent;
border-width:0px 80px 100px 80px;
border-style:solid;
}
.ki{
position:absolute;
right:100px;
top:320px;
width:60px;
height:80px;
background-color:brown;
}
.hoshi{
position:absolute;
top:15px;
right:105px;
font-size:55px;
color:yellow;
}
}
--></style>
<div class="waku">
<div class="ki"> </div>
<div class="midori" style="top: 50px;"> </div>
<div class="midori" style="top: 120px;"> </div>
<div class="midori" style="top: 190px;"> </div>
<div class="hoshi">★</div>
<div style="position: absolute; animation: redblnk 2s linear 0s infinite alternate; top: 150px; right: 80px;">●</div>
<div style="position: absolute; animation: redblnk 2s linear 0.3s infinite alternate; top: 170px; right: 120px;">●</div>
<div style="position: absolute; animation: yellowblnk 2s linear 0.8s infinite alternate; top: 250px; right: 150px;">●</div>
<div style="position: absolute; animation: yellowblnk 2s linear 0.5s infinite alternate; top: 100px; right: 110px;">●</div>
<div style="position: absolute; animation: blueblnk 2s linear 1.1s infinite alternate; top: 100px; right: 150px;">●</div>
<div style="position: absolute; animation: blueblnk 2s linear 1.2s infinite alternate; top: 220px; right: 70px;">●</div>
<div style="position: absolute; animation: whiteblnk 2s linear 1.4s infinite alternate; top: 140px; right: 160px;">●</div>
<div style="position: absolute; animation: whiteblnk 2s linear 1.6s infinite alternate; top: 280px; right: 80px;">●</div>
</div>

とりあえず完成？

電飾、昨日の時点で赤と黄色でしたが、新たに「青」と「白」を追加しました。

あと、背景に雪っぽいものを降らせてみました^^

…表現力の不足感は否めないｗｗｗ

昨日の段階で、使いたいとおっしゃってくださった方がおられたので、お待たせするのもなんだし…と、これで完成って事にしておきますｗ

Hairui ブランチツリー LED ライト 枝 イルミネーション ツリー インテリア 電池式 間接照明 クリスマス 高さ80cm 100電球 オシャレ 北欧 タイマー機能 防水 金色(花瓶が含まない)

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^