*{
margin: 0;
padding: 0;
}
.navbar{
display: flex;
margin: 56px;
}
.navbar ul{
display: flex;
margin: auto;
text-decoration: none;
}
.navbar ul li{
list-style: none;
text-decoration: none;
margin: 45px;
text-transform: uppercase;
text-decoration: none;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
background: #111 ;
display: flex;
justify-content: center;
align-items: center;
overflow:hidden ;
}
section:hover{
background: #fff;
}
h2{
font-size: 5em;
color: rgb(216, 36, 36);
text-transform: uppercase;
text-align: center;
display: flex;
}
h2 span{
transition: 1.5s;
}
h2:hover span{
filter: blur(20px);
opacity: 0;
transform: scale(2);
background: white;
}
h2 span:nth-child(10n+1){
transition-delay: 0s;
}
h2 span:nth-child(10n+2){
transition-delay: 0.1s;
}
h2 span:nth-child(10n+3){
transition-delay: 0.2s;
}
h2 span:nth-child(10n+4){
transition-delay: 0.3s;
}
h2 span:nth-child(10n+5){
transition-delay: 0.4s;
}
h2 span:nth-child(10n+6){
transition-delay: 0.5s;
}
h2 span:nth-child(10n+7){
transition-delay: 0.6s;
}
h2 span:nth-child(10n+8){
transition-delay: 0.7s;
}
h2 span:nth-child(10n+9){
transition-delay: 0.8s;
}
h2 span:nth-child(10n+10){
transition-delay: 0.9s;
}
h2 span:nth-child(10n+11){
transition-delay: 1s;
}
h2 span:nth-child(10n+12){
transition-delay: 1.2s;
}
h2 span:nth-child(10n+10){
transition-delay: 1.3s;
}
Comments
Post a Comment