
- *{
- 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;
- }
- <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>