css模拟全屏手机弹出菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css模拟全屏手机弹出菜单效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    body {
  align-items: center;
  background-color: #569bd7;
  display: flex;
  font-family: "Inter", serif;
  font-size: 14px;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  margin: 0;
  user-select: none;
}
.phone-frame {
  background-color: #353535;
  border-radius: 30px;
  box-shadow: 0 0.4px 1px rgba(0, 0, 0, 0.026), 0 1px 2.3px rgba(0, 0, 0, 0.045),
    0 1.9px 4.4px rgba(0, 0, 0, 0.065), 0 3.4px 7.8px rgba(0, 0, 0, 0.094),
    0 6.3px 14.6px rgba(0, 0, 0, 0.145), 0 15px 35px rgba(0, 0, 0, 0.25);
  width: 240px;
  height: 480px;
  padding: 5px;
}
.phone-screen {
  align-items: center;
  background-color: #000;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  perspective: 460px;
  position: relative;
  width: 100%;
}
.imageContainer {
  overflow: hidden;
  transform-origin: 100% 0;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.active .imageContainer {
  transform: rotateX(-45deg);
}
.image {
  left: -76%;
  position: relative;
  width: 250%;
}
.overlay {
  background: linear-gradient(#0000001f 0%, #0000009f 80%, #000000bf 100%);
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  top: 0;
  width: 100%;
}
.active .overlay {
  opacity: 1;
}
.button-menu {
  border-radius: 50%;
  position: absolute;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.button-menu1 {
  bottom: 25px;
  cursor: pointer;
  fill: none;
  height: 24px;
  /* left: 35px; */
  padding: 5px;
  -webkit-tap-highlight-color: transparent;
  width: 24px;
}
.bg {
  fill: #282828;
}
.button-menu1:active .bg {
  fill: #555;
}
.line {
  stroke: #fff;
  stroke-width: 2;
  transition: stroke 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 50%;
}
.active .line1 {
  stroke: #50cea1;
  transform: translateX(-2.5px) translateY(3px) rotate(45deg);
}
.active .line2 {
  stroke: #50cea1;
  transform: scale(0);
}
.active .line3 {
  stroke: #50cea1;
  transform: translateX(-2.5px) translateY(-3px) rotate(-45deg);
}
.active .button-menu {
  transform: translateY(-180px);
}
.menu {
  background: linear-gradient(rgb(131 63 63), transparent),
    linear-gradient(to top left, rgb(47 144 120), transparent),
    linear-gradient(to top right, rgb(94 94 160), transparent);
  background-blend-mode: screen;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  height: 192px;
  position: absolute;
  transform: translateY(192px);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.option {
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 80px;
}
.option:active::after {
  background-color: #000;
  content: " ";
  opacity: 0.25;
  height: 100%;
  position: absolute;
  width: 100%;
}
.food {
  height: 40px;
  width: 40px;
}
.active .menu {
  transform: translateY(0);
}

.japanese {
  font-weight: 600;
  font-family: sans-serif;
}
.roman {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 600;
}
</style>

</head>
<body>

<div class="phone-frame">
  <div class="phone-screen">
    <div class="imageContainer">
      <img class="image" src="//repo.bfw.wiki/bfwrepo/image/604a26e01dd36.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_800,/quality,q_90" />
      <div class="overlay"></div>
    </div>
    <!-- <div class="button-menu button-menu1"></div> -->
    <svg class="button-menu button-menu1" height="24" width="24" onclick="document.querySelector('.phone-screen').classList.toggle('active')">
      <circle class="bg" r="12" cx="12" cy="12" />
      <path class="line line1" d="M 6,8 H 18" />
      <path class="line line2" d="M 6,12 H 18" />
      <path class="line line3" d="M 6,16 H 18" />
    </svg>
    <div class="menu" onClick="document.querySelector('.phone-screen').classList.remove('active')">
      <div class="option">
        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
          <title>寿司</title>
          <path d="M96.697 25.12a21.525 20.56 0 0 0 .774-3.23C99.147 10.54 88.228 2.11 76.69.53 59.07-1.9 40.142 4.1 24.773 17 9.07 30.1-.197 48.36.003 65.81.108 75.25 6.965 95.1 17.8 99.19a11.715 11.19 0 0 0 4.345.81 12.69 12.12 0 0 0 6.523-1.81l46.064-19.85a43.018 41.09 0 0 0 21.965-53.22zm-76.55 68.49c-7.832-2.95-13.78-20.08-13.873-27.87a53.393 51 0 0 1 3.643-18.57L31.61 55l2.22-5.61-21.39-7.72a69.997 66.86 0 0 1 16.47-20.2c.344-.29.7-.56 1.045-.84l26.864 9.7 2.22-5.61-23.21-8.38C46.182 9.6 57.7 6 68.9 6a48.975 46.78 0 0 1 6.9.46c7.16 1 16.75 6.17 15.453 14.59-1.047 7.33-8.02 12.15-14.73 16.81-1.3.9-2.576 1.79-3.78 2.67A152.85 146 0 0 0 48.1 63.11a106.786 102 0 0 0-9.005 13c-3.235 5.27-6.28 10.25-10.343 14.33a15.16 14.48 0 0 1-3.005 2.4l-2.094.92a5.12 4.89 0 0 1-3.507-.15zm52-20.73L39.534 86.93c1.748-2.54 3.36-5.16 4.952-7.73a98.944 94.51 0 0 1 8.438-12.29 145.825 139.29 0 0 1 23.65-21.62c1.162-.86 2.387-1.71 3.643-2.58 4.324-3 8.972-6.25 12.396-10.39a36.768 35.12 0 0 1-20.468 40.56z" />
        </svg>
        <div class="japanese">手握</div>
        <div class="roman">Nigiri</div>
      </div>
      <div class="option">
        <svg class="food" xmlns="http://www.w3.org/2000/svg" height="100" width="100" viewBox="0 0 100 100" data-name="Camada 1">
          <title>寿司_2</title>
          <path d="M71.945 28.205L50 16.26 28.05 28.204a10.902 11.493 0 0 0-1 3.533 10.522 11.092 0 0 0 1 3.606L50 47.3l22.005-11.946a10.902 11.493 0 0 0 1-3.532 10.522 11.092 0 0 0-1.06-3.617zM34.59 31.79L50 23.355l15.424 8.435L50 40.183z" />
          <path d="M98.77 37.62a28.755 30.314 0 0 0-2.76-8.824c-2.76-5.778-7.352-10.882-13.893-15.426C72.735 6.77 61.563.095 50.06 0h-.12c-11.5.095-22.673 6.77-32.094 13.37-6.55 4.555-11.162 9.67-13.912 15.468a28.865 30.43 0 0 0-1.18 2.815 29.165 30.747 0 0 0-1.52 5.968c-2.24 14.404-1.43 26.288 2.45 35.334 4 9.385 11.87 14.636 19.743 18.906 10 5.4 18.623 8.056 26.514 8.14h.12c7.893-.084 16.564-2.74 26.516-8.14 7.87-4.218 15.712-9.49 19.743-18.906 3.87-9.046 4.69-20.93 2.45-35.333zM21.155 18.643C29.818 12.612 40 6.442 49.91 6.326h.18c9.913.116 20.095 6.327 28.756 12.326 5.69 3.965 9.642 8.32 11.922 13.202-2.28 4.83-6.2 9.13-11.852 13.074-8.66 6.032-18.853 12.21-28.765 12.316H50c-9.94-.106-20.132-6.327-28.794-12.326-5.72-3.975-9.65-8.33-11.922-13.223 2.32-4.818 6.24-9.11 11.872-13.043zm69.692 51.666c-3.27 7.613-10.112 12.136-17.003 15.89-9.06 4.913-16.833 7.38-23.734 7.38h-.18c-6.9-.084-14.67-2.52-23.733-7.38-6.91-3.754-13.752-8.277-17.003-15.89-3.25-7.613-4-17.925-2.16-30.578a43.207 45.55 0 0 0 10.922 10.44C27.306 56.737 38.46 63.443 50 63.57h.19c11.503-.126 22.655-.........完整代码请登录后点击上方下载按钮下载查看