Skip to content

Instantly share code, notes, and snippets.

@hoto17296

hoto17296/snowfall.css

Last active Dec 31, 2015
Embed
What would you like to do?
こなああああああゆきいいいいいい ねぇ!!!
@charset "utf-8";
/* labelと:checked擬似クラスで擬似onClick実装 */
#snowfall label {
font-size: xx-large;
fon-weight: bold;
color: #fff;
background-color: #99f;
padding: .5em 1em;
margin: 1em 0;
cursor: pointer;
border-radius: .5em;
transition: 300ms;
}
#snowfall label:hover {
background-color: #ccf;
}
#start_snowfall {
display: none;
}
#start_snowfall + #snow {
display: none;
}
#start_snowfall:checked + #snow {
display: block;
}
/* 雪のアニメーション */
#snow > div {
animation: fall 10s linear infinite normal,
sway 2s ease-in-out infinite alternate;
-webkit-animation: fall 10s linear infinite normal,
sway 2s ease-in-out infinite alternate;
position: fixed;
top: -3em;
width: 100%;
z-index: 100;
}
#snow > div > div {
position: absolute;
width: 1em;
}
#snow > div > div > div {
animation: spin 3s linear infinite normal;
-webkit-animation: spin 3s linear infinite normal;
}
#snow > div > div > div:before {
content: '*';
color: #fff;
font-size: xx-large;
text-shadow: 0 0 .4em #00f;
transition: 300ms;
}
#snow > div > div > div:hover:before {
text-shadow: 0 0 .4em #f00;
}
@keyframes fall {
from { top: -3em; }
to { top: 100%; }
}
@keyframes sway {
from { left: -2em; }
to { left: 2em; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@-webkit-keyframes fall {
from { top: -1em; }
to { top: 100%; }
}
@-webkit-keyframes sway {
from { left: -2em; }
to { left: 2em; }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
/* マウスオーバーで吹き出し */
#snow span{
position: absolute;
opacity: 0;
top: -3em;
left: -2em;
width: 5em;
padding: .5em;
border-radius: .5em;
background: #090;
text-align: center;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transition: 300ms;
}
#snow span:before {
line-height: 1em;
content: 'メリクリ!!';
color: #fff;
}
#snow span:after {
position: absolute;
top: 100%;
left: 2.5em;
height: 0;
width: 0;
border: .5em solid transparent;
border-top: .5em solid #090;
content: "";
}
#snow > div > div > div:hover + span {
opacity: .8;
top: -4em;
transform: rotateY(0);
-webkit-transform: rotateY(0);
}
<form id="snowfall">
<label for="start_snowfall">Snowfall!!</label>
<input type="checkbox" id="start_snowfall" />
<div id="snow">
<div style="animation-delay:7s,1000ms;-webkit-animation-delay:7s,1000ms;"><div style="left: 5%"><div></div><span></span></div></div>
<div style="animation-delay:4s, 400ms;-webkit-animation-delay:4s, 400ms;"><div style="left:15%"><div></div><span></span></div></div>
<div style="animation-delay:2s,1200ms;-webkit-animation-delay:2s,1200ms;"><div style="left:25%"><div></div><span></span></div></div>
<div style="animation-delay:9s,1800ms;-webkit-animation-delay:9s,1800ms;"><div style="left:35%"><div></div><span></span></div></div>
<div style="animation-delay:1s, 200ms;-webkit-animation-delay:1s, 200ms;"><div style="left:45%"><div></div><span></span></div></div>
<div style="animation-delay:5s, 800ms;-webkit-animation-delay:5s, 800ms;"><div style="left:55%"><div></div><span></span></div></div>
<div style="animation-delay:3s,1600ms;-webkit-animation-delay:3s,1600ms;"><div style="left:65%"><div></div><span></span></div></div>
<div style="animation-delay:0s, 0ms;-webkit-animation-delay:0s, 0ms;"><div style="left:75%"><div></div><span></span></div></div>
<div style="animation-delay:6s,1400ms;-webkit-animation-delay:6s,1400ms;"><div style="left:85%"><div></div><span></span></div></div>
<div style="animation-delay:2s, 600ms;-webkit-animation-delay:2s, 600ms;"><div style="left:95%"><div></div><span></span></div></div>
</div>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment