css3卡通海面上飞机动画特效代码下载


css3卡通海面上飞机动画特效代码下载
css3卡通海面上飞机动画特效代码下载以及卡通海面上、飞机动画等js/jquery网页特效代码下载。

1. 引入CSS

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

2. HTML代码

<div class="background">
  <div class="landscape"></div>
</div>
<div class="sizer">
  <div class="airplane">
    <div class="fin"></div>
    <div class="tail"></div>
    <div class="tail right"></div>
    <div class="wing"></div>
    <div class="wing right"></div>
    <div class="engine"></div>
    <div class="wheel-support"></div>
    <div class="wheel"></div>
    <div class="wheel-support right"></div>
    <div class="wheel right"></div>
    <div class="cockpit"></div>
    <div class="cabin"></div>
  </div>
</div>
<div class="filters">
  <div class="sizer">
    <div class="clipper">
      <div class="background">
        <div class="landscape"></div>
      </div>
      <div class="turbulence">
        <div class="airplane">
          <div class="fin"></div>
          <div class="tail"></div>
          <div class="tail right"></div>
          <div class="wing"></div>
          <div class="wing right"></div>
          <div class="engine"></div>
          <div class="wheel-support"></div>
          <div class="wheel"></div>
          <div class="wheel-support right"></div>
          <div class="wheel right"></div>
          <div class="cockpit"></div>
          <div class="cabin"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="sizer">
    <div class="propeller"></div>
    <div class="spinner"></div>
  </div>
  <div class="sizer">
    <div class="shadow-filter">
      <div class="shadow"></div>
    </div>
  </div>
</div>
<svg width="0" height="0">
  <filter id="propeller">
    <feTurbulence baseFrequency="0.07" numOctaves="1" result="turbulence" />
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" />
  </filter>
  <filter id="landscape">
    <feTurbulence baseFrequency="0.2" numOctaves="1" result="turbulence" />
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" />
  </filter>
  <filter id="shadow">
    <feTurbulence baseFrequency="0.1 0" seed="5" numOctaves="5" result="turbulence" />
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="50" />
  </filter>
</svg>

相关推荐

发表评论

相关文章