| Kosten | Четверг, 23 Мая 2019, 02:36 | Сообщение 1 |
| Красивый эффект исчезновение запросов, которые поставлены для перехода. Где изначально наблюдаем горизонтальное меню, но стоит навести на один из выбранных, как остальные становятся прозрачны, а точнее просто плавно исчезают. Вероятно вы уже встречали такой трюк в интернет сети, что теперь можно поставить на сайт, где на светлом или на темном сайте оригинально смотрится такой эффект.
Также все это создается при чистом CSS, где самостоятельно задаем прозрачность, где можно просто сделать их менее заметными, или чтоб вообще при клике все запросы пропали, кроме того, на который вы навели.Это аналогичным способом качается кнопок, где также будет материал. Вообще с начало рассмотрим как сделать красивое исчезновение ключевых запросов при наведении на один из них.
Состояния при наведении традиционно работают на элементе, на который наведен курсор, где также можем прослушивать событие hover для родительского элемента.
Первый вариант на ссылкам, что подключены ключевым словам:
HTML
Код <div class="gresacadsa-mitopodan">
<span>ZORNET.RU #1</span> <span>ZORNET.RU #2</span> <span>ZORNET.RU #3</span> <span>ZORNET.RU #4</span>
<span>ZORNET.RU #5</span> <span>ZORNET.RU #6</span>
</div>
CSS
Код span {
padding: 0 1rem;
transition: opacity 0.3s;
cursor:pointer;
font-size: 12px;
font-weight: bold;
}
.gresacadsa-mitopodan:hover span:not(:hover) {
opacity: 0.4;
}
Также самостоятельно оформляем под основу дизайна.
Демонстрация
Второй вариант кнопок:
Вот небольшая хитрость для того, чтобы выделять ваши состояния при наведении, а также отличный способ сделать оригинальный эффект.
HTML
Код <div class="mugedasb-ukopitudes"> <a href="#">ZORNET-1</a> <a href="#">ZORNET-2</a> <a href="#">ZORNET-3</a> <a href="#">ZORNET-4</a> <a href="#">ZORNET-5</a> <a href="#">ZORNET-6</a> <a href="#">ZORNET-7</a> <a href="#">ZORNET-8</a> <a href="#">ZORNET-9</a> <a href="#">ZORNET-10</a> <a href="#">ZORNET-11</a> <a href="#">ZORNET-12</a> <a href="#">ZORNET-13</a> <a href="#">ZORNET-14</a> <a href="#">ZORNET-15</a> <a href="#">ZORNET-16</a> </div>
CSS
Код .mugedasb-ukopitudes { visibility: hidden; }
.mugedasb-ukopitudes > * { visibility: visible; }
.mugedasb-ukopitudes > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
.mugedasb-ukopitudes:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */
.mugedasb-ukopitudes > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
html { display: flex; height: 100%; }
body {
background: #f05555;
padding: 10px;
max-width: 40em;
margin: auto;
}
.mugedasb-ukopitudes {
display: flex;
flex-wrap: wrap;
}
.mugedasb-ukopitudes > * {
background: #efeded;
padding: 1em;
flex: auto;
margin: 0.3em;
text-align: center;
color: #1e395d;
font-size: 1.5em;
text-decoration: none;
}
Суть этого трюка, мы убираем всех дочерних элементов, когда родитель находится в подчинении, и присоединяем другой обработчик наведения к дочернему элементу.
transition: opacity 0.2s указывает, что изменения непрозрачности будут перенесены в течение 0,2 секунд.
.sibling-fade:hover span:not(:hover) указывает, что при наведении родительского объекта выберите всех spanдочерних элементов, которые в данный момент не находятся при наведении, и измените их непрозрачность на 0.5.
Демонстрация
| | Страна: (RU) |
| |
