Заполнение по кругу | CSS - «Учебник CSS»
Меню
Наши новости
Учебник CSS

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

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

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

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

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

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

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

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

Новости

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

Справочник CSS

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

Афоризмы

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

Видео Уроки


Видео уроки
Наш опрос



Наши новости

       
18-03-2016, 15:27
Заполнение по кругу | CSS - «Учебник CSS»
Рейтинг:

Lea Verou предложила конический градиент [w3.org]. Когда браузеры начнут его поддержку реализацию плавного заполнения вероятно можно будет сделать ещё интересней. Сейчас же нужно немного похимичить. И без overflow: hidden; не обойтись.


 


.button25 {
position: relative;
display: inline-block;
width: 50px;
height: 100px;
border: solid transparent;
border-width: 0 0 0 50px;
border-radius: 100px;
outline: none;
overflow: hidden;
-webkit-animation: background1 10s linear infinite;
animation: background1 10s linear infinite;
}
.button25:before {
content: "";
position: absolute;
left: -50px;
height: 100px;
border-right: 50px solid transparent;
border-left: 50px solid green;
border-radius: 100px;
-webkit-animation: rotate1 10s linear infinite;
animation: rotate1 10s linear infinite;
}
@-webkit-keyframes background1 {
49.999% {border-width: 0 0 0 50px; border-color: transparent;}
50%, 100% {border-width: 0 50px 0 0; border-color: green;}
}
@-webkit-keyframes rotate1 {
49.999% {left: -50px;}
50% {left: 0px;}
100% {-webkit-transform: rotate(360deg); left: 0px;}
}
@keyframes background1 {
49.999% {border-width: 0 0 0 50px; border-color: transparent;}
50%, 100% {border-width: 0 50px 0 0; border-color: green;}
}
@keyframes rotate1 {
49.999% {left: -50px;}
50% {left: 0px;}
100% {transform: rotate(360deg); left: 0px;}
}


 


Или так. Нажмите на зелёный круг.




.button26 {
position: relative;
display: inline-block;
width: 50px;
height: 100px;
border: solid green;
border-width: 0 0 0 50px;
border-radius: 100px;
outline: none;
overflow: hidden;
}
.button26:before {
content: "";
position: absolute;
left: -50px;
height: 100px;
border-left: 50px solid transparent;
border-right: 50px solid green;
border-radius: 100px;
}
.button26:focus {
-webkit-animation: background 10s linear forwards;
animation: background 10s linear forwards;
}
.button26:focus:before {
-webkit-animation: rotate 10s linear forwards;
animation: rotate 10s linear forwards;
}
@-webkit-keyframes rotate {
49.999% {left: -50px;}
50% {left: 0;}
100% {-webkit-transform: rotate(360deg); left: 0;}
}
@-webkit-keyframes background {
49.999% {border-width: 0 0 0 50px; border-color: green;}
50%, 100% {border-width: 0 50px 0 0; border-color: transparent;}
}
@keyframes rotate {
49.999% {left: -50px;}
50% {left: 0;}
100% {transform: rotate(360deg); left: 0;}
}
@keyframes background {
49.999% {border-width: 0 0 0 50px; border-color: green;}
50%, 100% {border-width: 0 50px 0 0; border-color: transparent;}
}




Я всё же нашла видео выступления Юлии Липницкой в хорошем качестве. Девчушка катается выше всех похвал!


Lea Verou предложила конический градиент _

Теги: CSS, {49.999% {left: {border-width: border-color: 50px

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

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



Другие новости по теме:
Комментарии для сайта Cackle