css
复制代码
<style>
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background: #222;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 100vh;
}
.button{
color: #fff;
text-align: center;
width:70px;
height:70px;
border-radius: 50%;
background: #4c3ab0;
position: relative;
}
.button::after{
content: "+";
position: absolute;
inset:-6.5px;/*设置定位布局，上下左右各相距6.5px*/
font-size: 3.5em;
}
.button.active{
transform: rotate(45deg);
}
.icons.open{
width:80%;
}
.icons{
width:0;
height:65px;
list-style: none;
padding:16px 10px 10px 50px;
background: #ffffff;
box-shadow: 1px 1px 1px #dcdcdc;
border-radius: 2em;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.icons li img{
width:36px;
}
.icons li:nth-child(1){
margin-left: 50px;
}
.icons li{
width:80px;
}
.button{
left:50%;
margin-left: -35px;
z-index:1;
}
.button,.icons{
transition: all 1s cubic-bezier(0.85,-.57,0.37,2.99);
}
.icons{
margin:-68px 0 0 44%;
overflow: hidden;
opacity: 0;
}
.button.active{
left:60px;
}
.icons.open{
margin:-68px 0 0 6%;
opacity: 1;
}
</style>
html
复制代码
<body>
<div class="toolbar">
<div class="button"></div>
<ul class="icons">
<li><img src="/iconBox/mine.png" alt=""></li>
<li><img src="/iconBox/mine.png" alt=""></li>
<li><img src="/iconBox/mine.png" alt=""></li>
<li><img src="/iconBox/mine.png" alt=""></li>
<li><img src="/iconBox/mine.png" alt=""></li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
</script>
<script>
$('.button').click(function(){
$('.button').toggleClass('active')
$('.icons').toggleClass('open')
})
</script>
</body>