Флешинг для загрузки Android Holo в CSS

Ответ 1

Я тоже не могу сделать это без изображений.

Мне удалось сделать истинную репликацию голограммы Holo как определено в AOSP, всего двумя изображениями для outer и inner. Здесь скрипка.

Проблема состоит в том, что эти два изображения имеют "полярный" градиент: они начинаются с одного цвета при 0 °, который постепенно смещается во второй цвет при движении по кругу. Там резкое изменение цвета на 0 °, где встречаются два цвета. Я не знаю, есть ли способ создать такой градиент в CSS, используя только linear-gradient или radial-gradient s.

ОБНОВЛЕНИЕ Я работал без изображений, yay! Проверьте скрипт.

I аппроксимировал каждый полярный градиент, используя две половины линейного градиента. Некоторые недостатки этого подхода:

• Затухание цвета не является совершенным. Цвета исчезают вдоль вертикальной оси, а не вдоль угла.
• Там есть небольшой сбой, где две половины встречаются внизу, так как они дают несколько разные цвета точкам на одной и той же горизонтальной линии. Это становится более заметным по мере увеличения ширины штриха счетчика.

Для маленьких прядильщиков - который является обычным прецедентом - он отлично работает и выглядит великолепно!

Ответ 2

Demo

http://jsfiddle.net/7cGc3/4/

Я могу получить прядильный эффект с чистым CSS. Возможны более сложные эффекты (см. Ниже), но ограничивающим фактором является то, что этот метод основан на прямоугольной области отсечения.

_{Вы должны увидеть это (анимированное, конечно) в Chrome, IE10, FF. IE9 выглядит правильно, но не будет анимировать. Safari нуждается в слегка измененной версии.}

Песочница для более сложных эффектов (только для webkit, больше похоже на принятый ответ): http://jsfiddle.net/7cGc3/5/

код

_{Префикс поставщика опущен для краткости.}

HTML

HTML чрезвычайно прост.

<div class="spinner"></div>

CSS

Важными здесь являются граничный радиус, обрезка и анимация.

.spinner{
    width: 100px;
    height: 100px;
    border-radius: 54px;
    border: 4px solid #999;
    position: relative;
}

.spinner:after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    border: 4px solid #fff;
    border-radius: 54px;
    height: 100px;
    width: 100px;
    clip: rect(0px, 60px, 50px, 0px);

    animation: rotate 2s;  
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}