Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Популярные статьи
Наш опрос



РЕКЛАМА


ВАША РЕКЛАМА
18-03-2016, 15:17
Анимация иконки загрузки | CSS - «Учебник CSS»
Рейтинг:
Категория: Учебник CSS
 


 


.loading1 {
width: 0;
padding: 12px;
background-image:
radial-gradient(circle at 0% 0%, transparent 40%, rgb(0,255,0) 40%, rgb(0,255,0) 70%, transparent 70%),
radial-gradient(circle at 100% 0%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),
radial-gradient(circle at 100% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%),
radial-gradient(circle at 0% 100%, transparent 40%, rgba(0,255,0,.2) 40%, rgba(0,255,0,.2) 70%, transparent 70%);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: 100% 100%, 0 100%, 0 0, 100% 0;
-webkit-animation: loading1 linear .7s infinite;
animation: loading1 linear .7s infinite;
}
@-webkit-keyframes loading1 {
100% {-webkit-transform: rotate(360deg);}
}
@keyframes loading1 {
100% {transform: rotate(360deg);}
}

 

Или создать благодаря border и animation

 


.loading2 {
width: 15px;
height: 15px;
border: 5px solid #ccffcc; /* полупрозрачный цвет ставить не стоит, появляются ненужные линии */
border-top-color: rgb(0,255,0);
border-radius: 100%;
-webkit-animation: loading2 linear .7s infinite;
animation: loading2 linear .7s infinite;
}
@-webkit-keyframes loading2 {
100% {-webkit-transform: rotate(360deg);}
}
@keyframes loading2 {
100% {transform: rotate(360deg);}
}

 

Теги: CSS transparent 40% rgba(0 255 .2) 100% loading1

Просмотров: 1 836
Комментариев: 0:   18-03-2016, 15:17
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:



Другие новости по теме: