Переливающийся ник

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Активный
Регистрация
14 Апр 2024
Сообщения
812

CSS имени пользователя:

CSS:
font-weight: bold;
  font-family: arial black;
  color: #ffffff;
  display: inline-block;
  position: relative;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  -webkit-mask-size: 200%;
  animation: wave 2s infinite;

В extra.less:

CSS:
@-webkit-keyframes wave {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}

Результат:

video_2024-12-07_14-55-54.gif

 
Пользователь
Регистрация
1 Май 2024
Сообщения
68

CSS имени пользователя:

CSS:
font-weight: bold;
  font-family: arial black;
  color: #ffffff;
  display: inline-block;
  position: relative;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  -webkit-mask-size: 200%;
  animation: wave 2s infinite;

В extra.less:

CSS:
@-webkit-keyframes wave {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}

Результат:

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

годно
 
Пользователь
Регистрация
4 Май 2025
Сообщения
195

CSS имени пользователя:

CSS:
font-weight: bold;
  font-family: arial black;
  color: #ffffff;
  display: inline-block;
  position: relative;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
  -webkit-mask-size: 200%;
  animation: wave 2s infinite;

В extra.less:

CSS:
@-webkit-keyframes wave {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}

Результат:

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

Как сделать также, только чтобы и краска и ник переливались?
 
Профессионал
Регистрация
30 Ноя 2024
Сообщения
678
ссылку на галочку?
Вот:
CSS:
.username--style3:after{
font-family:"Font Awesome 5 Pro";
content:"\f336";
font-weight:600;
padding-right:1px;
display:inline-block
}
А также ознакомься с этими иконками, может пригодяться:
 
Пользователь
Регистрация
4 Апр 2025
Сообщения
107
Вот:
CSS:
.username--style3:after{
font-family:"Font Awesome 5 Pro";
content:"\f336";
font-weight:600;
padding-right:1px;
display:inline-block
}
А также ознакомься с этими иконками, может пригодяться:
мне на плагин а не код
 
Пользователь
Регистрация
5 Июл 2025
Сообщения
398
гугл иконки font awesome, в поиске check
 
Сверху