Быстрый поиск
Введите фрагмент названия статьи для поиска
Эффект "кругов на воде" на чистом 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>
Читать статью целиком »
Просмотров: 474 | Комментариев: 0
Эффект блика в предзагрузке на CSS
07.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект блика в предзагрузке на CSS
Если вы пользуетесь мобильными банковскими приложениями, приложениями маркетов и всяким подобным, наверняка видели такой эффект, когда данные еще не загрузились, а на экране уже отобразилась схематическая раскладка страницы с плейсхолдерами ее элементов. И для визуальной имитации, что приложение еще не окончательно зависло, по плейсхолдерам периодически пробегают анимированные блики. Я решил реализовать нечто подобное для web-страничек. За основу взят код из предыдущей статьи.
Читать статью целиком »
Просмотров: 331 | Комментариев: 0
Вставка изображения из буфера обмена на JavaScript
17.08.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Вставка изображения из буфера обмена на JavaScript
В интернетах популярны различные хостинги картинок, на некоторых из них есть возможность вставки изображений из буфера обмена для последующей загрузки. Это весьма интересная и полезная функция, так что мне, естественно, стало любопытно, как это делается.
Читать статью целиком »
Просмотров: 488 | Комментариев: 0
Прогрессбар с анимированным градиентом на CSS
19.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Прогрессбар с анимированным градиентом на CSS
Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.
Читать статью целиком »
Просмотров: 250 | Комментариев: 0
Исследование защиты программы phpDesigner
06.04.2024 | Категория: Темная сторона Силы | Автор: ManHunter
Скриншот программы phpDesigner
phpDesigner - интегрированная среда разработки для начинающих и профессиональных web-программистов. Поддерживает синтаксис основных языков web-программирования, отладку, системы контроля версий, фреймворки, проверку синтаксиса, таблицы стилей и многое-многое другое. Без регистрации работает ограниченное время, после чего требует покупки. Но, как говорится в старом анекдоте, "перебьетесь" пишется с мягким знаком.
Читать статью целиком »
Просмотров: 439 | Комментариев: 1
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 36,055 раз
Поблагодарили 36,055 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |