[Из песочницы] Простая анимация загрузки в Material Design (CSS3)
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body { -webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; -moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards; animation: body-opacity-change 1s ease-in-out 0s 1 forwards; opacity: 0; background-color: transparent; }/* WebKit (Safari и Chrome) */ @-webkit-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }/* Mozilla Firefox */ @-moz-keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; }}/* Общий синтаксис */ @keyframes body-opacity-change { from { opacity: 0; background-color: transparent; } to { opacity: 1; background-color: #1b1c2c; } }
Читать дальше →
Источник:
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
[Из песочницы] Адаптивная верстка с помощью SCSS и Gulp
Доброго времени суток, коллеги! Давно задавался вопросом, как оптимизировать и сделать более удобным код используя @media screen. Ибо код body{font-size: 1em;}@media screen and (max-width: 1024px){... читать далее
Анимации на GPU: делаем это правильно
Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform... читать далее
Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства
Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: < html > < style type ="text/css" > .hacked { width:auto; overflow: visible;... читать далее
Web-разработка / Ссылка Поддержка браузерами модели RGBa
Модель RGBa отличается от RGB тем, что позволяет дополнительно указать прозрачность цвета. Это тоже самое, что и привычное нам написание background и opacity. Но последнее делает прозрачным все... читать далее
Быстрая перекраска вещей на сайте
Существуют моменты когда необходимо предоставить пользователям выбор цвета какой либо вещи. Есть несколько способов выхода из этой ситуации. Здесь я покажу очень простой и незамысловатый способ... читать далее
Как сделать падающий снег на сайте (вариант 2)
Для всех тех, кто хочет видеть на своем сайте пдающий снег, но кому не подошел вариант описанный в новости "скрипт падающего снега для ДЛЕ" предлагаю к рассмотрению второй вариант. Он не требует... читать далее
Прокомментировать
Облако тегов
API CSS dle DLE13 habrahabr.ru HTML JavaScript ReactJS seo SEO на Хабрахабре trademod Блог компании PromoPult Блог компании RUVDS.com Веб-дизайн Интернет-маркетинг Поисковая оптимизация Поисковые технологии Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре Учебный процесс в IT автомобильный сайт блог верстка интернет-магазин информационный ресурс корпоративный сайт модуль мы рекомендуем плагин портфолио разработка сайтов редизайн сайт-визитка скрипты советы уроки шаблон эвердайм
Реклама на сайте diagonal drawing realistic on BJ Ambis Art