gsap手机菜单模拟效果-html代码-BFW代码库

gsap手机菜单模拟效果

代码语言：html

代码描述：gsap手机菜单模拟效果

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


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

<style>
:root {
  --phone-width: 350px;
  --phone-height: 480px;
  --phone-color: rgb(20, 20, 20);
  --screen-color: rgb(10, 10, 10);
  --app-width: 350px;
  --app-height: 400px;
  --app-bg: #090831;
  --button-color: #ff4f79;
  --bg: #4a4a6a;
  --phone-animation-duration: 1.2s;
  --phone-animation-delay: 500ms;
  --phone-animation-easing: ease;
  --phone-animation-direction: forwards;
  --screen-animation-duration: 0.8s;
  --screen-animation-delay: 1800ms;
  --screen-animation-easing: ease;
  --screen-animation-direction: forwards;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}

button {
  border: none;
}
button:focus {
  outline: none;
  border: none;
}

.phone {
  position: relative;
  min-width: var(--phone-width);
  height: var(--phone-height);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  transform: translateY(-200%);
  animation: show-phone var(--phone-animation-duration) var(--phone-animation-easing) var(--phone-animation-direction);
  animation-delay: var(--phone-animation-delay);
  box-shadow: 0 0 0 5px #646464, 0 2.4px 5.3px rgba(0, 0, 0, 0.07), 0 5.7px 12.6px rgba(0, 0, 0, 0.101), 0 10.6px 23.8px rgba(0, 0, 0, 0.125), 0 19px 42.4px rgba(0, 0, 0, 0.149), 0 35.5px 79.4px rgba(0, 0, 0, 0.18), 0 85px 190px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.phone__screen {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--app-width);
  height: calc(5px + var(--app-height));
  background: var(--screen-color);
  z-index: 80;
  animation: hide-screen-top var(--screen-animation.........完整代码请登录后点击上方下载按钮下载查看