先上一个案例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #84a0f4;
background-image: linear-gradient(to top, #84a0f4 0%, #c2e9fb 100%);
font-family: "Montserrat", sans-serif;
}
.wrapper {
position: relative;
}
#btn_click {
width: 100px;
height: 35px;
position: relative;
background-color: #5c67ff;
border-radius: 20px;
box-shadow: 0px 0px 0px 4px rgb(92 103 255 / 30%);
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: white;
cursor: pointer;
transition: all 0.2s linear;
z-index: 9;
}
#btn_click:hover {
background-color: #2d3aef;
color: white;
}
.dialog {
position: absolute;
left: -95px;
bottom: 20px;
width: 120px;
background-color: white;
border-radius: 10px;
padding: 0 20px;
box-sizing: border-box;
box-shadow: 0px 0px 0px 4px rgb(92 103 255 / 30%);
transition: all 0.3s ease 0.1s;
opacity: 0;
transform: scale(0);
transform-origin: bottom right;
}
.dialog p {
opacity: 0;
text-align: center;
color: #1c3991;
}
.active {
opacity: 1;
transform: scale(1);
animation: popple 1s infinite;
}
.active p {
animation: fadeInItem .6s .2s forwards;
}
.active p:nth-child(1) {
animation-delay: .2s;
}
.active p:nth-child(2) {
animation-delay: .4s;
}
.active p:nth-child(3) {
animation-delay: .6s;
}
.active p:nth-child(4) {
animation-delay: .8s;
}
@keyframes fadeInItem {
100% {
transform: translatex(0px);
opacity: 1;
}
}
@keyframes popple {
0% {
box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
}
50% {
box-shadow: 0px 0px 0px 10px rgba(92, 103, 255, 0.3);
}
100% {
box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
}
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div id='btn_click'>CLICK</div>
<div class="dialog">
<p>设置</p>
<p>复制</p>
<p>粘贴</p>
<p>截切</p>
</div>
</div>
</div>
</body>
<script>
var func = function () {
let dialog = document.querySelector(".dialog").classList.toggle('active')
}
document.getElementById('btn_click').addEventListener('click', func);
</script>
</html>
// 其中这一句控制菜单的显示与隐藏，很简洁的语法，以后可能会经常用到
document.querySelector(".dialog").classList.toggle('active')
源代码参考于https://codepen.io/aybukeceylan/pen/zYNpWdj