純css3天氣手機app界面代碼



187 744 249



特效描述:純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

加群請備注:從官網了解到

老夫子电子