css3逼真水珠水滴特效代码下载


css3逼真水珠水滴特效代码下载
css3逼真水珠水滴特效代码下载以及逼真水珠水滴等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="no-filter">
	<div class="paper"></div>
	<div class="dropplets no-filter">
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	  <div class="dropplet"></div>
	</div>
</div>
<svg width="0" height="0">
  <filter id="paper">
    <feTurbulence type="fractalNoise" baseFrequency='0.03 0.06' numOctaves="10" result='noise' />
    <feDiffuseLighting in='noise' lighting-color='#e2e1db' surfaceScale='2'>
      <feDistantLight azimuth='45' elevation='40' />
    </feDiffuseLighting>
  </filter>
  <filter id="water">
    <feTurbulence type="fractalNoise" baseFrequency='0.03 0.06' numOctaves="10" result='noise' />
    <feDiffuseLighting in='noise' lighting-color='#e2e1db' surfaceScale='4' result="texture">
      <feDistantLight azimuth='45' elevation='35' />
    </feDiffuseLighting>
    <feComposite in="texture" in2="SourceGraphic" operator="in" />
  </filter>
</svg>

相关推荐

发表评论

相关文章