- A+
所属分类：Web前端
1 别人写的
地址链接
视频链接：
https://www.bilibili.com/video/BV1TK4y1Q78s
github链接：
https://github.com/Lavender-z/demo
如果上不了，就下个dev-sidecar代理
效果
代码注释
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <title>Document</title> </head> <style> body { overflow: hidden; background: linear-gradient(to right, #ffb95e, #f35c70); } /* 这个仅仅只是固定位置的 */ .menu-toggler { position: absolute; display: block; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 40px; height: 40px; z-index: 2; opacity: 0; cursor: pointer; } /* 鼠标靠近菜单按钮，长条就会亮成白色 */ .menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after { background: white; } /* label确认点击后，把中间的横杆隐藏掉，也就是X */ .menu-toggler:checked + label { background: transparent; } /* 那两条横杠的可以保证交叉组成X后，不会出现错位的现象 */ .menu-toggler:checked + label:before, .menu-toggler:checked + label:after { top: 0; width: 40px; transform-origin: 50% 50%; } /* 那两条横杠在点击后就旋转到对应的角度，然后组成X */ .menu-toggler:checked + label:before { transform: rotate(45deg); } .menu-toggler:checked + label:after { transform: rotate(-45deg); } /* 点击后就表示不隐藏菜单列表 */ .menu-toggler:checked ~ ul .menu-item { opacity: 1; } /* transform先写旋转位置的角度，再写元素离中心点的位置，那么就能形成一个圆圈的摆放 */ .menu-toggler:checked ~ ul .menu-item:nth-child(1) { transform: rotate(0deg) translateX(-110px); } .menu-toggler:checked ~ ul .menu-item:nth-child(2) { transform: rotate(60deg) translateX(-110px); } .menu-toggler:checked ~ ul .menu-item:nth-child(3) { transform: rotate(120deg) translateX(-110px); } .menu-toggler:checked ~ ul .menu-item:nth-child(4) { transform: rotate(180deg) translateX(-110px); } .menu-toggler:checked ~ ul .menu-item:nth-child(5) { transform: rotate(240deg) translateX(-110px); } .menu-toggler:checked ~ ul .menu-item:nth-child(6) { transform: rotate(300deg) translateX(-110px); } /* 由于每个菜单选项都是要hover后才产生效果，那么在菜单没展示开的时候根本不用显示效果 */ .menu-toggler:checked ~ ul .menu-item a { pointer-events: auto; } /* 画白色横杆的位置 */ .menu-toggler + label { width: 40px; height: 5px; display: block; z-index: 1; border-radius: 2.5px; background: rgba(255, 255, 255, 0.7); transition: transform 0.5s, top 0.5s; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } .menu-toggler + label:before, .menu-toggler + label:after { width: 40px; height: 5px; display: block; z-index: 1; border-radius: 2.5px; background: rgba(255, 255, 255, 0.7); transition: transform 0.5s, top 0.5s; content: ''; position: absolute; left: 0; } .menu-toggler + label:before { top: 10px; } .menu-toggler + label:after { top: -10px; } /* 因为每个图标在菜单展开时都要实现旋转的效果，但是旋转后的图标会很不能摆正，所以要调回来 */ .menu-item:nth-child(1) a { transform: rotate(0deg); } .menu-item:nth-child(2) a { transform: rotate(-60deg); } .menu-item:nth-child(3) a { transform: rotate(-120deg); } .menu-item:nth-child(4) a { transform: rotate(-180deg); } .menu-item:nth-child(5) a { transform: rotate(-240deg); } .menu-item:nth-child(6) a { transform: rotate(-300deg); } .menu-item a { /* 由于原来的每个图标都很小，所以需要拉宽和拉长 */ display: block; width: inherit; height: inherit; line-height: 80px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.2); border-radius: 50%; text-align: center; text-decoration: none; font-size: 40px; pointer-events: none; transition: 0.2s; } .menu-item { position: absolute; display: block; top: 0; bottom: 0; right: 0; left: 0; margin: auto; width: 80px; height: 80px; /* 因为所有菜单选项都会回到中心，那么就需要隐藏掉他们的内容 */ opacity: 0; transition: 0.5s; } /* hover到图标显示放大的效果 */ .menu-item a:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); color: white; background: rgba(255, 255, 255, 0.3); font-size: 44.44px; } </style> <body> <!-- 菜单部分 --> <nav class="menu"> <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox" /> <label for="menu-toggler"></label> <ul> <li class="menu-item"> <a class="fa fa-facebook" href="javascript:void(0)"></a> </li> <li class="menu-item"> <a class="fa fa-youtube" href="javascript:void(0)"></a> </li> <li class="menu-item"> <a class="fa fa-wordpress" href="javascript:void(0)"></a> </li> <li class="menu-item"> <a class="fa fa-qq" href="javascript:void(0)"></a> </li> <li class="menu-item"> <a class="fa fa-weixin" href="javascript:void(0)"></a> </li> <li class="menu-item"> <a class="fa fa-github" href="javascript:void(0)"></a> </li> </ul> </nav> </body> </html> 2 我这个菜鸡写的案例——上述案例plus版
效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> /* 基本配置 */ * { padding: 0px; margin: 0px; } body { display: flex; align-items: center; align-content: center; justify-content: space-around; background-color: #eceff1; } .container { margin-top: 70px; width: 500px; height: 500px; position: relative; } /* 设置基本样式 */ .circle { width: 70px; height: 70px; background-color: #f9403d; border-radius: 50%; display: flex; text-align: center; justify-content: center; align-content: center; align-items: center; position: absolute; bottom: 10px; left: 10px; } .circle img { width: 75%; } .items li { width: 70px; height: 70px; background-color: #f9403d; border-radius: 50%; display: flex; text-align: center; position: absolute; bottom: 10px; left: 10px; z-index: -1; display: block; transition: 1s; } li img { width: 75%; margin-top: 8px; } /* 这是通过过渡实现的效果 */ #menu:not(:checked) ~ .items li:nth-child(1) { transform: rotate(0deg) translateY(-110px); } #menu:not(:checked) ~ .items li:nth-child(2) { transform: rotate(60deg) translateY(-110px); } #menu:not(:checked) ~ .items li:nth-child(3) { transform: rotate(120deg) translateY(-110px); } #menu:not(:checked) ~ .items li:nth-child(4) { transform: rotate(180deg) translateY(-110px); } #menu:not(:checked) ~ .items li:nth-child(5) { transform: rotate(240deg) translateY(-110px); } #menu:not(:checked) ~ .items li:nth-child(6) { transform: rotate(300deg) translateY(-110px); } .items li:nth-child(1) img { transform: rotate(-90deg); } .items li:nth-child(2) img { transform: rotate(-150deg); } .items li:nth-child(3) img { transform: rotate(-210deg); } .items li:nth-child(4) img { transform: rotate(-270deg); } .items li:nth-child(5) img { transform: rotate(-330deg); } .items li:nth-child(6) img { transform: rotate(-390deg); } #menu:not(:checked) ~ label .circle { animation-name: disappear; animation-duration: 180.5ms; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes disappear { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(0.85) rotate(-45deg); } } #menu:checked ~ label .circle { animation-name: appear; animation-duration: 0.5ms; animation-iteration-count: 1; animation-fill-mode: forwards; } #menu:checked ~ label .circle:hover { width: 80px; height: 80px; bottom: 5px; left: 5px; } @keyframes appear { 0% { transform: scale(0.85) rotate(45deg); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } </style> <body> <div class="container"> <input type="checkbox" id="menu" checked="checked" /> <label for="menu"> <div class="circle"> <img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /> </div> </label> <ul class="items"> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> <li><img src="./img/plus.png" alt="【H5/CSS3】旋转展开收缩菜单栏" alt="" /></li> </ul> </div> </body> </html> 
