2022-02-21 13:55:50 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2022-02-22 05:27:23 +00:00
|
|
|
<title>Coming Soon | Sarimoko</title>
|
2022-02-21 13:55:50 +00:00
|
|
|
<style>
|
|
|
|
|
body{
|
|
|
|
|
background-color:#000;
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper{
|
|
|
|
|
position:relative;
|
|
|
|
|
width:700px;
|
|
|
|
|
margin:20px auto;
|
|
|
|
|
background-color:#000;
|
|
|
|
|
overflow:hidden;
|
|
|
|
|
padding:100px;
|
|
|
|
|
}
|
|
|
|
|
.scanline{
|
|
|
|
|
width:100%;
|
|
|
|
|
display:block;
|
|
|
|
|
background:#000;
|
|
|
|
|
height:4px;
|
|
|
|
|
position:relative;
|
|
|
|
|
z-index:3;
|
|
|
|
|
margin-bottom:5px;
|
|
|
|
|
opacity:0.1;
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span{
|
|
|
|
|
position:absolute;
|
|
|
|
|
-webkit-filter: blur(1px);
|
|
|
|
|
font-size:80px;
|
|
|
|
|
font-family:'Courier new', fixed;
|
|
|
|
|
font-weight:bold;
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(1){
|
|
|
|
|
color:red;
|
|
|
|
|
margin-left:-2px;
|
|
|
|
|
-webkit-filter: blur(2px);
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(2){
|
|
|
|
|
color:green;
|
|
|
|
|
margin-left:2px;
|
|
|
|
|
-webkit-filter: blur(2px);
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(3){
|
|
|
|
|
color:blue;
|
|
|
|
|
position:20px 0;
|
|
|
|
|
-webkit-filter: blur(1px);
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(4){
|
|
|
|
|
color:#fff;
|
|
|
|
|
-webkit-filter: blur(1px);
|
|
|
|
|
text-shadow:0 0 50px rgba(255,255,255,0.4);
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(5){
|
|
|
|
|
color:rgba(255,255,255,0.4);
|
|
|
|
|
-webkit-filter: blur(15px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buzz_wrapper span{
|
|
|
|
|
-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes blur {
|
|
|
|
|
0% { -webkit-filter: blur(1px); opacity:0.8;}
|
|
|
|
|
50% { -webkit-filter: blur(1px); opacity:1; }
|
|
|
|
|
100%{ -webkit-filter: blur(1px); opacity:0.8; }
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes jerk {
|
|
|
|
|
50% { left:1px; }
|
|
|
|
|
51% { left:0; }
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes jerkup {
|
|
|
|
|
50% { top:1px; }
|
|
|
|
|
51% { top:0; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buzz_wrapper span:nth-child(3){
|
|
|
|
|
-webkit-animation: jerkblue 1s infinite;
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes jerkblue {
|
|
|
|
|
0% { left:0; }
|
|
|
|
|
30% { left:0; }
|
|
|
|
|
31% { left:10px; }
|
|
|
|
|
32% { left:0; }
|
|
|
|
|
98% { left:0; }
|
|
|
|
|
100% { left:10px; }
|
|
|
|
|
}
|
|
|
|
|
.buzz_wrapper span:nth-child(2){
|
|
|
|
|
-webkit-animation: jerkgreen 1s infinite;
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes jerkgreen {
|
|
|
|
|
0% { left:0; }
|
|
|
|
|
30% { left:0; }
|
|
|
|
|
31% { left:-10px; }
|
|
|
|
|
32% { left:0; }
|
|
|
|
|
98% { left:0; }
|
|
|
|
|
100% { left:-10px; }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.buzz_wrapper .text{
|
|
|
|
|
-webkit-animation: jerkwhole 5s infinite;
|
|
|
|
|
position:relative;
|
|
|
|
|
}
|
|
|
|
|
@-webkit-keyframes jerkwhole {
|
|
|
|
|
30% { }
|
|
|
|
|
40% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
|
|
|
|
|
41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(50deg,0);}
|
|
|
|
|
42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(-80deg,0);}
|
|
|
|
|
43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
|
|
|
|
|
65% { }
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="buzz_wrapper">
|
|
|
|
|
<div class="text">
|
|
|
|
|
<span>Coming Soon...</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="scanline"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
$(function(){
|
|
|
|
|
for(i=0;i<4;i++){
|
|
|
|
|
$('.buzz_wrapper .text span').eq(0).clone().prependTo('.buzz_wrapper .text');
|
|
|
|
|
}
|
|
|
|
|
for(i=0;i<10;i++){
|
|
|
|
|
$('.buzz_wrapper .scanline').eq(0).clone().appendTo('.buzz_wrapper');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
