手机端下拉加载动画

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>手机端下拉加载动画</title>

<meta name="keywords" content="canvas动画" />

<meta name="description" content="手机端下拉加载动画" />

<meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, user-scalable = no">

 

 

      <link rel="stylesheet" href=http://www.divcss5.com/css3-style/"css/style.css">

 

 

</head>

 

<body>

  <div id="phone">

  <div id="screen">

    <div id="header">

      <ul id="menu">

        <li>Latest Movies</uli>

        <li>Best Movies</uli>

        <li>Archive</uli>

        <li>About</li>

        <li class="reload"><i class="loader-icon"></i></li>

      </ul>

      <div class="pullmenu-icon"></div>

    </div>

    <div id="loader"><i class="loader-icon anim"></i></div>

<div class="pages">

    <div class="page back2" id="about">

      <div>

        <span>Pullmenu</span><br/>Menu interaction concept<br/>by @_fbrz

      </div>

    </div>

    <div class="page" id="latest">

      <div class="box hero back11">

        <span>Interstellar</span>

      </div>

      <div class="box back2">

        <span>Dracula untold</span>

      </div>

      <div class="box back9 right tall">

        <span>The guardians of the galaxy</span>

      </div>

      <div class="box back4">

        <span>The judge</span>

      </div>

      <div class="box back3">

        <span>Frank</span>

      </div>

      <div class="box back6 right">

        <span>Big Hero 6</span>

      </div>

      <div class="box back8 wide">

        <span>Hunger Games</span>

      </div>

    </div>

    <div class="page" id="best">

      <div class="box wide back11">

        <span>Boyhood</span>

      </div>

      <div class="box wide back2">

        <span>The lego movie</span>

      </div>

      <div class="box wide back9">

        <span>The Grand Budapest Hotel</span>

      </div>

      <div class="box wide back4">

        <span>Dawn Of The Planet Of The Apes</span>

      </div>

      <div class="box wide back3">

        <span>Nightcrawler</span>

      </div>

      <div class="box wide back6">

        <span>Big Hero 6</span>

      </div>

      <div class="box wide back8">

        <span>Hunger Games</span>

      </div>

    </div>

    <div class="page" id="archive">

      <div class="box small back11">

        <span>The Wizard of Oz</span>

      </div>

      <div class="box small back2">

        <span>Citizen Kane</span>

      </div>

      <div class="box small back9">

        <span>The Godfather</span>

      </div>

      <div class="box small back4">

        <span>The Third Man</span>

      </div>

      <div class="box small back3">

        <span>A Hard Day's Night</span>

      </div>

      <div class="box small back6">

        <span>Modern Times</span>

      </div>

      <div class="box small back8">

        <span>All About Eve</span>

      </div>

      <div class="box small back7">

        <span>Metropolis</span>

      </div>

      <div class="box small back5">

        <span>Singin' in the Rain</span>

      </div>

      <div class="box small back10">

        <span>King Kong</span>

      </div>

      <div class="box small back1">

        <span>Sunset Boulevard</span>

      </div>

    </div>

</div>

  </div>

  <div id="home"></div>

  <div id="speaker"></div>

</div>

 

<div id="text">

  <div id="pullmenu-icon"></div>

  <h1>pull<br/>menu</h1>

  <h2>Menu<br/>interaction<br/>concept</h2>

  <h3>* Pull down that icon!</h3>

  <h3>** Mobile demo: bit.ly/1CI6OEs</h3>

</div>

 

<a href=http://www.divcss5.com/css3-style/"http:/coolors.co" target="_blank" id="coolors">Coolors ></a>

  <script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>

 

    <script src=http://www.divcss5.com/css3-style/"js/index.js"></script>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2172.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • head
  • Doctype
  • !
  • meta