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

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

代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看