Создание анимаций

Murasaki RenkoвCSS-club – настройка внешнего вида сайта

17 марта 2017

Комментарии

Лягуха26 апреля 2019#

дроу, что не так с этим кодом? я хочу, чтобы при наведении на элемент курсором начиналась анимация, где масштаб предмета увеличивался, но код, почему то, не работает( хелп

@keyframes a, hover, before, after, active, .popup li, .input input, .submenu .menu-search, .entry, .userbox, .cover, .title, .add-trigger, .remove-trigger, .trigger-arrow, .trigger, .text, .option, .edit, .watching, .rewatching, .close, .expand span, .plus, .b-tooltipped, input, .preview, .unpreview, .value, .div, .slide, .b-to-top, .leave, .invite, .upload, .invite span, .b-spoiler label, .b-poster, .off, .item-ignore, .item-reply, .b-comments-notifier, .comments-loader, .click-loader { 
  0% { transform: scale(0px); }
  50% {transform: scale(3px); }
  100% {transform: scale(0px); }
}

@grin3671

grin367126 апреля 2019#

@Лягуха, к списку селекторов ты добавляешь свойство animation о значением название-анимации, а в @keyframes указываешь название-анимации, а не список селекторов.
Перечитай заново статью. Перейди по свойствам-ссылкам, узнай о синтаксисе поподробнее, если так не понятно.
Кроме того, в scale() указывают числа: 1.10 или 0.5 и т.п.

@Лягуха

Лягуха27 апреля 2019#

@grin3671, о, спасибо

_Rikki_28 сентября 2020#

после "0" пропущен знак "%" из-за чего код не работает

.p-profiles .profile-head .c-brief .avatar>img:hover {
   border-radius: 0;
}

Гуманоидный Тайфун28 марта 2021#

Можете подсказать, как изменить форму самой аватарки, хотел бы с круга изменить по крайней мере на прямоугольник или под форму самого изображения

@KIONIS, @KIONIS

KIONIS 9 апреля 2021#

@Гуманоидный Тайфун, если хочешь чтобы аватарка была квадратная, просто напиши: border-radius: 0;
чтобы были измененя при наведении например поставь псевдокласс :hover{} и внутри кавычек напиши что хочешь, например чтобы аватарка становилась круглой, :hover{border-radius:50%;}

@Капута

KIONIS 9 апреля 2021#

@Гуманоидный Тайфун, просто чтобы сделать аватарку квадратной напиши:
.p-profiles .profile-head .c-brief .avatar>img {
border-radius: 0;
}

@🦋𝒷.𝓊.𝓉.𝓉.ℯ.𝓇.𝒻.𝓁.𝓎🦋

🦋𝒷.𝓊.𝓉.𝓉.ℯ.𝓇.𝒻.𝓁.𝓎🦋24 июня 2021#

@KIONIS, подскажите как сделать аватарку по центру ?

Капута13 августа 2021#

@KIONIS, у меня видимо руки из одного места, ибо с аватаркой ничего не происходит

Animestree27 декабря 2021#

как аву анимировануб сделать?

@quee

quee20 марта 2022#

@Animestree,
вот код для плавающей аватарки:
.p-profiles .profile-head .c-brief .avatar img {
animation: fly 3s ease-in-out infinite;
}

@keyframes fly {
0% {
transform: translateY(0);
}
50% {
transform: translateY(12px);
}
}

KisasPisas20 августа 2022#

ребят, подскажите, пожалуйста, хочу сделать анимированный ник в стиле glitch, но анимация вообще не ложится на ник нормально, только в определенном месте и квадратиком

@🇷Ϻ🇩, @grin3671

🇷Ϻ🇩 2 октября 2022#

KisasPisas
анимация вообще не ложится на ник нормально, только в определенном месте и квадратиком

Поковыряйся с масштабом.
Ну или, если не прокатит - погугли, что-нить на подобии: отображение картинки за рамками элемента css

Жанетка Не скажу30 декабря 2022#

когда просто захотел изменить дизайн профиля, а стал программистом хD

@EngiNier

grin367130 декабря 2022#

@KisasPisas,

спойлер

#profiles_show .profile-head .c-brief header h1.aliases {
  --margin: 5px;
  position: relative;
  color: #fff;
  padding: 0 var(--margin);
  margin-left: calc(var(--margin) * -1);
  overflow: hidden;
  display: inline-block;
  width: auto;
  height: auto;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

#profiles_show .profile-head .c-brief header h1.aliases::before,
#profiles_show .profile-head .c-brief header h1.aliases::after {
  content: 'KisasPisas' !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: inherit !important;
  margin: 0 !important;
  background: black !important;
  color: white !important;
  font: inherit !important;
  line-height: inherit !important;
  overflow: hidden !important;
}

#profiles_show .profile-head .c-brief header h1.aliases::before {
  left: 3px !important;
  text-shadow: -2px 0 red !important;
  animation: glitch--1 2s linear reverse infinite !important;
}
#profiles_show .profile-head .c-brief header h1.aliases::after {
  left: -3px !important;
  text-shadow: -2px 0 blue !important;
  animation: glitch--2 2s linear reverse infinite !important;
}

@keyframes glitch--1 {
  0% { clip: rect(102px, auto, 101px, var(--margin)); }
  5% { clip: rect(-13px, auto, 94px, var(--margin)); }
  10% { clip: rect(10px, auto, 66px, var(--margin)); }
  15% { clip: rect(57px, auto, 82px, var(--margin)); }
  20% { clip: rect(107px, auto, 61px, var(--margin)); }
  25% { clip: rect(4px, auto, 14px, var(--margin)); }
  30% { clip: rect(103px, auto, 74px, var(--margin)); }
  35% { clip: rect(36px, auto, 107px, var(--margin)); }
  40% { clip: rect(29px, auto, 130px, var(--margin)); }
  45% { clip: rect(-1px, auto, 84px, var(--margin)); }
  50% { clip: rect(-8px, auto, 67px, var(--margin)); }
  55% { clip: rect(37px, auto, 62px, var(--margin)); }
  60% { clip: rect(-20px, auto, 105px, var(--margin)); }
  65% { clip: rect(48px, auto, 115px, var(--margin)); }
  70% { clip: rect(75px, auto, 13px, var(--margin)); }
  75% { clip: rect(-15px, auto, 75px, var(--margin)); }
  80% { clip: rect(36px, auto, 39px, var(--margin)); }
  85% { clip: rect(103px, auto, 73px, var(--margin)); }
  90% { clip: rect(6px, auto, 128px, var(--margin)); }
  95% { clip: rect(38px, auto, 103px, var(--margin)); }
  100% { clip: rect(-16px, auto, 100px, var(--margin)); }
}

@keyframes glitch--2 {
  0% { clip: rect(99px, auto, 36px, var(--margin)); }
  5% { clip: rect(6px, auto, 4px, var(--margin)); }
  10% { clip: rect(55px, auto, 66px, var(--margin)); }
  15% { clip: rect(61px, auto, 91px, var(--margin)); }
  20% { clip: rect(118px, auto, 138px, var(--margin)); }
  25% { clip: rect(8px, auto, 122px, var(--margin)); }
  30% { clip: rect(39px, auto, 54px, var(--margin)); }
  35% { clip: rect(68px, auto, 71px, var(--margin)); }
  40% { clip: rect(116px, auto, 34px, var(--margin)); }
  45% { clip: rect(104px, auto, 43px, var(--margin)); }
  50% { clip: rect(72px, auto, 80px, var(--margin)); }
  55% { clip: rect(89px, auto, 44px, var(--margin)); }
  60% { clip: rect(76px, auto, 99px, var(--margin)); }
  65% { clip: rect(111px, auto, 74px, var(--margin)); }
  70% { clip: rect(-10px, auto, 78px, var(--margin)); }
  75% { clip: rect(103px, auto, 79px, var(--margin)); }
  80% { clip: rect(48px, auto, 52px, var(--margin)); }
  85% { clip: rect(5px, auto, 39px, var(--margin)); }
  90% { clip: rect(37px, auto, 70px, var(--margin)); }
  95% { clip: rect(41px, auto, 103px, var(--margin)); }
  100% { clip: rect(53px, auto, 40px, var(--margin)); }
}

EngiNier 1 января 2023#

@Жанетка Не скажу, жиза. Со мной так и стало, ну только скорее шики дизайнил от того что от белого глаза на лоб вылазили. Но шики это офигенная площадка для экспериментов с стилями.

@Жанетка Не скажу

Жанетка Не скажу 1 января 2023#

@EngiNier, да++ такая же история про белое оформление) я когда открыла, первая мысль это никуда не годится. тогда еще аниме можно было прям в шики смотреть) до слез, хорошие времена были.

@EngiNier

EngiNier 2 января 2023#

@Жанетка Не скажу, Я из-за того что аниме тут смотрел поэтому и сидел. Так четко отдизайнил плеер, эээх. Было здорово...
С уходом плеера почти и сам исчез)

@Жанетка Не скажу

Жанетка Не скажу 2 января 2023#

@EngiNier, а я смотрю через браузер встроенный шики.

Ruslan Sabadash10 февраля 2023#

Всём привет! Кто может мне помочь?Просто не знаю где анимацию в код поставить?И надо ссылку анимацию поставить или что гифку? Простите за глупые вопросы,если все ответы есть в этому клубе то снова простите....Просто хочу быстро себе анимированную аватарку сделать!

Твой комментарий