css+svg实现钟摆式导航菜单图标效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+svg实现钟摆式导航菜单图标效果代码

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

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body
    {
     background-image: linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
      height: 100vh;
    }
    
    .box1
    {
      height: 200px;
        width: 200px;
       background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
        border-radius: 50%;
        border: 10px solid white;
      overflow:hidden;
      margin:auto;
      box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
    }
    
    .box2
    {
      height: 200px;
        width: 200px;
    background-image: linear-gradient(to right bottom, #fff05a, #ffde56, #ffcc55, #ffbb57, #ffaa5a);
      box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
        border-radius: 50%;
        border: 10px solid white;
      overflow:hidden;
      margin:auto;
    }
    
    .box3
    {
      height: 200px;
        width: 200px;
    background: #00b09b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #96c93d, #00b09b);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
    box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
        border-radius: 50%;
        border: 10px solid white;
      overflow:hidden;
      margin:auto;
    }
    
    .box4
    {
      height: 200px;
        width: 200px;
    background-image: linear-gradient(to right bottom, #3da5d9, #2eb9e4, #29ccec, #38dff1, #54f2f2);
    box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
        border-radius: 50%;
        border: 10px solid white;
      overflow:hidden;
      margin:auto;
    }
    
    
    
    .box1-inner
    {
          background-color: #ffffff;
        height: 120px;
        width: 120px;
        border-radius: 50%;
        margin: 31px auto;
        background-image: linear-gradient(to right bottom, #ffffff, #fffefe, #fbfbfb, #f1ecec, #d2d2d2);
        box-shadow: 36px 27px 11px -5px rgba(27, 14, 0, 0.16);
        border: 1px solid #e6e5e4;
      transition:1s;
      cursor:pointer;
      animation: swing ease-in-out .3s infinite alternate;
        transform-origin: top;
        transform-box: fill-box;
        left: calc(42% - .0rem);
    }
    
    
    .box1-inner:hover
    {
      box-shadow: -25px 50px 11px -5px rgba(27, 14, 0, 0.16);
      transition:1s;
    }
    
    .icon-set
    {
          text-align: center;
        width: 100%;
        margin: auto;
        padding-top: 24px;
        float: left;
    }
    
    .text-heading
    {
      position: absolute;
        top: 230%;
        left: 22%;
    }
    .text-heading h3
    {
      text-transform: uppercase;
        text-align: center;
        font-size: 18px;
    }
    .text-heading p
    {
      text-transform: uppercase;
        text-align: center;
        font-size: 10px;
    }
    .color1 h3
    {
      color: #ff6a00;
    }
    
    .color2 h3
    {
      color: #ffbc00;
      
    }
    
    .color3 h3
    {
      color: #06af23;
      
    }
    
    .color4 h3
    {
      color: #06a7af;
    }
    
    
    .box1:after,.box2:after,.box3:after,.box4:after
    {
      content: '';
        background-color: white;
        height: 200px;
        width: 5px;
        position: absolute;
        left: 50%;
      box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.05);
        z-index: -1;
    }
    
    .box1:before,.box2:before,.box3:before,.box4:before
    {
      content: '';
        height: 15px;
        width: 15px;
        background-color: white;
        position: absolute;
        border-radius: 50%;
        bottom: -8px;
        left: 48.1%;
      
    }
    
    .small-box1
    {
    height: 50px;
        width: 50px;
        border-radius: 50%;
        border: 2px solid white;
        position: absolute;
        bottom: -120%;
        left: 41.7%;
      box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.21);
     animation: swing ease-in-out .3s infinite alternate;
        transform-origin: top;
        transform-box: fill-box;
        left: calc(42% - .0rem);
    }
    .small-box1:after
    {
      content: '';
        height: 10px;
        width: 10px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: -7px;
        left: 41.5%;
    }
    .small-box1 div
    {
         
        height: 30px;
        width: 30px;
        border-radius: 50%;
        margin: auto;
        margin-top: 8px;
      box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.21);
    }
    
    .color1 div
    {
       background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
    }
    
    .color2 div
    {
       background-image: linear-gradien.........完整代码请登录后点击上方下载按钮下载查看