Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【Merry】聖なる夜に【Christmas】

 どうも!LSSです!!

 

この記事限定で、めっちゃ雪を降らせてみました。

…なお、そのままだと他のリンク等が操作不能になるため、画面内でクリックすると停止するようにしています。

 

 

 
 
 

 

 

コード

<style><!--
body{
background-image:linear-gradient(black 50%,blue 90%,white 100%);
background-color:black;
}
#title a{
color:black;
text-shadow:0px 0px 7px yellow;
}
article{
background-color:black!important;
color:white;
}
@keyframes s1ax{
0%{background-position-x:0px;}
70%{background-position-x:300px;}
100%{background-position-x:400px;}
}
@keyframes s1ay{
0%{background-position-y:0px;}
100%{background-position-y:200px;}
}
#s1{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index: 1;
background-image:radial-gradient(circle 15px at 25px 25px,#ffffffc0 0%,#ffffff00 50%),radial-gradient(circle 20px at 275px 75px,#ffffff80 0%,#ffffff00 50%),radial-gradient(circle 20px at 100px 50px,#ffffff90 0%,#ffffff00 50%);
background-size:400px 100px;
animation:s1ax 0.8s linear 0s infinite,s1ay 2s linear 0s infinite;
}
@keyframes s2ax{
0%{background-position-x:0px;}
100%{background-position-x:600px;}
}
@keyframes s2ay{
0%{background-position-y:0px;}
100%{background-position-y:400px;}
}
#s2{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index: 1;
background-image:radial-gradient(circle 30px at 50px 50px,#ffffffc0 0%,#ffffff00 50%),radial-gradient(circle 30px at 100px 275px,#ffffffc0 0%,#ffffff00 50%);
background-size:200px 400px;
animation:s2ax 5s ease-in-out 0s infinite alternate,s2ay 3s linear 0s infinite;
}
@keyframes s3ax{
0%{background-position-x:0px;}
100%{background-position-x:450px;}
}
@keyframes s3ay{
0%{background-position-y:0px;}
100%{background-position-y:400px;}
}
#s3{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index: 1;
background-image:radial-gradient(circle 50px at 50px 50px,#ffffff60 0%,#ffffff00 50%),radial-gradient(circle 50px at 225px 250px,#ffffff60 0%,#ffffff00 50%);
background-size:400px 400px;
animation:s3ax 7s ease-in-out 0s infinite alternate,s3ay 5s linear 0s infinite;
}
--></style>
<div id="ss" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1;">
<div id="s1"> </div>
<div id="s2"> </div>
<div id="s3"> </div>
</div>
<script>// <![CDATA[
ss.addEventListener("click",stpe,false);
function stpe(e){
ss.innerHTML='';
ss.style.width='10px';
ss.style.height='10px';
}
// ]]></script>

 

 コード中、最初にある、

 body{
background-image:linear-gradient(black 50%,blue 90%,white 100%);
background-color:black;
}
#title a{
color:black;
text-shadow:0px 0px 7px yellow;
}
article{
background-color:black!important;
color:white;
}

の部分が、このブログの本来の設定を強引に書き換えている部分ですw

最後にJavaScriptを書いていますが、これは停止のためだけのコードで、雪を降らせているのは純粋にCSSで書いています^^

 

この記事は、さじさん(id:conasaji)の、

への回答として書きましたw

 

なお、手法は異なりますが

www.heavy-peat.com

あトんさんの記事を参考にさせていただいているフシがあります。

(あトんさんの雪のほうが余程凄いです!)

 

 

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

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