Heritage

Preview main page

Heritage

Preview main page

Страница тематического сайта о русских писателях. Страница выполнена без js и содержит только анимацию keyframes.

Heritage

Анимация карточки

.cardd:hover:before {
-webkit-transition: 1s !important;
content: «»;
position: absolute;
top: -100px;
left: 100px;
width: 280px;
height: 280px;
z-index: -1;
animation: anim 3.2s ease-in-out;
}

.card1.cardd:hover::before {
background: url(gorky.jpg);}
.card2.cardd:hover::before {
background: url(dostoevsky.jpg);}
.card3.cardd:hover::before {
background: url(turgenev.jpg);}
.card4.cardd:hover::before {
background: url(tolstoy.jpg);}
.card5.cardd:hover::before {
background: url(pushkin.jpg);}
.card6.cardd:hover::before {
background: url(chehov.jpg);}
.card7.cardd:hover::before {
background: url(blok.jpg);}
.card8.cardd:hover::before {
background: url(saltikov-shedrin.jpg);}

@keyframes anim {

0% { opacity: 0; left: 70px;}

20% { opacity: 1; left: 100px;}

100% { opacity: 1; left: 100px;}

}

Анимация фона

body {
background: url(hero.jpg);
background-size: cover;
}

body:after {
animation: grain 1s steps(10) infinite;
background-image: url(grains.png);
content: «»;
height: 300%;
left: -50%;
opacity: 0.8;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
}

@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-5%, -10%); }
20% { transform: translate(-15%, 5%); }
30% { transform: translate(7%, -25%); }
40% { transform: translate(-5%, 25%); }
50% { transform: translate(-15%, 10%); }
60% { transform: translate(15%, 0); }
70% { transform: translate(0, 15%); }
80% { transform: translate(3%, 35%); }
90% { transform: translate(-10%, 10%); }
}

Скачать проект целиком