底部弹出层导航切换效果-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.8C16.6 15.1 20.8 9 19.9 1zM18 2c.1 2.1-.2 4.1-.8 5.7-2.4-.6-4.3-2.5-4.9-4.9 1.6-.6 3.5-.9 5.7-.8zM6 17l-3-3 1.6-.3c0 .2 0 .5.1.7.1.5.4.8.9.9.3 0 .5.1.8.1L6 17zm.6-3.6c-.2-3.8.8-7.4 3.8-9.6.9 2.7 3 4.9 5.8 5.8-2.2 3-5.8 4-9.6 3.8z" }),
    React.createElement("path", { d: "M15.6 4.9c.7.3 1.4-.2 1.4-.9 0-.4-.3-.8-.6-.9-.5-.2-1.1 0-1.3.5-.2.6.1 1.1.5 1.3z" })));


}

function Cook() {
  return (
    React.createElement("svg", {
      className: "cook",
      xmlns: "http://www.w3.org/2000/svg",
      width: "260",
      height: "400" },

    React.createElement("path", {
      d: "M154.193 179.977c-.278 1.194-6.235 55.415-6.235 55.415l-5.388 7.661-1.46 11.73 11.175 27.693h-82.82s-1.313-14.632-1.2-18.546c.114-3.913 2.108-18.266 2.108-18.266l-.191-14.573-3.137-63.538 28.066-9.052c16.955-2.918 41.907 9.768 41.907 9.768l17.175 11.708",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M143.43 139.564c3.688-.231 6.516-3.314 8.55-6.4 1.898-2.879 3.523-6.116 3.54-9.566.015-2.995-1.18-5.848-2.355-8.603-1.209-2.838-2.44-5.711-4.34-8.141-1.902-2.43-4.584-4.403-7.645-4.783l2.25 37.493",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M100.327 154.01l.037-.913 2.164-52.94 1.195-3.003 26.48-3.663c8.652-.674 16.11 5.999 16.418 14.672.34 9.636.376 21.414-.96 28.56-2.691 14.37-13.804 15.9-13.804 15.9s-.19 3.763-.397 9.197c-.155 4.105-3.78 15.938-7.886 16.054-1.765.05-6.578-1.48-8.876-1.814-14.482-2.116-14.371-22.05-14.371-22.05",
      fill: "#f8a58d" }),

    React.createElement("path", {
      d: "M141.733 116.562c.007.978-.815 1.792-1.836 1.818-1.02.027-1.855-.742-1.863-1.721-.007-.979.815-1.792 1.835-1.82 1.021-.026 1.856.745 1.864 1.723M143.899 114.215c-.236.234-1.61-.841-3.602-.892-1.989-.077-3.479.907-3.688.657-.103-.11.142-.54.791-.986.64-.445 1.72-.864 2.961-.824 1.24.04 2.272.526 2.858 1.01.6.487.796.93.68 1.035M122.241 116.371c.008.978-.814 1.792-1.835 1.818-1.02.027-1.855-.743-1.862-1.721-.008-.979.814-1.793 1.834-1.82 1.021-.026 1.856.745 1.863 1.723M124.31 114.046c-.236.236-1.612-.84-3.602-.89-1.989-.079-3.479.906-3.688.655-.103-.11.14-.54.792-.985.64-.444 1.72-.864 2.96-.824 1.241.04 2.272.527 2.86 1.01.597.487.794.93.679 1.034M131.132 129.017c-.007-.114 1.237-.293 3.25-.495.51-.038.995-.126 1.09-.47.13-.365-.068-.92-.298-1.518l-1.397-3.914c-1.937-5.571-3.324-10.147-3.099-10.223.225-.076 1.978 4.378 3.914 9.95.465 1.373.91 2.683 1.333 3.935.177.583.49 1.248.21 2.004-.148.376-.53.642-.857.72-.33.091-.615.088-.868.097-2.02.052-3.274.027-3.278-.087",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M131.857 152.624s-9.726.358-19.186-5.69c0 0 4.416 10.044 18.897 9.092l.29-3.402M130.157 133.793c-.69-.967-1.931-1.521-3.18-1.422-.868.07-1.753.463-2.297 1.152-.544.69-.682 1.685-.223 2.37.516.77 1.635.976 2.593.732s1.792-.847 2.587-1.449c.22-.166.445-.34.585-.574.14-.232.178-.54.017-.74",
      fill: "#f68260" }),

    React.createElement("path", {
      d: "M125.232 130.233c.324-.01.269 2.152 2.077 3.737 1.804 1.591 4.116 1.412 4.124 1.714.027.137-.525.406-1.497.405-.956.007-2.34-.338-3.447-1.308-1.103-.972-1.554-2.241-1.603-3.13-.058-.906.198-1.435.346-1.418M125.04 106.255c-.212.537-2.193.224-4.538.441-2.348.171-4.252.803-4.548.309-.132-.237.21-.736.987-1.24.769-.503 1.988-.966 3.395-1.085 1.407-.114 2.686.144 3.527.514.849.369 1.268.806 1.177 1.061M143.326 108.43c-.364.443-1.723-.065-3.372-.132-1.647-.126-3.055.22-3.364-.262-.134-.234.098-.681.72-1.092.614-.41 1.63-.731 2.762-.666 1.132.068 2.104.504 2.665.984.57.48.749.952.589 1.168M100.183 116.332s-3.539 1.896-7.271 6.........完整代码请登录后点击上方下载按钮下载查看