Эффект Starburst применим в CSS3?

Ответ 1

Нет. К сожалению, сгенерированные изображения css3 не включают в себя конические / angular градиенты (хотя они могут появиться в следующей редакции!), Что было бы наиболее вероятным способом сделать это, используя только css. Однако вы можете сделать это, используя css + svg. У меня на самом деле был этот документ svg, сидящий вокруг из эксперимента, который я сделал один раз:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="512px" height="512px" viewBox="-256 -256 512 512"
  xmlns="http://www.w3.org/2000/svg" version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Burst</title>
<defs>
  <g id="burst">
    <g id="quad">
      <path id="ray" d="M0,0 -69,-500 69,-500 z" />
      <use xlink:href="#ray" transform="rotate(30)"/>
      <use xlink:href="#ray" transform="rotate(60)"/>
      <use xlink:href="#ray" transform="rotate(90)"/>
    </g>
    <use xlink:href="#quad" transform="rotate(120)"/>
    <use xlink:href="#quad" transform="rotate(240)"/>
  </g>
  <radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" stop-color="white" stop-opacity="0.65"/>
    <stop offset="100%" stop-color="black" stop-opacity="0.65"/>
  </radialGradient>
  <!-- a circle mask -->
  <mask id="m"><circle r="256" fill="white"/></mask>
</defs>
<!-- added a mask and scaled it to a different aspect ratio below. scale(x,y) -->
<g mask="url(#m)" transform="scale(1, 0.75)"> 
  <use xlink:href="#burst" fill="lightslateblue"/>
  <use xlink:href="#burst" fill="darkslateblue" transform="rotate(15)"/>
  <circle r="360px" fill="url(#grad)" />
</g>
</svg>

Установите это как фоновое изображение и установите css background-size: cover. Это. Здесь скрипка, использующая это изображение в URL-адресе данных.

Ответ 2

Да, возможно.

У меня был такой же вопрос пару месяцев назад, и я не мог найти примеров такого эффекта, выполняемого с помощью чистого CSS. Итак, я решил заняться этим.

После большого количества экспериментов я наконец придумал решение, которое не только было в CSS, но и довольно переносимым (относительно говоря).

Я начал с создания только верхней половины и нижней половины отдельно, используя обход линейного градиента на псевдонимах ::before и ::after, а второй шаг (который, безусловно, был самым трудоемким шагом) слияние двух половин в один элемент.

Рабочая демонстрация: http://codepen.io/pestbarn/pen/aBybeK

(оригинальный плакат хотел получить эффект виньетки, который я создал отдельно в приведенном выше демо, используя оверлей div с радиальным градиентом)

Я предоставил как ванильный CSS, так и Sass mixin на github.com/pestbarn/starburst.css, и вы найдете несколько примеров на официальной демонстрации стр.

Этот кросс-браузер?

Насколько я могу судить, да. Вы можете увидеть текущую поддержку браузера в репозитории.

Могу ли я его анимировать?

Да, например, вы будете анимировать любые другие элементы. Попробуйте сами!

Есть ли какие-либо оговорки?

Увы, есть. Использование двух цветов, существенно отличающихся от другого (например, яркости), создаст зубчатые края. Поэтому я рекомендую использовать цвета, которые очень похожи друг на друга.

Кроме того, поскольку эффект создается с использованием псевдоэлементов, вам в некоторых случаях необходимо явно задать высоту и ширину элемента.

Не стесняйтесь экспериментировать!

Ответ 3

Существует экспериментальное свойство проект для CSS4 Lea Verou:

div
{
    repeating-conical-gradient(black, black 5%, #f06 5%, #f06 10%)
}

Но, насколько я понимаю, это всего лишь предложение и невозможно в CSS3. Просто придерживайтесь фонового изображения, или вы можете попробовать использовать треугольные изображения во вращающихся элементах.