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 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-8.2-3.7-4.6-1.8-9-1.2-8.3-3.2.8-2 5.6-1.8 9.4-.5 4.7 1.7 8.9 6.3 7.1 7.4z" /><path fill="#009D4E" d="M35.9 25.8c-.6.3-1.4.2-2-.3-.3-.4-8.4-8.8-8.1-23.7 0-.9.8-1.6 1.7-1.6.9 0 1.6.8 1.6 1.7-.2 13.6 7.1 21.3 7.2 21.4.6.6.6 1.7 0 2.3-.2.1-.3.1-.4.2z" /><path fi.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0