svg+js实现卡通水果选项卡tab效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：svg+js实现卡通水果选项卡tab效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --background-1: rgb(138, 138, 68);
          --background-2: rgb(158, 97, 97);
          --background-3: rgb(161, 118, 69);
        }
        
        body {
          background-color: #80769c;
          background-color: var(--background-1);
          font-family: Arial, Helvetica, sans-serif;
        }
        
        .svg_container {
          transition: all 0.2s ease-in-out;
          animation: minorJiggle 2.5s ease-in-out 0.5s infinite alternate;
        }
        
        @keyframes minorJiggle {
          from {
            transform: rotate(0);
          }
          to {
            transform: rotate(20deg);
          }
        }
        .tabs_parent_container {
          margin-top: 2rem;
          color: white;
        }
        .tabs_parent_container h3 {
          margin: 0;
          margin-bottom: 1rem;
        }
        .tabs_parent_container .tab_header {
          display: flex;
          max-width: fit-content;
          margin: auto;
          margin-bottom: 1rem;
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.459);
        }
        .tabs_parent_container .tab_header .tab_marker {
          background-color: #ff5cf1;
          position: absolute;
          bottom: 0;
          left: 0;
          height: 5px;
          transition: all 0.15s ease-in-out;
        }
        .tabs_parent_container .tab_header .tab {
          position: relative;
        }
        .tabs_parent_container .tab_header input {
          position: absolute;
          left: 0;
          z-index: -1;
        }
        .tabs_parent_container .tab_header label {
          display: block;
          padding: 1rem 1.5rem;
          background-color: #202020;
          cursor: pointer;
        }
        .tabs_parent_container .tab_header input:not(:checked) + label:hover {
          background-color: #5a5a5a;
        }
        .tabs_parent_container .tab_header input:checked + label {
          background-color: #3a3a3a;
        }
        .tabs_parent_container .tab_header .tab:nth-child(1) label {
          border-radius: 10px 0 0 10px;
        }
        .tabs_parent_container .tab_header .tab:nth-child(3) label {
          border-radius: 0 10px 10px 0;
        }
        .tabs_parent_container .tab_content {
          background-color: #3d3d3d;
          padding: 2rem;
          border-radius: 1rem;
          max-width: 400px;
          margin: auto;
          display: none;
          box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.459);
        }
        .tabs_parent_container .tab_content.visible {
          display: block;
        }
    </style>



</head>

<body>
    <div class="tabs_parent_container">
        <div class="tab_header">
            <div class="tab">
                <input id="tab_1" type="radio" name="tab" checked>
                <label for="tab_1">Lemons</label>
            </div>
            <div class="tab">
                <input id="tab_2" type="radio" name="tab">
                <label for="tab_2">Apples</label>
            </div>
            <div class="tab">
                <input id="tab_3" type="radio" name="tab">
                <label for="tab_3">Oranges</label>
            </div>
            <div class="tab_marker"></div>
        </div>
        <div class="tab_content visible" data-associated-tab="tab_1">
            <h3>Lemons</h3>
            <div class="svg_container svg_lemon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
            <path fill="#FFE600" d="M67.7 97.9c1.9-1.3 2.8-3 2.8-5.7-.1-3.5 3.6-9.5 5.8-12.5h-.1c8-9.7 10.3-23.5 4.7-35.7-5.2-11.4-16-18.6-27.7-19.7 0 0-10.7-2.9-13.4-5.1-3.2-2.6-7.3-.6-9.1.7-1.9 1.3-2.7 3-2.7 5.7.1 3.5-3.4 9.6-5.6 12.6-6.9 9.6-8.6 22.4-3.3 33.9C24.1 83 34 90 45.1 91.6c0 0 9.9 2.4 13.5 6.7 2.6 3.3 7.3.9 9.1-.4z" />
            <path fill="#FFF181" d="M21.8 45.9c.2.3.1.7-.3 1s-.8.3-1 0-.1-.7.3-1c.3-.3.8-.3 1 0zM24.3 40.6c.3.2.3.6.1 1-.2.4-.7.5-.9.3-.3-.2-.3-.6-.1-1 .2-.3.7-.4.9-.3zM32 42.2c.2.3.1.7-.3 1-.4.3-.8.3-1 0s-.1-.7.3-1c.4-.2.8-.2 1 0zM31 33.6c.2.3.1.7-.3 1s-.8.3-1 0-.1-.7.3-1c.3-.3.8-.3 1 0zM27 36.3c.3.2.3.6.1 1-.2.4-.7.5-.9.3-.3-.2-.3-.6-.1-1 .2-.4.7-.5.9-.3z" />
            <ellipse transform="rotate(-55.937 20.888 54.233)" fill="#FFF181" cx="20.9" cy="54.2" rx=".8" ry=".6" />
            <path fill="#FFF181" d="M27.4 42.7c.2.2.2.7-.1 1-.3.3-.8.4-1 .1-.2-.2-.2-.7.1-1s.7-.3 1-.1zM24.8 48.9c.2.2.2.7-.1 1-.3.3-.8.4-1 .1-.2-.2-.2-.7.1-1s.8-.4 1-.1zM30.7 37.5c.2.2.2.7-.1 1-.3.3-.8.4-1 .1-.2-.2-.2-.7.1-1 .3-.3.7-.3 1-.1z" />
            <path fill="#FFF" d="M67.7 35.8c-1.9 1.1-3.5-1.9-.........完整代码请登录后点击上方下载按钮下载查看