Skip to content

Lava Lamp эффект на CSS

На этот раз мы сделаем эффект скольжения меню, известный как эффект Lava Lamp, сделанный на JavaScript и jQuery. А мы создадим такой эффект с нуля на чистом CSS. В статье рассмотрены три простых примера (первым делом не забудьте посмотреть демонстрацию).

Все примеры в демонстрации

Шаг 1 — Исходники

В примере c сердцем и стрелой мы используем три изображения, объединенные в спрайт как показано ниже:

Спрайт с сердцем

Шаг 2 — HTML

Для каждого из трех примеров будет один и тот же HTML-код. Мы просто переключим класс ph-line-nav на ph-dot-nav и ph-heart-nav.

<div class="nav ph-line-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Gallery</a>
<a href="#">Contact</a>
<div class="effect"></div>
</div>

Шаг 3 — CSS — все примеры

Давайте начнем с стилей, которые являются общими для всех трех примеров. Слой .nav — родительский элемент, который будет позиционироваться относительно. (Заметим, что мы будем опускать префиксы для простоты).

.nav {
overflow: hidden;
position: relative;
width: 480px; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
transition: .7s; }
.nav a:hover {
color: #c6342e; }

Важная часть LavaLamp-эффекта происходит здесь:

.effect {
position: absolute;
left: -12.5%;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; /* the middle of the first <a> */}
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; /* the middle of the second <a> */ }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; /* the middle of the third <a> */}
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; /* the middle of the forth <a> */}

При наведении курсора мыши на одну из ссылок слой .effect плавно движется к его середине. Не стесняйтесь экспериментировать с transition-timing-function.

Шаг 4 — Эффект с линией

Начнем с самого простого, например, с плавающей линии. Вы просто должны определить размеры и цвета линии и расположить ее вертикально.

.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}

В каждом случае мы установим margin-left равным половине длины элемента, чтобы она всегда была в центре наведенной ссылки, см. изображение ниже:

Шаг 5 — Эффект с точками

Теперь давайте обсудим эффект с точками. Мы добавим горизонтальную линию в 1 пиксель высотой перед слоем .nav. Для этого мы используем псевдо-класс :after. Еще добавим маленькие точки, расположенные на линии под каждым пунктом меню, снова используем псевдо-класс :after. Слой .effect будет накладывать точку в 10px на точку под наведенной ссылкой остальные свойства аналогичны предыдущему примеру.

.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #c6342e;
bottom: 40px; }
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 38px;
left: 50%;
margin-left: -2px;
background: #c6342e;
border-radius: 100%; }
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #c6342e;
border-radius: 100%; }

Шаг 6 — Эффект с сердцем и стрелой

Наконец, давайте посмотрим на сердце и стрелу. Сердце состоит из двух элементов, добавленные с помощью псевдо-классов :before (левая половина сердца) и :after (правая). a:after имеет z-index равный 1, благодаря чему она расположена над стрелкой. По этому трюк и работает 🙂

.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
background: url('../images/heart.png') no-repeat; }
.ph-heart-nav .effect {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left:-31px; }

.ph-heart-nav a:before {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 11px;
margin-left: -11px; }

.ph-heart-nav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
z-index: 1;
background-position: -73px 0;
height: 20px;
width: 11px; }

Послесловие

Вот и всё. Я надеюсь, вам понравился этот урок. Спасибо за англоязычную версию урока сайту pepsized.com.