Анимационный div-цвет плюс анимация зависания

Epic спросил: 26 декабря 2017 в 07:55 в: css3

У меня есть строка, созданная из div, которую я пытаюсь сделать, это анимировать цвет div, background grey, затем он заполняет белый, затем белый заполняется до серого, как будто он скользит. затем наведите курсор на строку и текст, сдвиньте ее примерно на 10 пикселей, а затем при отпускании верните ее в положение по умолчанию.

как здесь, в нижнем примере

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 340;
    display: inline-block;
    width: 4.16667%;
    height: 6.66667%;
    min-height: 60px;
    font-family: 'rajdhani', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #000;
    font-size: 16px;
}
.scroll-indicator .border-grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 2px;
    height: 100%;
    background: #333;
}
.scroll-indicator .border {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
    width: 2px;
    height: 100%;
    background: #000;
}
.scroll-indicator em {
    display: inline-block;
    font-style: normal;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    position: absolute;
    left: 0px;
    top: 12px;
}

@media screen and (max-width: 800px) {
.scroll-indicator {
    bottom: 0;
}
}

<a href="" class="scroll-indicator" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
		<div class="border-grey"></div>
		<div class="border" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0% 0% 0px;"></div>
		<em>scroll</em>
	</a>

0 ответов