Реализация плашки при наводе на ник

[luciferrrr]

всем привет, хочу реализовать такое же как и на видео, но не знаю как. кто умеет - подскажите пожалуйста, видео ниже
тык на видео

 

[Lugunika]

Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера

@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

 

[luciferrrr]

Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера

@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

Посмотреть вложение 21586

к сожалению, не работает

 

[Lugunika]

к сожалению, не работает

сочувствую

 

[KeoFox]

Пора бы научиться пользоваться DevTools товарищ.
в @uid: 1; писать id юзера

@uid: 1;

@g-color1: hsl(194, 96%, 54%);
@g-color2: hsl(272, 71%, 37%);
@g-color3: hsl(0, 100%, 50%);
@g-gradient: linear-gradient(135deg, @g-color1, @g-color2, @g-color3, @g-color2, @g-color1);

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotate-gear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.username[data-user-id="@{uid}"],
.memberTooltip-header .username[data-user-id="@{uid}"],
.memberTooltip-banners .username[data-user-id="@{uid}"] {
  position: relative;
  display: inline-block;
  font-weight: 800 !important;
  background: @g-gradient !important;
  background-size: 300% 300% !important;
  animation: gradient-move 4s ease infinite !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 6px hsla(272, 71%, 37%, 0.5));
  text-decoration: none !important;

  &:hover {
    text-decoration: none !important;
  }

  &::before {
    content: "⚙";
    display: inline-block;
    margin-right: 5px;
    color: @g-color1 !important;
    -webkit-text-fill-color: initial !important;
    filter: drop-shadow(0 0 3px @g-color1);
    animation: rotate-gear 3s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: @g-gradient !important;
    background-size: 300% 300% !important;
    animation: gradient-move 4s ease infinite !important;
    transform: scaleX(0.3);
    transition: transform 0.35s ease;
    border-radius: 2px;
  }

  &:hover::after {
    transform: scaleX(1) !important;
  }
}

Посмотреть вложение 21586

так они телефонные разработчики, у них таких благ нету

 

[unloadmod]

так они телефонные разработчики, у них таких благ нету

OFFTOP

как минимум у меня есть. Конечно, пользоваться не очень удобно, но если под рукой нет пк пойдет

 

[Lugunika]

так они телефонные разработчики, у них таких благ нету

OFFTOP

Если видео его, то он с пк так-то

 

[KeoFox]

OFFTOP

Если видео его, то он с пк так-то

OFFTOP

а, ну я не смотрел что там у него, как то привык что здесь 90% юзеров не вкурсе о существовании ПК