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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看