实现效果：
点一变四
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 180px;
height: 180px;
/*border: 1px solid red;*/
margin: 200px auto;
position: relative;
}
#box .small{
width: 80px;
height: 80px;
position: absolute;
text-align: center;
line-height: 80px;
border-radius: 50%;
background-color: #ff25ec;
transform: scale(0);
/*小按钮的延时操作*/
transition: 0.3s 0.4s;
}
#box .menu{
width: 100px;
height: 100px;
position: absolute;
top: 40px;
left: 40px;
text-align: center;
line-height: 100px;
border-radius: 50%;
background-color: #3b29ff;
/*给大按钮缩小加个过滤，让他执行慢点*/
transition: 0.3s;
}
/*写个大按钮隐藏的属性，在下面点击时加为大按钮的属性*/
#box .menu.hide{
transform: scale(0);
}
/*为实现点击大按钮之后，小按钮从中间往外发散的效果*/
#box .i1{left:50px;top: 50px;}
#box .i2{left:50px;bottom:50px;}
#box .i3{right:50px;top:50px;}
#box .i4{right:50px;bottom:50px;}
/*发散的最终位置*/
#box.show .i1{left:0;top: 0;}
#box.show .i2{left:0;bottom:0;}
#box.show .i3{right:0;top:0;}
#box.show .i4{right:0;bottom:0;}
/*写个小按钮显示的属性，在下面点击大按钮之后加为小按钮的属性*/
#box.show .small{transform: scale(1);}
</style>
</head>
<body>
<div id="box">
<p class="menu">大按钮</p>
<p class="i1 small">1</p>
<p class="i2 small">2</p>
<p class="i3 small">3</p>
<p class="i4 small">4</p>
</div>
</body>
<script>
var oMenu = document.getElementsByClassName("menu")[0];
oBox = document.getElementById("box");
oMenu.onclick = function () {
this.classList.add("hide");
oBox.classList.add("show");
}
</script>
</html>【可以公众号里私聊，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】
