svg+js实现卡通水果选项卡tab效果代码
代码语言: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-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 fill="#010101" d="M55.5 65.5c-.3 0-.5-.2-.5-.5s.2-.5.5-.5c1 0 1.6-.4 1.8-.8.1-.2.2-.5 0-.9-.3-.5-1.4.1-1.4.1-.2.1-.5.1-.6-.1-.2-.2-.1-.5 0-.6.3-.3.7-.8.6-1.2 0-.1 0-.2-.2-.3-.3-.2-.5-.2-.7-.2-.6.2-1.2 1.3-1.4 1.6-.1.2-.4.4-.6.3-.2-.1-.4-.4-.3-.6.1-.2.8-1.9 2-2.2.4-.1.9-.1 1.5.3.3.3.5.6.6 1 0 .3 0 .5-.1.8.5 0 1 .1 1.3.7.4.6.4 1.3.1 1.9-.4.7-1.5 1.2-2.6 1.2zM48.1 59.1h-1.5l-.1-1.5c0-.5-.4-.9-.9-.9s-.9.4-.9.9l.1 1.5h-1.5c-.5 0-.9.4-.9.9s.4.9.9.9h1.5l.1 1.5c0 .5.4.9.9.9s.9-.4.9-.9l-.1-1.5h1.5c.5 0 .9-.4.9-.9s-.4-.9-.9-.9zM58.7 54l-1.3-.8.7-1.4c.2-.4.1-1-.4-1.2-.4-.2-1-.1-1.2.4l-.7 1.3-1.3-.7c-.4-.2-1-.1-1.2.3-.2.4-.1 1 .3 1.2l1.4.9-.7 1.4c-.2.4-.1 1 .4 1.2.4.2 1 .1 1.2-.4l.7-1.3 1.3.7c.4.2 1 .1 1.2-.3.2-.5.1-1-.4-1.3z" /> <path fill="#00662F" d="M18.4 10.5c3.2-4.7 9.3-6.1 9.3-6.1s1 6.2-2.2 10.9-9.3 6.1-9.3 6.1-1-6.2 2.2-10.9z" /> <path fill="#00A651" d="M24.7 15.1c-.8-5.6 2.8-10.7 2.8-10.7s4.8 4 5.6 9.6-2.8 10.7-2.8 10.7-4.8-4-5.6-9.6z" /> </svg> </div> </div> <div class="tab_content" data-associated-tab="tab_2"> <h3>Apples</h3> <div class="svg_container svg_apple"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve"> <path fill="#EF3D3A" d="M96.9 63.4c-3.1 23.1-26.6 39-52.5 35.5C18.5 95.5 0 73.9 3.1 50.8 5 36.9 11.4 25 25.5 20.3c0 0 25.1-8.3 33.1 9.2 0 0 7.2-9.8 22.7-1.9.8.4 2 1.1 2.8 1.8 9.8 7.8 14.4 21.8 12.8 34z" /> <circle fill="#010101" cx="34.5" cy="74" r="4.6" /> <circle fill="#FFF" cx="33.7" cy="72.9" r="2.2" /> <circle fill="#FFF" cx="36.2" cy="76.1" r="1.3" /> <ellipse transform="rotate(-83.079 31.466 81.049)" fill="#A11D57" cx="31.5" cy="81" rx="2.1" ry="5.1" /> <ellipse transform="rotate(-83.079 62.783 84.906)" fill="#A11D57" cx="62.8" cy="84.9" rx="2.1" ry="5.1" /> <path fill="#010101" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0