纯css3天气手机app界面代码



182 724 242



特效描述:纯css3 天气 手机app界面,css3天气app界面,鼠标进过滑动切换天气显示代码

代码结构

1. HTML代码

<main>  
  <div class="device">
    <header></header>
    <section>
      <div class="weather time-morning active">
        <div class="icon">
          <i class="sun"></i>
        </div>
        <div class="content">
          <h3>Morning</h3>
          <div class="degrees">- 1</div>
          <div class="data">          
            <h2>Sunny</h2>
            <div>Wind: E 7 mph</div>
            <div>Humidity: 91%</div>
          </div>
        </div>
      </div>
      <div class="weather time-day">
        <div class="icon">
          <i class="sun"></i>
          <i class="cloud windy"></i>
        </div>
        <div class="content">
          <h3>Day</h3>
          <div class="degrees">+ 3</div>
          <div class="data">          
            <h2>Mostly Sunny</h2>
            <div>Wind: N 5 mph</div>
            <div>Humidity: 45%</div>
          </div>
        </div>
      </div>
      <div class="weather time-evening">
        <div class="icon">
          <i class="sun"></i>
          <i class="cloud"></i>
          <i class="sprinkles"></i>
          <i class="sprinkles"></i>
          <i class="sprinkles"></i>
          <i class="sprinkles"></i>
        </div>
        <div class="content">
          <h3>Evening</h3>
          <div class="degrees">0</div>
          <div class="data">          
            <h2>Rainy</h2>
            <div>Wind: W 12 mph</div>
            <div>Humidity: 91%</div>
          </div>
        </div>
      </div>
      <div class="weather time-night">
        <div class="icon">
          <i class="moon"></i>
          <i class="cloud"></i>
          <div class="snowflakes">
            <i class="snowflake"></i>
            <i class="snowflake"></i>
            <i class="snowflake"></i>
            <i class="snowflake"></i>
          </div>
        </div>
        <div class="content">
          <h3>Night</h3>
          <div class="degrees">- 2</div>
          <div class="data">          
            <h2>Cloudy</h2>
            <div>Wind: N 2 mph</div>
            <div>Humidity: 47%</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</main>
<aside>
  <div class="meta">    
    <h1>CSS-only Weather<br>App Concept</h1>
    <p>
      Dribbble Rework<br>
      Original shot by Sergey Valiukh
    </p>
    <p>
      Hover over each filter to see the effect.<br>
      Works best in Chrome.
    </p>
  </div>
</aside>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 滑动手风琴 桌面 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到