Комментарий #9839410
animeshnik_ALTanimeshnik_ALT

animeshnik_ALT
в профиле пользователя animeshnik_ALT
моя кнопка отключения гифок и подсказок
скрин
Разберем на примере моего кода. Вы же изменяйте под себя.
[div=buttons-block]
[div=user-defined button-disable gif-disable]Отключить гифки[/div]
[div=notification gif-notice]Гифки успешно отключены[/div]
[div=user-defined button-disable tooltip-disable]Отключить подсказки[/div]
[div=notification tooltip-notice]Подсказки успешно отключены[/div]
[div=custom-panel]
[div=active to-process data-dynamic=switcher data-switcher=tab5]Есть у меня[/div]
[div=to-process data-dynamic=switcher data-switcher=tab5]Играю[/div]
[div=CUSTOM_PANELS_CONTAINER]
[div=CUSTOM_PANEL]
[div=Ssylki-anime-v-1-standard lumin][b][character=194503 люмин][/b][/character][div=Text-dno-ramka-standard]Главный герой[/div][div=Evaluation-v1-standard]Люмин[/div][div=Fon-standard]ж.р.[/div][div=progress-standard]★★★★[/div]
[/div]
[/div]
[div=CUSTOM_PANEL]
[div=Ssylki-anime-v-1-standard paimon][b][character=194150 паймон][/b][/character][div=Text-dno-ramka-standard]Консервная банка[/div][div=Evaluation-v1-standard]Паймон[/div][div=Fon-standard]Лучший перс игры[/div][div=progress-standard]★★★★★★[/div]
[/div]
[/div]
[/div][/div]
[/div]

инструкция
[div=user-defined button-disable gif-disable]Отключить гифки[/div]
[div=notification gif-notice]Гифки успешно отключены[/div]
[div=user-defined button-disable tooltip-disable]Отключить подсказки[/div]
[div=notification tooltip-notice]Подсказки успешно отключены[/div]
Эти четыре строчки и есть кнопки с их уведомлениями. Что делает каждый класс?
user-defined при нажатии добавляет доп. класс active. Именно благодаря ему у нас и получается кнопка.
button-disable общий класс для всех кнопок. В этом классе хранится их css оформление.
gif-disable, tooltip-disable произвольные классы. По названию ясно что первый предназначен для отключения гифок, второй для подсказок. Без правильного css кода не дают никакого результата, но об этом позже.
notification общий класс для всех уведомлений. Здесь хранятся css стили.
gif-notice, tooltip-notice Произвольные классы. Без правильного css кода также не дают никакого результата.
buttons-block имеет лишь значение text-align: center; для того, чтобы кнопки были по центру, но это одновременно делает по центру весь текст внутри этого блока. Так что можете и не использовать.

Почему кнопки находятся именно в этом месте?
Ухх, это самая сложная часть. Тут нужно понимать какие постеры мы хотим отключить этой кнопкой и поставить кнопку ПЕРЕД блоком, покрывающим все эти постеры. Надеюсь понятно.

css
Теперь разберем то, что вам нужно понимать в css для создания кнопки.
Как я уже сказал выше, при нажатии на блок с классом user-defined, ему добавляется ещё класс active. Этим мы и воспользуемся.
Отключение подсказки:
Пишем .tooltip-disable.active ~ и дальше класс того самого блока, покрывающего все наши постеры, перед которым мы поставили кнопки. В моём случае это .custom-panel. Дальше добавляем класс самого постера, чью подсказку отключаем, и .b-link.
Получается такой код:
.tooltip-disable.active ~ .custom-panel .Ssylki-anime-v-1-standard .b-link {
    pointer-events: none !important;
}

Для отключения гифки мы используем другой способ - псевдокласс :not() Подробнее.
Было
.Ssylki-anime-v-1-standard.lumin .Fon-standard::after {
  background-image: url(https://media.tenor.com/VEVbaVSKhsgAAAAd/lvl1-genshin-impact.gif);
}
Стало
.gif-disable:not(.active) ~ .custom-panel .Ssylki-anime-v-1-standard.lumin .Fon-standard::after {
  background-image: url(https://media.tenor.com/VEVbaVSKhsgAAAAd/lvl1-genshin-impact.gif);
}
Теперь при отсутствии класса active у кнопки, при наведении будет воспроизводиться гифка. Если же active присутствует, то гифка производится не будет.

Не обязательно для понимания
Текст внутри кнопки и уведомления меняется в css с помощью псевдокласса :before.
Уведомления имеют position: fixed; Их позиция отсчитывается справа и сверху.
Для уведомления с active нужна анимация notice-disable, Для уведомления без active нужна анимация notice-enable. Да, две одинаково-разные анимации. Так надо.
Общий css
.buttons-block {
  text-align: center;
}

.button-disable {
    display: inline-block;
    margin: 0 10px 6px;
    background: #505050a6;
    color: #ffcece;
    border-radius: 12px;
    padding: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px 3px rgb(var(--light-color));
}

.button-disable:hover {
    color: #ffb6b6;
    background: #646464a6;
    transform: scale(1.03);
}
.button-disable.active {
    font-size: 0;
}
.button-disable.active:before {
    font-size: 14px;
}
.gif-disable.active:before {
    content: 'Включить гифки';
}
.tooltip-disable.active:before {
    content: 'Включить подсказки';
}

.notification {
  position: fixed;
  opacity: 0;
  background: #46ff469c;
  color: #005200;
  padding: 10px;
  border: 1px dashed #004600;
  pointer-events: none;
}
.gif-notice {
  right: 5%;
  top: 50px;
}
.tooltip-notice {
  right: 5%;
  top: 100px;
}

.gif-disable.active ~ .gif-notice {
  animation: 1.5s notice-disable linear;
}
.gif-disable:not(.active) ~ .gif-notice {
  font-size: 0;
  animation: 1.5s notice-enable linear;
  right: 9%;
}
.tooltip-disable.active ~ .tooltip-notice {
  animation: 1.5s notice-disable linear;
}
.tooltip-disable:not(.active) ~ .tooltip-notice {
  font-size: 0;
  animation: 1.5s notice-enable linear;
  right: 9%;
}

.button-disable:not(.active) ~ .notification:before {
  font-size: 14px;
}
.gif-disable:not(.active) ~ .gif-notice:before {
  content: 'Гифки включены';
}
.tooltip-disable:not(.active) ~ .tooltip-notice:before {
  content: 'Подсказки включены';
}

@keyframes notice-disable {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

@keyframes notice-enable {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
Ответы

Нет комментариев

назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode