AZJIO
Silver Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Посмотрел я тут эффект анимации и подумал может мне кайму вокруг кнопки запустить по кругу, сделал следующий код:
Код: img {
animation: rotation 4s infinite alternate;
}
@for $i from 2 through 15 {
img:nth-child(#{$i}){
animation-delay: #{$i/4}s;
}
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
} |
Было смешно... картинки крутились!
А тут я пытался понять матрицу (можно вводить цифры и смотреть эффект на изображении). Сделал для кнопки следующее:
Код: img[src$="newmail.gif"] {
filter: invert(88%) url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="balance"><feColorMatrix type="matrix" values="1 0 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 0 0 1 0"/></filter></svg>#balance') !important;
} |
Тут я выделил цветом, какие нужно добавлять значения, чтобы повысить указанный цвет:
1 0 0 0 0 0 0.4 0 0 0 0 0 0.4 0 0 0 0 0 1 0
последняя единица - прозрачность
Жёлтый покрасивей красного
1 0 0 0 0 0 0.8 0 0 0 0 0 0 0 0 0 0 0 1 0
Если менять столбик "А" по таблице (прозрачность), то меняется фон.
Кажется понял, когда я ввожу единицу в столбике с "R", то он заменяется цветом который указан слева в этой строке, то есть если слева "B" то красный меняется на синий, а если слева "G", то красный меняется на зелёный и т.д.
Вот ещё интересное описание SVG-фильтров
Аналогичный эффект с помощью другой функции:
Код: img[src$="newmail.gif"] {
filter: invert(88%) url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="balance"> <feComponentTransfer><feFuncR type="linear" slope="1.0" /><feFuncG type="linear" slope="0.8" /><feFuncB type="linear" slope="0" /></feComponentTransfer></filter></svg>#balance') !important;
} |
и кажется она проще в вычислении, просто задаётся интенсивность каналов RGB |
Всего записей: 4411 | Зарегистр. 03-05-2006 | Отправлено: 04:45 02-09-2018 | Исправлено: AZJIO, 11:08 02-09-2018 |
|
