底部弹出层导航切换效果-html代码-BFW代码库

代码语言：html

代码描述：底部弹出层导航切换效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;800&display=swap");

body {
  font-family: "Kanit", sans-serif;
  margin: 0;
}

.App {
  align-items: center;
  background-color: #dbdad8;
  display: flex;
  height: 100vh;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.phone {
  background-color: #fff;
  border-radius: 25px;
  height: 560px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.phone-content {
  box-sizing: border-box;
  padding: 20px;
  position: absolute;
}

.pre-title {
  display: block;
  font-size: 16px;
  font-style: italic;
  margin-top: 52px;
  text-align: center;
  width: 100%;
}

.title {
  display: block;
  font-size: 36px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
  width: 100%;
}

.cook {
  margin-top: -8px;
}

.bottomSheet {
  position: absolute;
  height: 100%;
}

.drag-area {
  height: 500px;
  opacity: 0.5;
  position: absolute;
  width: 300px;
  z-index: 1;
}

.drag {
  cursor: pointer;
}

.container {
  box-sizing: border-box;
  height: 500px;
  padding: 20px;
  position: absolute;
  top: 60px;
  width: 100%;
}

.content {
  font-size: 28px;
  font-weight: 900;
}

.icon {
  left: 40px;
  position: absolute;
  top: 16px;
  width: 20px;
}

.close {
  left: 56px;
  position: absolute;
  top: 17px;
}

.content-title {
  margin-bottom: 24px;
}

.content-subtitle {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
}

.content-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
</style>

</head>
<body translate="no">
<div id="root"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script>
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}window.CP.exitedLoop(0);return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

const THRESHOLD = 300;

function Close({ stroke, scale }) {
  return (
    React.createElement("svg", {
      className: "close",
      xmlns: "http://www.w3.org/2000/svg",
      height: "20",
      width: "20" },

    React.createElement(animated.g, { style: { scale, transformOrigin: "50%" } },
    React.createElement("path", {
      d: "M3 3l13 13M16 3L3 16",
      fill: "none",
      strokeWidth: "2.2",
      strokeLinecap: "round",
      style: { stroke } }))));




}

function Veg({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M13.1 3.8c-.6-.3-1.3-.6-2.1-.7.2-1 .9-1.2 1.9-1.1.5 0 1-.4 1.1-.9S13.6 0 13.1 0C10.6-.2 9.2 1.2 9 3.1c-.7.1-1.4.3-2.1.7C3.7 1.5-.5 4.4.3 8.5L2 17.4c.3 1.5 1.6 2.6 3.1 2.6.9 0 1.6-.4 2.2-1 .7.6 1.7 1 2.7 1 1.1 0 2-.4 2.7-.9.5.6 1.3.9 2.1.9 1.5 0 2.8-1.1 3.1-2.6l1.7-8.9c.8-4.1-3.3-6.9-6.5-4.7zM5.1 18c-.5 0-1-.4-1.1-1L2.3 8.2c-.4-2 1.2-3.6 3-3-.8 1-1.1 2.2-.8 3.4l1.7 8.2c-.2.6-.3 1.2-1.1 1.2zm4.9 0c-1 0-1.7-.5-1.8-1L6.4 8.1C6.1 6.4 7.9 5 10 5c2 0 4 1.4 3.6 3.1-1.9 9.3-1.7 8.2-1.8 8.9-.1.5-.8 1-1.8 1zm7.7-9.8L16 17c-.1.6-.6 1-1.1 1-.7 0-.9-.5-1-1.2l1.7-8.3c.2-1.1 0-2.4-.8-3.4 1.7-.6 3.3 1 2.9 3.1z" })));


}

function Chicken({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M17.7 2.3C15.1-.3 12.5-1 9.9 1.6 8.2 3.3 6.9 6 6.7 8.4c-.1.5-.3 1-.6 1.3l-.9.9c-.5.5-1.3.6-1.9.6-.9-.1-1.8.2-2.4.9-1.2 1.2-1.2 3.1 0 4.2.5.5 1.2.8 2 .9 0 .7.3 1.4.9 2 1.2 1.2 3.1 1.2 4.2 0 .6-.6.9-1.5.9-2.4 0-.6 0-1.3.6-1.9l.9-.9c.3-.3.8-.5 1.3-.6 2.3-.2 5-1.5 6.7-3.2 2.6-2.7 1.9-5.3-.7-7.9zM17 8.7c-1.3 1.3-3.7 2.5-5.5 2.6-1 .1-1.9.5-2.5 1.2l-1 1c-.9.9-1.3 2.1-1.1 3.5 0 .3-.1.6-.3.8-.4.4-1 .4-1.4 0-.2-.2-.3-.5-.3-.8.1-1-.7-1.8-1.7-1.7-.3 0-.6-.1-.8-.3-.4-.4-.4-1 0-1.4.2-.2.5-.3.8-.3 1.4.1 2.6-.3 3.5-1.1l.9-.9c.7-.7 1.1-1.5 1.2-2.5 0-2.1 1.2-4.4 2.5-5.8 1.6-1.6 3-1.3 5 .7 1.9 1.9 2.3 3.3.7 5z" })));


}

function Fish({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M19.9 1c-.1-.5-.4-.8-.9-.9C10.9-.8 4.9 3.5 4.6 11.6l-3.8.7C0 12.5-.3 13.4.3 14L6 19.7c.6.6 1.5.3 1.7-.5l.8-3..........完整代码请登录后点击上方下载按钮下载查看