CSS3模拟白云飘动水中船效果

今天给大家介绍一款CSS3实现的水中漂船的效果,乍一看像flash动画做的,其实呢?是我们强大的CSS3哇

模拟船动的效果,水中波浪的效果,云彩同样也能实现飘动效果,截图如下:

部分代码:

  <div class="container">
           
   <header>
    <h1>Animated Web Banners With CSS3</h1>
    <h2>Exploring ways to spice up our web banners with CSS3 animations.</h2>
    <p class="codrops-demos">
     <a class="current-demo"  href="index.html">Horizontal</a>
     <a href="index2.html">Vertical</a>
    </p>
   </header>
            <section class="wrapper">
    <div id="ad-1">
     <div id="content">
      <h2>Lost at sea?</h2>
      <h3>Relax - we've got your rudder.</h3>
      <form>
       <input type="text" id="email" value="Email address..." />
       <input type="submit" id="submit" value="Guide me" />
      </form>
     </div>
     <div id="clouds">
      <ul id="cloud-group-1">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
      <ul id="cloud-group-2">
       <li class="cloud-1"></li>
       <li class="cloud-2"></li>
       <li class="cloud-3"></li>
      </ul>
     </div>
     <ul id="boat">
      <li>
       <div id="question-mark"></div>
      </li>
     </ul>
     <ul id="water">
      <li id="water-back"></li>
      <li id="water-front"></li>
     </ul>
    </div>
            </section>
        </div>

下载地址:http://www.lanrenzhijia.com/js/css3/2012/0720/615.html

预览地址:http://www.lanrenzhijia.com/yulan/291/

原文地址:https://www.cnblogs.com/lanrenzhijia/p/2601605.html