Floating Action Button

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">浮动操作菜单</div>
    </div>
  </div>
  <div class="fab fab-right-top">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-left">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-right-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a href="" class="fab-label-button">
        <span>1</span>
        <span class="fab-label">Action 1</span>
      </a>
      <a href="" class="fab-label-button">
        <span>2</span>
        <span class="fab-label">Action 2</span>
      </a>
      <a href="" class="fab-label-button">
        <span>3</span>
        <span class="fab-label">Third Action</span>
      </a>
    </div>
  </div>
  <div class="fab fab-left-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-left-top">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-center-center">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-center">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
    </div>
  </div>
  <div class="fab fab-extended fab-center-bottom">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
      <div class="fab-text">Create</div>
    </a>
  </div>
  <div class="page-content">
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
  </div>
</div>

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">浮动操作按钮变形</div>
    </div>
  </div>
  <div class="toolbar tabbar tabbar-icons toolbar-bottom fab-morph-target">
    <div class="toolbar-inner">
      <a class="tab-link tab-link-active">
        <i class="icon f7-icons if-not-md">envelope_fill</i>
        <i class="icon material-icons md-only">email</i>
        <span class="tabbar-label">Inbox</span>
      </a>
      <a class="tab-link">
        <i class="icon f7-icons if-not-md">calendar_fill</i>
        <i class="icon material-icons md-only">today</i>
        <span class="tabbar-label">Calendar</span>
      </a>
      <a class="tab-link">
        <i class="icon f7-icons if-not-md">cloud_upload_fill</i>
        <i class="icon material-icons md-only">file_upload</i>
        <span class="tabbar-label">Upload</span>
      </a>
    </div>
  </div>
  <div class="fab fab-right-bottom fab-morph" data-morph-to=".toolbar.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="fab fab-left-bottom fab-morph" data-morph-to=".demo-fab-sheet.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="fab fab-center-bottom fab-morph" data-morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
    <a>
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
    </a>
  </div>
  <div class="list links-list demo-fab-sheet fab-morph-target">
    <ul>
      <li><a class="fab-close">Link 1</a></li>
      <li><a class="fab-close">Link 2</a></li>
      <li><a class="fab-close">Link 3</a></li>
      <li><a class="fab-close">Link 4</a></li>
    </ul>
  </div>
  <div class="demo-fab-fullscreen-sheet fab-morph-target">
    <div class="block-title">选择操作</div>
    <div class="list links-list">
      <ul>
        <li><a class="fab-close">操作1</a></li>
        <li><a class="fab-close">操作2 2</a></li>
        <li><a class="fab-close">操作 3</a></li>
        <li><a class="fab-close">操作 4</a></li>
      </ul>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
    <div class="block">
      <p>在一个遥远的星球上，有一座神秘的宫殿，那里居住着一位美丽善良的公主。公主有着一双明亮的眼睛，仿佛能看透人心。她待人热情，让每个见过她的人都为之倾倒。宫殿的周围，是一片神奇的森林，里面住着形态各异的仙子。她们各司其职，为星球的居民带来幸福和祥和。
        这一天，星球上举行了一场盛大的舞会。</p>
      <p>来自四面八方的舞者齐聚一堂，为公主献上最美的舞蹈。宫殿里弥漫着花香，月光洒在舞池中，如梦似幻。公主穿着一件璀璨的礼服，优雅地起舞。在她的身边，是一位英俊潇洒的少年，他是星球上的勇士，曾为保卫家园立下赫赫战功。
        舞会进行得如火如荼，忽然，一道乌云遮住了月光。众人都惊慌失措，担忧起来。</p>
      <p>公主却镇定自若，她知道，这是森林里的仙子们在提醒她，有一位神秘的客人即将到来。果然，不久后，一位戴着面具的神秘人出现在舞会上。他舞艺高超，引得众人赞叹不已。面具下，他的眼神深邃而神秘，让人无法看透。</p>
      <p>
        舞会结束后，公主与神秘人单独交谈。在月光下，神秘人摘下了面具，露出了一个英俊的面孔。他告诉公主，自己来自遥远的星球，曾因一场灾难而流落至此。在公主的帮助下，他渐渐恢复了记忆，并想借此机会报答公主的恩情。听闻此事，公主感动不已，决定与神秘人共同守护这个星球，让幸福永远流传。从此，他们携手前行，让这个星球变得更加美好。
      </p>
    </div>
  </div>
</div>