css实现悬浮菜单旋转展开动画效果代码-html代码-BFW代码库

css实现悬浮菜单旋转展开动画效果代码

代码语言：html

代码描述：css实现悬浮菜单旋转展开动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        *{
          padding:0;
          margin:0;
          list-style:none;
        }
        .my-menu{
          position:relative;
          width:300px;
          height:300px;
        }
        .my-menu > *{
          transition:all ease-in-out .5s;
        }
        .my-menu > aside{
          width:80px;
          height:80px;
          position:absolute;
          top:50%;
          left:50%;
          margin:-40px 0 0 -40px;
          background:#319472;
          border-radius:50%;
          line-height:500px;
          overflow:hidden;
        }
        .my-menu > aside:before,.my-menu > aside:after{
          width:40px;
          height:4px;
          border-radius:5px;
          background:#fff;
          position:absolute;
          top:50%;
          left:50%;
          content:'';
          margin:-2px 0 0 -20px;
        }
        .my-menu > aside:after{
          transform:rotate(90deg);
        }
        .my-menu:hover > aside{
          transform:rotate(315deg);
        }
        .my-menu:hover > .menu-list{
          transform:rotate(144deg);
          opacity:1;
        }
        .menu-list{
          opacity:0;
          transform:rotate(0deg);
          position:absolute;
          width:200px;
          height:200px;
          top:50px;
          left:50px;
        }
     .........完整代码请登录后点击上方下载按钮下载查看