纯前端实现—点一个小圆圈变四个动画效果
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—点一个小圆圈变四个动画效果相关的知识，希望对你有一定的参考价值。
实现效果：
点一变四
源码：
<!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>
以上是关于纯前端实现—点一个小圆圈变四个动画效果的主要内容，如果未能解决你的问题，请参考以下文章
Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）