Еженедельная подборка красивых эффектов на CSS/SVG/JS #71 — CSS-LIVE
Подборка свежих эффектов, интересных идей и полезных наработок.
«Волк Шредингера»
Кликом справа или слева вы изменяете ширину синего блока.
Технологии: CSS, CSS-анимация, CSS-трансформации, transition, mo.js (Motion Graphics for the Web).
Автор: Jean (@jeankvd)
Посмотреть живой пример
Одинокое дерево
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)
Посмотреть живой пример
Плавный скролл и «прилипающее» меню
Технологии: CSS-трансформации, JS, jQuery.js.
Автор: Правейн Бишт (@prvnbist)
Посмотреть живой пример
«Конструктор» гамбургера
Ссылками в левой части добавляете ингридиенты, потом кнопкой «Order» вы «Заказываете» гамбургер.
Технологии: SVG, CSS, Vue.js, Anime.js.
Автор: Тиффани Чхонг (@tiffachoo)
Посмотреть живой пример
CSS-портрет со сменой прически
Навигацией слева можно менять волосы.
Технологии: CSS-анимация, CSS-трансформации.
Автор: white pallet (@WhitePallet)
Посмотреть живой пример
Бесконечный туннель
Наведением курсора можно менять направление обзора.
Технологии: GLSL, JS.
Автор: Лиам Эган (@shubniggurath)
Посмотреть живой пример
Блокноты Moleskine
Анимация при наведении.
Технологии: CSS.
Автор: Оливия (@oliviale)
Посмотреть живой пример
Бесконечность
Технологии: CSS, GLSL, Three.js.
Автор: Лиам Эган (@shubniggurath)
Посмотреть живой пример
Текст и рамка
Текст внизу можно менять. Длина рамки будет тоже соответственно уменьшаться или увеличиваться.
Технологии: CSS-гриды.
Автор: Дэвид Дарнс (@daviddarnes)
Посмотреть живой пример
Интересный дизайн фото и текста
Можно наводить курсором на текст и фото.
Автор: Lisi (@lisilinhart)
Посмотреть живой пример
Бегущий человечек на CSS
Технологии: CSS, CSS-анимация, CSS-трансформации.
Автор: Юсуке Накая (@YusukeNakaya)
Посмотреть живой пример
Текст из молнии
Внизу есть поле для ввода. Туда можно ввести свой текст.
Технологии: canvas, JS.
Автор: Во Хай Данг (@haidang)
Посмотреть живой пример
Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.
P.S. Это тоже может быть интересно:
- Canvas, CSS, CSS3, HTML, JavaScript, JSS, SVG, анимация
Последние новости
Последние новости
Последние комментарии
Последние комментарии
Поддержите проект
CSS учебник
CSS3 анимация — вдохновение для веб-разработчиков.
С ее помощью можно создавать эффекты, которые раньше воспроизводились с помощью скрипта и с использованием графических редакторов.
Создание анимации в CSS3 — увлекательный процесс. С помощью несложных манипуляций и, главное, без использования скриптов, можно перемещать и скрывать html-элементы, изменять их размеры, цвет, создавать реалистичные объемные эффекты, анимируя тень элемента, и многое другое.
1. Правило @keyframes
CSS3-анимация состоит из двух компонентов: сначала идет объявление@keyframes, которое затем используется в свойстве animation элемента.
Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.
Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно.
Синтаксис
@-webkit-keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
Теперь, объявив @keyframes, мы можем ссылаться на него в свойстве animation:
h2 {
font-size: 3.5em;
color: darkmagenta;
-webkit-animation: shadow 2s infinite ease-in-out;
animation: shadow 2s infinite ease-in-out;
}
2.
Название анимации
Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.
Синтаксис
div {
-webkit-animation-name: mymove;
animation-name: mymove;
}
3. Длительность анимации
Свойство устанавливает длительность анимации, например:
animation-duration: 1s;.Не наследуется.
| animation-duration | |
|---|---|
| Значения: | |
| время (s / ms) | Длительность анимации задается в секундах или миллисекундах. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
4.
Временная функция
Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. Задается при помощи ключевых слов или кривой Безье cubic-bezier(x1, y1, x2, y2). Не наследуется.
| animation-timing-function | |
|---|---|
| Значения: | |
| ease | Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1). |
| linear | Анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует |
| ease-in | Анимация начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1). |
| ease-out | Анимация начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1). |
| ease-in-out | Анимация медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1). |
| cubic-bezier(x1, y1, x2, y2) | Позволяет вручную установить значения от 0 до 1.На этом сайте вы сможете построить любую траекторию скорости изменения анимации. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
- ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier()
5. Анимация с задержкой
Свойство игнорирует анимацию заданное количество времени, что дает возможность по отдельности запускать каждую анимацию.
| animation-delay | |
|---|---|
| Значения: | |
| время (s / ms) | Длительность анимации задается в секундах или миллисекундах. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
Пример
6. Повтор анимации
Свойство позволяет запустить анимацию несколько раз.
Значение 0 или любое отрицательное число удаляют анимацию из проигрывания. Не наследуется.
| animation-iteration-count | |
|---|---|
| Значения: | |
| число | С помощью целого числа задается количество повторов анимации. |
| infinite | Анимация проигрывается бесконечно. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
}
7. Направление анимации
Свойство задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.
| animation-direction | |
|---|---|
| Значения: | |
| alternate | Анимация проигрывается с начала до конца, затем в обратном направлении. |
| alternate-reverse | Анимация проигрывается с конца до начала, затем в обратном направлении. |
| normal | Значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца. |
| reverse | Анимация проигрывается с конца. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: normal;
animation-direction: reverse;
8.
Краткая запись анимации
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation, перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
9. Проигрывание анимации
Свойство позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект. Состояние :hover, например:
h2:hover {animation-play-state: paused;} Не наследуется.
| animation-play-state | |
|---|---|
| Значения: | |
| paused | Останавливает анимацию. |
| running | Значение по умолчанию, означает проигрывание анимации. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
10. Состояние элемента до и после воспроизведения анимации
Свойство определяет порядок применения определенных в @keyframes стилей к объекту. Не наследуется.
| animation-fill-mode | |
|---|---|
| Значения: | |
| none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
| forwards | Воспроизводит анимацию до последнего кадра по окончанию последнего повтора и не отматывает ее к первоначальному состоянию. |
| backwards | Возвращает состояние элемента после загрузки страницы к первому кадру, даже если установлена задержка animation-delay, и оставляет его там, пока не начнется анимация. |
| both | Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации. |
| inherit | Наследует это свойство от родительского элемента. |
Синтаксис
div {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
11. Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}
Поддержа браузерами
IE: 10.0
Firefox: 5.0 -moz-
Chrome: 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.0 -o-
iOS Safari: 7.1 -webkit-
Opera Mini: —
Android Browser: 4.
1 -webkit-
Chrome for Android: 44
Эффекты W3.CSS
❮ Назад Следующее ❯
Нормальный
W3-OPACEY
W3-GRAYSCALE-MAX
W3-SEPIA-MAX
W3.CSS Классы эффектов
W3.CSS Предоставляет следующие классы эффектов:
| Class | .Определяет |
|---|---|
| w3-непрозрачность | Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,6) |
| w3-непрозрачность-мин | Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,75) |
| w3-непрозрачность-макс | Добавляет непрозрачность/прозрачность элементу (непрозрачность: 0,25) |
| w3-оттенки серого | Добавляет эффект оттенков серого к элементу (оттенки серого: 75%) |
| w3-оттенки серого-мин | Добавляет эффект оттенков серого к элементу (оттенки серого: 50%) |
w3-оттенки серого-макс. | Добавляет эффект оттенков серого к элементу (оттенки серого: 100%) |
| w3-сепия | Добавляет элементу эффект сепии (сепия: 75%) |
| w3-сепия-мин | Добавляет элементу эффект сепии (сепия: 50%) |
| w3-сепия-макс | Добавляет элементу эффект сепии (сепия: 100%) |
| w3-hover-opacity | Добавляет прозрачность элементу при наведении (непрозрачность: 0,6) |
| w3-hover-оттенки серого | Добавляет эффект оттенков серого к элементу при наведении (оттенки серого: 100%) |
| w3-наведение-сепия | Добавляет эффект сепии к элементу при наведении |
Непрозрачность
Классы W3-OPACEY Добавлены прозрачность к элементу:
Нормальный
W3-OPACEY-MIN
W3-OPACEY
W3-EPACE-MAX
Пример
Пример
grg-max. =»изображение.jpg»>
Попробуйте сами »
Классы GreyScale
Классы W3-GrayScale Добавьте эффект серого к элементу:
Нормальный
W3-Grayscale-Min
W3-Grayscale
W3-GrayScale-Min
W3-GrayScale-Min. источник = «изображение.jpg»>
Попробуйте сами »
Примечание: Классы оттенков серого w3 не поддерживаются в IE 11 и более ранние версии.
SEPIA
Классы W3-Sepia Добавлены эффект SEPIA к элементу:
Нормальный
W3-Sepia-Min
W3-Sepia
W3-Sepia-Min
W3-Sepia-Max
. источник = «изображение.jpg»>
jpg»>Попробуйте сами »
Примечание. Классы w3-sepia не поддерживаются в IE 11 и более ранние версии.
Эффекты наведения
Вы также можете добавить специальные эффекты при наведении курсора мыши.
w3-hover-opacity
w3-hover-оттенки серого
w3-hover-sepia
Пример
Попробуйте сами »
Hover Opacity Color
Вы также можете комбинировать любые классы w3-hover-color с w3-hover-opacity , чтобы создать слегка «более светлый» цвет фона при наведении:
w3-hover-red
w3-hover-red с w3-hover-opacity
Пример
w3-hover-red с w3-hover-opacity
Попробуйте сами »
❮ Предыдущая Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
Справочник по HTMLСправочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
2 Top0 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Бары W3.CSS
❮ Предыдущий Next ❯
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
London
Paris
Tokyo
Horizontal Bars
Horizontal bars are common элементы веб-дизайна:
Лондон
Париж
Токио
Класс w3-bar используется для оформления горизонтальной полосы:
Пример
Попробуй сам »
Целью класса w3-bar-item является обеспечение правильного интервала, заполнения и позиционирования.
Вертикальные перекладины
Вертикальные полосы (боковые панели) также распространены в веб-дизайне:
Лондон
Париж
Токио
Класс w3-bar-block используется для оформления вертикальной полосы:
Пример
4Попробуй сам »
Цвета полос
Вы можете использовать любой цвет для оформления полосы:
Лондон
Paris
Tokyo
Лондон
Paris
Tokyo
Лондон
Paris
Tokyo
Лондон
Toky
.
/div> 
CSS 
