jquery+css实现手机悬浮按钮选项卡切换卡片效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：jquery+css实现手机悬浮按钮选项卡切换卡片效果代码，可点击左上角菜单切换，还可点击右下角伸缩图标菜单切换页面。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,300,700'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
  
<style>
body {
  background: teal;
  font: 300 18px/18px Roboto
}

*,
:after,
:before {
  box-sizing: border-box
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table
}

.clearfix:after {
  clear: both;
  display: block
}

.mobile-wrap {
  margin: auto;
  width: 300px;
  height: 534px;
  overflow: hidden;
  position: relative;
  background: url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png) center no-repeat;
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24), 0 17px 50px 0 rgba(0, 0, 0, .19)
}

.mobile-wrap:before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: '';
  position: absolute;
  background: rgba(90, 93, 165, .8);
  background: linear-gradient(to bottom, rgba(90, 93, 165, 1), rgba(0, 0, 0, .7))
}

.mobile {
  z-index: 99;
  color: #fff;
  height: 100%;
  padding: 15px;
  position: relative
}

.mobile .header {
  clear: both;
  overflow: hidden;
  padding-top: 15px;
	position:relative
}

.mobile .header>span {
  font-size: 24px;
  min-width: 24px
}

.mobile .header>.title {
  font-size: 16px;
  line-height: 24px;
  margin-left: 15px
}

.mobile .header .pull-left {
  float: left
}

.mobile .header .pull-right {
  float: right
}
.mobile .header .ion-ios-search{
	z-index:999;
	position:relative;
}

.mobile .header .ion-ios-arrow-back {
  min-width: 25px
}

.mobile .header .ion-ios-navicon>i {
  height: 1px;
  width: 20px;
  margin-top: 5px;
  background: #fff;
  position: relative;
  display: inline-block
}

.mobile .header .ion-ios-navicon>i:after,
.mobile .header .ion-ios-navicon>i:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit
}

.mobile .header .ion-ios-navicon>i:before {
  bottom: 12px
}

.mobile .header .ion-ios-navicon>i:after {
  bottom: 6px
}
.mobile .header .search{
	right:0;
	bottom:0;
	position:absolute;
}
.mobile .header .search input{
	width:0;
	color:#fff;
	height:24px;
	border:none;
	font-size:16px;
	max-width:150px;
	font-weight:300;
	padding-right:30px;
	font-family:inherit;
	background:transparent;
	transition:all .3s ease-in-out 0s;
	border-bottom:1px solid transparent;
	-webkit-appearance:textfield;
}
.mobile .header .search input:focus{
	outline:none;
}
.mobile .header .search input::-webkit-search-decoration,
.mobile .header .search input::-webkit-search-cancel-button {
	-webkit-appearance:none;
}
.mobile .header .search .search-visible{
	width:100%;
	border-bottom-color:#aaa;
}
.nav {
  right: 15px;
  z-index: 20;
  width: 45px;
  bottom: 15px;
  height: 45px;
  display: block;
  position: absolute;
  line-height: 45px;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, .75)
}

.mask {
  z-index: 21;
  color: #fff;
  width: inherit;
  height: inherit;
  cursor: pointer;
  font-size: 28px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f23363;
  transition: all .1s ease-in-out 0s
}

.nav.active .mask {
  background: #cf0e3f;
  transform: rotate(-135deg)
}

.nav:after {
  top: 0;
  left: 0;
  content: '';
  width: inherit;
  height: inherit;
  border-radius: 50%;
  position: absolute;
  background: #f23363;
  transition: all .1s ease-in-out 0s
}

.nav.active:after {
  top: -125px;
  left: -125px;
  width: 350px;
  height: 350px
}

.nav-item {
  top: 0;
  left: 0;
  z-index: 19;
  width: 45px;
  height: 45px;
  color: #fff;
  font-size: 24px;
  transform: none;
  line-height: 45px;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  transition: all .3s cubic-bezier(.68, 1.55, .265, 1)
}

.nav.active .nav-count-1 {
  transform: translate(10px, -100px)
}

.nav.active .nav-count-2 {
  transform: translate(-35px, -80px)
}

.nav.active .nav-count-3 {
  transform: translate(-80px, -45px)
}

.nav.active .nav-count-4 {
  transform: translate(-100px, 0)
}

.pull-left {
  float: left
}

.pull-right {
  float: right
}

.html,
.invisible {
  display: none
}

.html.visible,
.visible {
  display: block
}

.sidebar .sidebar-content,
.sidebar .sidebar-overlay {
  top: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  transition: all .3s ease-in-out 0s
}

.sidebar .sidebar-overlay {
  right: 0;
  opacity: 0;
  width: 100%;
  z-index: 999;
  transform: scale(0);
  background: rgba(0, 0, 0, .4)
}

.sidebar .sidebar-content {
  width: 80%;
  color: #333;
  padding: 15px;
  z-index: 9999;
  background: #fff;
  transform: translateX(-100%)
}

.sidebar.active .sidebar-content {
  transform: translateX(0)
}

.sidebar.active .sidebar-overlay {
  opacity: 1;
  transform: scale(1)
}

.sidebar .sidebar-content .top-head .name {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 5px
}

.sidebar .sidebar-content .top-head .email {
  font-size: 13px;
  margin-bottom: 50px
}

.sidebar .sidebar-content .nav-left>a {
  color: #333;
  display: block;
  font-size: 16px;
  padding: 10px 0;
  line-height: 24px;
  vertical-align: top;
  text-decoration: none
}

.sidebar .sidebar-content .nav-left>a>span {
  color: #aaa;
  font-size: 24px;
  min-width: 40px;
  display: inline-block
}

.html.chats,
.html.search,
.html.compose,
.html.credits,
.html.settings,
.html.welcome {
  margin-top: 50px
}

.on-off {
  display: none
}

.on-off+label {
  width: 30px;
  height: 10px;
  position: relative;
  border-radius: 5px;
  background: #dedee0;
  display: inline-block;
  transition: all .3s ease-in-out 0s
}

.on-off+label:after {
  left: 0;
  top: -2px;
  width: 15px;
  content: '';
  height: 15px;
  position: absolute;
  border-radius: 50%;
  background: #bebdc2;
  transition: all .3s ease-in-out 0s
}

.on-off:checked+label {
  background: #fd99b3
}

.on-off:checked+label:after {
  left: 15px;
  background: #fb3666
}

.btn {
  color: #eee;
  width: 100%;
  border: none;
  font-size: 16px;
  padding: 12px 24px;
  background: #cf0e3f;
  border-radius: 30px
}
.search .title{
	font-size:24px;
}
.search .title p{
	margin:0;
	font-size:16px;
	line-h.........完整代码请登录后点击上方下载按钮下载查看