使用css 实现动感菜单

最新推荐文章于 2024-07-04 10:00:00 发布

技术爱好者Joker

最新推荐文章于 2024-07-04 10:00:00 发布

阅读量218

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_38874840/article/details/107731396

版权

前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

本文介绍了一个使用HTML和CSS创建的动态菜单效果，通过巧妙地利用伪元素和CSS3属性，如transform和transition，实现了一个响应式的圆形菜单，当鼠标悬停在菜单上时，菜单项会从中心点旋转展开。

摘要由CSDN通过智能技术生成

html

 <nav>
    <ul>
      <li><span>1</span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
      <li><span>5</span></li>
      <li><span>6</span></li>
      <li><span>7</span></li>
      <li><span>8</span></li>
      <li><span>9</span></li>
    </ul>
  </nav>

body{
  margin: 0;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

nav{
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  border: 1px solid #000;
}
nav::before{
  position: absolute;
  content: '';
  width: 200px;
  height:200px;
  background: #987;
  border-radius: 50%;
  z-index: 1;
}
nav::after{
  position: absolute;
  content: '菜单';
  color: #fff;
  font-size: 22px;
  z-index: 1;
}
nav:hover ul {
  transform: scale(1);
}

ul {
  width: 300px;
  height: 300px;
  transform: scale(0);
  transition: .5s;
}


ul li{
  width: 80px;
  height: 80px;
  background: #879;
  border-radius:50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#fff;
  font-size: 24px;
  position: absolute;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transform-origin: 150px 150px;
  transition: all 1s ease;
}
ul li span{
  transition: all 1s;
}
nav:hover ul li:nth-of-type(1){
  transform: rotate(40deg);
}
nav:hover ul li:nth-of-type(1)>span{
  transform: rotate(-40deg);
}
nav:hover ul li:nth-of-type(2){
  transform: rotate(80deg);
}
nav:hover ul li:nth-of-type(2)>span{
  transform: rotate(-80deg);
}
nav:hover ul li:nth-of-type(3){
  transform: rotate(120deg);
}
nav:hover ul li:nth-of-type(3)>span{
  transform: rotate(-120deg);
}
nav:hover ul li:nth-of-type(4){
  transform: rotate(160deg);
}
nav:hover ul li:nth-of-type(4)>span{
  transform: rotate(-160deg);
}
nav:hover ul li:nth-of-type(5){
  transform: rotate(200deg);
}
nav:hover ul li:nth-of-type(5)>span{
  transform: rotate(-200deg);
}
nav:hover ul li:nth-of-type(6){
  transform: rotate(240deg);
}
nav:hover ul li:nth-of-type(6)>span{
  transform: rotate(-240deg);
}
nav:hover ul li:nth-of-type(7){
  transform: rotate(280deg);
}
nav:hover ul li:nth-of-type(7)>span{
  transform: rotate(-280deg);
}
nav:hover ul li:nth-of-type(8){
  transform: rotate(320deg);
}
nav:hover ul li:nth-of-type(8)>span{
  transform: rotate(-320deg);
}
nav:hover ul li:nth-of-type(9){
  transform: rotate(360deg);
}
nav:hover ul li:nth-of-type(9)>span{
  transform: rotate(-360deg);
}