CSS3悬停展开旋转菜单特效代码-QQ沐编程

代码介绍

CSS3悬停展开旋转菜单特效代码是一款鼠标移动到头像上就会展开旋转菜单特效，将鼠标移动到下面的你猜上面，其他菜单就会缓缓展开并缓慢旋转，适合给自己的网站增添一份动态特效，可以放到独立页面，也可以放到网站侧边栏里面

效果截图

图片[1]-CSS3悬停展开旋转菜单特效代码-QQ沐编程

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3悬停展开旋转菜单特效</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html,body {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .wrapper{
      width: 100px;
      height: 100px;
      background:lightblue;
      border-radius:50%;
      border:2px solid lightgreen;
      position: relative;
      /* top:200px;
      left:400px; */
      cursor:pointer;
    }
    .wrapper:after{
      content: '你猜';
      display:inline-block;
      width:100px;
      height:100px;
      line-height:100px;
      border-radius:50%;
      text-align:center;
      color:#fff;
      font-size:24px;
    }
    .wrapper:hover .round{
      -webkit-transform:scale(1);
      opacity:1;
      -webkit-animation:rotating 6s 1.2s linear infinite alternate;
    }
    @-webkit-keyframes rotating{
      0%{
        -webkit-transform:rotate(0deg);
      }
      100%{
        -webkit-transform:rotate(180deg);
      }
    }
    .round{
      width:240px;
      height:240px;
      border:2px solid lightgreen;
      border-radius:50%;
      position: absolute;
      top:-70px;
      left:-70px;
      -webkit-transition:all 1s;
      -webkit-transform:scale(0.35);
      opacity:0;
    }
    .round span{
      width:40px;
      height:40px;
      line-height:40px;
      display:inline-block;
      border-radius:50%;
      background:lightblue;
      border:2px solid lightgreen;
      color:#fff;
      text-align:center;
      position:absolute;
    }
    .round span:nth-child(1){
      right:-22px;
      top:50%;
      margin-top:-22px;
    }
    .round span:nth-child(2){
      left:-22px;
      top:50%;
      margin-top:-22px;
    }
    .round span:nth-child(3){
      left:50%;
      bottom:-22px;
      margin-left:-22px;
    }
    .round span:nth-child(4){
      left:50%;
      top:-22px;
      margin-left:-22px;
    }
  </style>
</head>
<body>

  <div class="wrapper">
    <div class="round">
        <span>东邪</span>
        <span>西毒</span>
        <span>南乞</span>
        <span>北丐</span>
    </div>
  </div>

</body>
</html>

源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，更多好看的网页特效可以搜索QQ沐编程，觉得有帮助的话可以CTRL+D收藏一下本站

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END