左上角菜单弹出动画效果-html代码-BFW代码库

左上角菜单弹出动画效果

代码语言：html

代码描述：左上角菜单弹出动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap'>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

.container {
  height: 100vh;
}

.flex-container-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-1 {
  position: fixed;
  left: -270px;
  top: -30px;
  width: 400px;
  height: 400px;
  background-color: #404076;
  border-radius: 50%;
  opacity: 0.3;
}

.circle-2 {
  position: fixed;
  left: -225px;
  top: 280px;
  width: 325px;
  height: 325px;
  background-color: #efedee;
  border-radius: 50%;
  opacity: 0.7;
}

.circle-3 {
  position: fixed;
  left: 50px;
  top: 350px;
  width: 80px;
  height: 80px;
  background-color: #404076;
  border-radius: 50%;
  opacity: 0.4;
}

.circle-4 {
  position: fixed;
  left: -20px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  background-color: #404076;
  border-radius: 50%;
  opacity: 0.4;
}

.phone {
  position: relative;
  width: 200px;
  height: 325px;
  border: 3px solid #404076;
  border-radius: 20px;
}
.phone .phone-bezel {
  width: calc(200px - 6px);
  height: calc(325px - 6px);
  border: 8px solid #e8e8e8;
  border-radius: 17px;
}
.phone .phone-screen {
  position: relative;
  width: calc(200px - 21px);
  height: calc(325px - 21px);
  border-radius: 8px;
  background-color: #404076;
}
.phone .phone-screen .icon {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.phone .phone-screen .text {
  font-size: 40px;
  color: #fff;
}
.phone .phone-options {
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: 8px;
  background-color: #fff;
}
.phone .phone-options.show-options {
  visibility: visible;
  width: calc(200px - 21px);
  height: calc(325px - 21px);
  transition-duration: 0.5s;
}
.phone .phone-options.hide-options {
  visibility: hidden;
  width: 0px;
  height: 0px;
  transition-durati.........完整代码请登录后点击上方下载按钮下载查看