zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    关于PPTP不能打开部分网页
    在MarS Board上搭建PPTP
    Mars Board上无法使用apt-get
    在MarS board上烧录系统镜像
    PHP-变量(1)
    在KEIL 4.72中使用STM32的3.5固件库
    android SDK中java环境变量配置
    android SDK中打开AVD时提示PANIC: Could not open:XX
    ckplayer通过Mod-H264支持随意拖动功能
    430学习笔记-内置ADC12
  • 原文地址:https://www.cnblogs.com/lanrenzhijia/p/2601605.html
Copyright © 2011-2022 走看看