Sardinaerum
Друзья 1
Nakihitо
заходила 24 января в 15:53

Sardinaerum

Пользователь
Любимые исполнители
1 запись
24 января в 15:55
* {
margin: 0;
background: #000;
}

.curtain {
position: absolute;
width: 100%;
height: 100%;
background: url('../images/curtains.jpg') no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: black;
transition: background 0.2s linear;
z-index:10;

}
.curtain:hover{
background-position-y: -10px;
}
.curtain.falls {
transition: background 1s linear;
background-position-y: -1000px;
animation:hide-curtain 1s;
z-index:-10;
}

.lamp {
z-index:7;
width: 300px;
margin: auto;
position: absolute;
margin-left: 300px;
}

@keyframes hide-curtain {
0%

{
z-index: 10;
opacity: 1;
}

99% {
z-index: 10;
opacity: 0;
}

100% {
z-index: -10;
opacity: 0;
}

}
.light {
margin: 68px 0 0 200px;
border-bottom: 400px solid yellow;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
height: 0;
width: 100px;
position: absolute;
z-index: 9;
opacity: 0;
animation-fill-mode: forwards;
}

.light.light-on{
animation:light-on 1s;
opacity:0.5;
}
@keyframes light-on{
from {
opacity:0;
}
to{
opacity:0.5;
}
}

.rabbit {
width: 70px;
margin: 250px 0 0 480px;
position: absolute;
z-index: 8;
opacity: 0;
background-color:transparent;
}
.rabbit.show-rabbit {
animation: show-rabbit 0.5s;
z-index:9;
opacity: 0.5;
}

.rabbit.rabbit-go {
animation: rabbit-go 1s;
margin: 350px 0 0 500px;
opacity: 0;
}

@keyframes rabbit-go{
0% {
margin: 250px 0 0 480px;
opacity:0.5;
}
99%{
margin:350px 0 0 500px;
opacity:0;
}
100% {
margin: 350px 0 0 500px;
opacity: 0;
}
}

@keyframes show-rabbit {
0% {
opacity: 0;
z-index:8;
}

to {
opacity: 0.5;
z-index:9;
}
}

.hat {
width: 150px;
transform: rotate(180deg);
margin: 350px 0 0 450px;
position: absolute;
z-index: 8;
opacity: 0;
background-color: transparent;
}
.hat.show-hat{
animation: show-rabbit 0.5s;
z-index: 9;
opacity: 0.5;
}

.magician {
margin: 250px 0 0 250px;
position: absolute;
z-index: 9;
opacity: 0;
background-color: transparent;
}
.magician.show-magician {
animation: show-rabbit 0.5s;
z-index: 9;
opacity:0.5;
}
/
x
Список воспроизведения
очистить
Наверх