Быстрый поиск
Введите фрагмент названия статьи для поиска
Эффект "кругов на воде" на чистом CSS
25.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Мне определенно нравятся анимированные эффекты, которые можно сделать вообще без скриптов, используя только чистый CSS. Сегодня это будет эффект расходящихся кругов на воде. С его помощью можно сделать акцент на каком-нибудь элементе страницы, визуально выделить информационный блок или другую область.Начинаем с описания модели анимации и создания соответствующей таблицы стилей. Модель будет следующая. В контейнере заданного размера будут размещаться абсолютно позиционированные блоки с "кругами на воде" в нужном количестве и нужных цветов.
Code: Убрать нумерацию
- <style type="text/css">
- .water {
- position: relative;
- display: inline-block;
- }
- .ripple1, .ripple2, .ripple3, .ripple4 {
- position: absolute;
- border-radius: 20px;
- left: -20px;
- right: -20px;
- top: -20px;
- bottom: -20px;
- opacity: 0;
- animation: water 4s linear infinite;
- }
- .ripple1 {
- border: 2px solid #909090;
- animation-delay: 0s;
- }
- .ripple2 {
- border: 2px solid #FF0000;
- animation-delay: 1s;
- }
- .ripple3 {
- border: 2px solid #0000FF;
- animation-delay: 2s;
- }
- .ripple4 {
- border: 2px solid #00FF00;
- animation-delay: 3s;
- }
- @keyframes water {
- 0% {
- transform: scale(0.6);
- opacity: 0;
- }
- 33% {
- transform: scale(0.8);
- opacity: 0.8;
- }
- 66% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
- }
- </style>
Читать статью целиком »
Просмотров: 445 | Комментариев: 0
Эффект блика в предзагрузке на CSS
07.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект блика в предзагрузке на CSS
Если вы пользуетесь мобильными банковскими приложениями, приложениями маркетов и всяким подобным, наверняка видели такой эффект, когда данные еще не загрузились, а на экране уже отобразилась схематическая раскладка страницы с плейсхолдерами ее элементов. И для визуальной имитации, что приложение еще не окончательно зависло, по плейсхолдерам периодически пробегают анимированные блики. Я решил реализовать нечто подобное для web-страничек. За основу взят код из предыдущей статьи.
Читать статью целиком »
Просмотров: 318 | Комментариев: 0
Прогрессбар с анимированным градиентом на CSS
19.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Прогрессбар с анимированным градиентом на CSS
Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.
Читать статью целиком »
Просмотров: 232 | Комментариев: 0
Групповой выбор checkbox'ов на JavaScript
01.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Групповой выбор checkbox'ов на JavaScript
В некоторых пользовательских интерфейсах в рабочих проектах приходится сталкиваться с длинными таблицами. Одна из колонок в такой таблице - чекбокс, которым отмечаются строки, с которыми надо выполнить то или иное действие. При выборе пары-тройки чекбоксов проблем не возникает, один клик - один чекбокс. В шапке колонки есть мастер-чекбокс, с помощью которого можно отметить все или снять все галочки. А вот при необходимости отметить не все, но просто большое количество чекбоксов начинаются сложности. По одному делать это долго. Но ведь даже в стандартном Проводнике есть возможность выбирать последовательность файлов, отмечая чекбоксы с зажатой клавишей Shift. Такая идея мне понравилась и я перенес ее на веб-страницы.
Читать статью целиком »
Просмотров: 426 | Комментариев: 9
Открывающийся текст (спойлер) на CSS и JavaScript
03.03.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Открывающийся текст (спойлер) на CSS и JavaScript
Слово "спойлер" в современном интернете чаще всего используется в значении некой информации, которая заранее раскрывает важный сюжетный поворот или какую-то ключевую суть повествования. В публикациях спойлеры обычно делают в виде раскрывающегося текста, "аккордеона", с использованием тегов <details> / <summary> и другими способами. Сейчас в мессенджерах и на многих информационных сайтах спойлеры оформляют в виде размытого текста, который открывается при клике на него. Давайте тоже сделаем что-нибудь подобное.
Читать статью целиком »
Просмотров: 900 | Комментариев: 1
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,983 раза
Поблагодарили 35,983 раза
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |