Я хочу добавить исчезающие цветные «капли» - PNG слишком велик, любая альтернатива? - PullRequest
Новая
       0

Я хочу добавить исчезающие цветные «капли» - PNG слишком велик, любая альтернатива?

0 голосов
/ 12 сентября 2011

Я хочу сделать приятный эффект, который бы делал что-то вроде этого: enter image description here

Пока что я сделал отдельный слой в фотошопе для каждого цвета, и я хочу, чтобы они постепенно исчезали и исчезали.,Проблема, однако, в том, что каждый блоб имеет размер около 140 КБ, если я использую PNG.Есть ли лучшая альтернатива, например, сделать это в векторе и размывать в jquery?Спасибо:))

Ответы [ 2 ]

1 голос
/ 12 сентября 2011

Несколько минут работы ниже, но я все еще не считаю это лучшим решением ... Я преодолел проблему размытия с помощью простого градиента - быстрее ... Затухание должно быть JavaScripted. 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,255);stop-opacity:0" />
    </radialGradient>
    <radialGradient id="grad4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:0" />
    </radialGradient>
  </defs>  
  <rect width="100%" height="100%"  style="fill:gray;stroke-width:1;stroke:rgb(0,0,0)" />

  <circle cx="300" cy="200" r="300"  fill="url(#grad1)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </circle>
  <circle cx="700" cy="600" r="200"  fill="url(#grad2)" >
    <animate attributeType="CSS" attributeName="opacity" from="0" to="1" dur="2s" repeatCount="indefinite" />
  </circle>
  <circle cx="100" cy="400" r="150"  fill="url(#grad3)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="3s" repeatCount="indefinite" />
  </circle>
  <circle cx="400" cy="700" r="500"  fill="url(#grad4)" >
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="7s" repeatCount="indefinite" />
  </circle>

</svg>
1 голос
/ 12 сентября 2011

Jep.

Посмотрите на SVG. Никаких изображений, браузер отображает их

SVG поддерживает анимацию (декларативную) и полную поддержку сценариев JavaScript (используя тот же доступ DOM, что и для html).

Обратите внимание, что упомянутая поддержка браузера выглядит устаревшей. Многие продвинутые демоверсии SVG работают безупречно в моем браузере Opera

Размытие 

<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>

Градиенты 

<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:0" />
      <stop offset="1000%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

</body>
</html>

Исчезновение (анимация) 

<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...