css实现扇形展开的圆形菜单

岩石教程

于 2024-08-26 21:14:06 发布

阅读量413

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43952318/article/details/141573382

版权

废话不多说，直接上代码

效果

在这里插入图片描述

在线体验

😄点击体验😄

源码

html

<div class="fab-menu">
  <div class="trigger">
    +
  </div>
  <div class="menu-list">
    <div class="menu-item">
      <div class="icon-text">
        <div>社区</div>
      </div>
    </div>
    <div class="menu-item">
      <div class="icon-text" >
        <div>社群</div>
      </div>
    </div>
    <div class="menu-item">
      <div class="icon-text">
        <div>组局</div>
      </div>
    </div>
    <div class="menu-item">
      <div class="icon-text">
        <div></div>
      </div>
    </div>
  </div>
</div>

css

.fab-menu {
  position: fixed;
  left: 200px;
  top: 150px;
}

.fab-menu .trigger {
  width: 60px;
  height: 60px;
  position: absolute;
  z-index: 1;
  left: -30px;
  top: -30px;
  text-align: center;
  line-height: 55px;
  transition: all 0.5s;
  background-color: #ff0000;
  border-radius: 50%;
  font-size: 40px;
  cursor: pointer;
  color: #fff;
}

.fab-menu .trigger.open {
  transform: rotate(45deg);
}

.fab-menu .menu-list {
  position: relative;
  height: 125px;
  width: 125px;
  transform: rotate(45deg);
  transform-origin: 0 0;
}


.fab-menu .menu-list .menu-item {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: 0 0 100% 0;
  transform-origin: 0 0;
  overflow: hidden;
  transition: all 0.5s;
  transform: rotate(-90deg);
  box-shadow: 0rpx 0px 25px 0px rgba(0, 0, 0, 0.1);
  opacity: 0;
  font-size: 29rpx;
}

.fab-menu .menu-list .menu-item .icon-text {
  transform-origin: 0 0;
  position: absolute;
  text-align: center;
}

.fab-menu .menu-list .menu-item:nth-child(1) {
  background-color: #cdff55;
}

.fab-menu .menu-list .menu-item:nth-child(1) .icon-text {
  transform: rotate(-45deg);
  top: 47px;
  left: 15px;
}

.fab-menu .menu-list .menu-item:nth-child(2) {
  background-color: #fbff66;
}



.fab-menu .menu-list .menu-item:nth-child(2) .icon-text {
  transform: rotate(-133deg);
  top: 80px;
  left: 45px;
}

.fab-menu .menu-list .menu-item:nth-child(3) {
  background-color: #e6ff49;
}

.fab-menu .menu-list .menu-item:nth-child(3) .icon-text {
  transform: rotate(-225deg);
  top: 55px;
  left: 80px;
}

.fab-menu .menu-list .menu-item:nth-child(4) {
  background-color: #fbff66;
}

.fab-menu .menu-list .menu-item:nth-child(4) .icon-text {
  transform: rotate(45deg);
  top: 35px;
  left: 30px;
}


/* 定义菜单展开后的状态 */
.fab-menu .menu-list.open .menu-item {
  opacity: 1;
}

.fab-menu .menu-list.open .menu-item:nth-child(1) {
  transform: rotate(0deg);
}

.fab-menu .menu-list.open .menu-item:nth-child(2) {
  transform: rotate(90deg);
}

.fab-menu .menu-list.open .menu-item:nth-child(3) {
  transform: rotate(180deg);
}

.fab-menu .menu-list.open .menu-item:nth-child(4) {
  transform: rotate(270deg);
}

js


var t = document.querySelector('.trigger')
var m = document.querySelector('.menu-list')

// add or delete class name 'open'
t.addEventListener('click', () => {
  t.classList.toggle('open');
  m.classList.toggle('open');
})