• 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/

  • 相关阅读:
    做最简单的自定义控件!
    DataGridView取消默认选中行
    好看的vs皮肤
    rdlc插入图像(.net2010)
    学习c#反射的一个例子
    C#Winform中ToolTip的简单用法
    rdlc报表显示条码 .
    vb.net ctype用法
    一些常用的正则表达式 .
    C# WinForm中MenuStrip动态菜单使用总结
  • 原文地址:https://www.cnblogs.com/lanrenzhijia/p/2601605.html
Copyright © 2020-2023  润新知