js+svg实现背景色跟随切换选项卡效果代码-html代码-BFW代码库

js+svg实现背景色跟随切换选项卡效果代码

代码语言：html

所属分类：选项卡

代码描述：js+svg实现背景色跟随切换选项卡效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
:root{--background-1:#8a8a44;--background-2:#9e6161;--background-3:#a17645}body{background-color:#80769c;background-color:var(--background-1);font-family:Arial,Helvetica,sans-serif}.svg_container{transition:all .2s ease-in-out;animation:minorJiggle 2.5s ease-in-out .5s infinite alternate}@keyframes minorJiggle{from{transform:rotate(0)}to{transform:rotate(20deg)}}.tabs_parent_container{color:white;max-width:400px;margin:auto;margin-top:2rem}.tabs_parent_container h3{margin:0;margin-bottom:1rem}.tabs_parent_container .tab_header{display:flex;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 .15s ease-in-out}.tabs_parent_container .tab_header .tab{position:relative;flex-grow:1;text-align:center}.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;margin:auto;display:none;box-shadow:1px 3px 5px rgba(0,0,0,0.459);position:relative;overflow:hidden}.tabs_parent_container .tab_content.visible{display:block}.tabs_parent_container .tab_content h3{color:#555;font-size:3.5rem;position:absolute;font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;left:0;top:0;margin-left:1rem}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="tabs_parent_container">
        <div class="tab_header">
            <div class="tab"><input id="tab_1" type="radio" name="tab" checked><label.........完整代码请登录后点击上方下载按钮下载查看