Getting started
It’s pretty easy to get started with Statusfy.
Create a new index.html file with this HTML code..
<div class="happyhalloween">
<span>h</span>
<span>a</span>
<span>p</span>
<span>p</span>
<span>y</span>
<span>h</span>
<span>a</span>
<span>l</span>
<span>l</span>
<span>o</span>
<span>w</span>
<span>e</span>
<span>e</span>
<span>n</span>
</div>
Create a style.css file with this CSS code.
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
body {
margin: 0;
font-family: 'Creepster', cursive;
overflow: hidden;
background-image: url("halloween-bg.jpg");
background-repeat: no-repeat;
background-position-y: 75%;
background-attachment: fixed;
background-size: cover;
}
.happyhalloween {
position: absolute;
left:0;
right:0;
margin: auto;
width:fit-content;
text-align: center;
height:fit-content;
bottom:0;
top:0;
display: flex;
font-size: 10vw;
}
.happyhalloween span {
display: inline-block;
color:transparent;
text-shadow: 0px 0px 0px white;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.happyhalloween span:nth-child(1){
animation-name: happyhalloweenleft;
}
.happyhalloween span:nth-child(2){
animation-name: happyhalloweenleft;
animation-delay: .3s;
}
.happyhalloween span:nth-child(3){
animation-name: happyhalloweenight;
animation-delay: .6s;
}
.happyhalloween span:nth-child(4){
animation-name: happyhalloweenleft;
animation-delay: .8s;
}
.happyhalloween span:nth-child(5){
animation-name: happyhalloweenight;
animation-delay: 1s;
margin-right: .5em;
}
.happyhalloween span:nth-child(6){
animation-name: happyhalloweenight;
animation-delay: 1.3s;
}
.happyhalloween span:nth-child(7){
animation-name: happyhalloweenleft;
animation-delay: 1.6s;
}
.happyhalloween span:nth-child(8){
animation-name: happyhalloweenight;
animation-delay: 2s;
}
.happyhalloween span:nth-child(9){
animation-name: happyhalloweenight;
animation-delay: 2.3s;
}
.happyhalloween span:nth-child(10){
animation-name: happyhalloweenleft;
animation-delay: 2.5s;
}
.happyhalloween span:nth-child(11){
animation-name: happyhalloweenleft;
animation-delay: 2.8s;
}
.happyhalloween span:nth-child(12){
animation-name: happyhalloweenight;
animation-delay: 3s;
}
.happyhalloween span:nth-child(13){
animation-name: happyhalloweenight;
animation-delay: 3.3s;
}
.happyhalloween span:nth-child(14){
animation-name: happyhalloweenleft;
animation-delay: 3.5s;
}
.happyhalloween span:nth-child(15){
animation-name: happyhalloweenight;
animation-delay: 3.8s;
}
@keyframes happyhalloweenleft{
50% {transform: skew(50deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
@keyframes happyhalloweenight{
50% {transform: skew(-60deg) translateY(-200%);
text-shadow: 0px 0px 50px;
opacity: 0;
}
}
</style>
I hope you know how to add CSS file in html. Or follow tutorial video..
0 Comments