svg tab – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { box-sizing: border-box; } body { padding: 1rem 3rem; font-family: 'Cabin', sans-serif; line-height: 1.4; min-width: 925px; } a { text-decoration: none; } .main-navigation { overflow: hidden; position: relative; padding: 0 0 0 1rem; /* &::after { content: ""; position: absolute; bottom: 16px; left: 0; width: 798px; height: 12px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); z-index: 5; }*/ } .main-navigation ul { list-style: none; padding: 0; } .main-navigation li { float: left; width: 12rem; height: 5rem; margin: 0 0 0 -1rem; position: relative; } .main-navigation li.active { z-index: 6; } .main-navigation a { position: relative; display: inline-block; color: white; width: 100%; height: 100%; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 1.4rem; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); } .main-navigation svg { width: 120%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; } .main-navigation span { position: relative; padding: 1rem 0 0 3.3rem; z-index: 2; display: inline-block; width: 100%; height: 100%; } .main-navigation .tab-1 { z-index: 4; } .main-navigation .tab-1 svg { fill: url(#tab-1-bg); } .main-navigation .tab-2 { z-index: 3; } .main-navigation .tab-2 svg { fill: url(#tab-2-bg); } .main-navigation .tab-3 { z-index: 2; } .main-navigation .tab-3 svg { fill: url(#tab-3-bg); } .main-navigation .tab-4 { z-index: 1; } .main-navigation .tab-4 svg { fill: url(#tab-4-bg); } .main-content { position: relative; z-index: 10; background: #76a0c0; margin: -1.6rem 0 0 0; padding: 3rem; border-radius: 15px; border-top-left-radius: 0; } .article { background: white; padding: 5rem; border-radius: 8px; } .article h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 3rem; color: #76a0c0; margin: 0 0 0.5rem 0; } </style> </head> <body>  <svg height="0" width="0" style="position: absolute; margin-left: -100%;"> <defs> <filter id='shadow'> <feComponentTransfer in="SourceGraphic"> <feFuncR type="discrete" tableValues="0"/> <feFuncG type="discrete" tableValues="0"/> <feFuncB type="discrete" tableValues="0"/> </feComponentTransfer> <feGaussianBlur stdDeviation="1"/> <feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer> <feOffset dx="5" dy="1" result="shadow"/> <feComposite in="SourceGraphic" /> </filter> <linearGradient id="tab-1-bg" x1="0%" y1="0%" x2="0%" y2="65%"> <stop offset="0%" style="stop-color: rgba(136, 195, 229, 1.0);" /> <stop offset="100%" style="stop-color: rgba(118, 160, 192, 1.0);" /> </linearGradient> <linearGradient id="tab-2-bg" x1="0%" y1="0%" x2="0%" y2="65%"> <stop offset="0%" style="stop-color: rgba(149, 190, 233, 1.0);" /> <stop offset="100%" style="stop-color: rgba(112, 153, 213, 1.0);" /> </linearGradient> <linearGradient id="tab-3-bg" x1="0%" y1="0%" x2="0%" y2="65%"> <stop offset="0%" style="stop-color: rgba(61, 149, 218, 1.0);" /> <stop offset="100%" style="stop-color: rgba(43, 130, 197, 1.0);" /> </linearGradient> <linearGradient id="tab-4-bg" x1="0%" y1="0%" x2="0%" y2="65%"> <stop offset="0%" style="stop-color: rgba(72, 204, 243, 1.0);" /> <stop offset="100%" style="stop-color: rgba(71, 194, 243, 1.0);" /> </linearGradient> </defs> <path id="tab-shape" class="tab-shape" d="M116.486,29.036c-23.582-8-14.821-29-42.018-29h-62.4C5.441,0.036,0,5.376,0,12.003v28.033h122v-11H116.486 z"> </svg> <nav role="navigation" class="main-navigation"> <ul> <li class="tab-1 active" data-bg-color="rgba(118, 160, 192, 1.0)"> <a href="#home"> <span>Home</span> <svg viewBox="0 0 122 40"> <use xlink:href="#tab-shape"></use> </svg> </a> </li> <li class="tab-2" data-bg-color="rgba(112, 153, 213, 1.0)"> <a href="#about"> <span>About</span> <svg viewBox="0 0 122 40"> <use xlink:href="#tab-shape"></use> </svg> </a> </li> <li class="tab-3" data-bg-color="rgba(43, 130, 197, 1.0)"> <a href="#clients"> <span>Clients</span> <svg viewBox="0 0 122 40"> <use xlink:href="#tab-shape"></use> </svg> </a> </li> <li class="tab-4" data-bg-color="rgba(71, 194, 243, 1.0)"> <a href="#contact"> <span>Contact</span> <svg viewBox="0 0 122 40"> <use xlink:href="#tab-shape"></use> </svg> </a> </li> </ul> </nav> <div class="main-content"> <article class="article"> <h2>An Article Right Here, Boss.</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa totam cumque ad repellendus ab ea repellat aperiam accusantium labore officia est culpa fugiat eaque magnam a. Labore molestias ea at maiores inventore veritatis cupiditate cum doloribus quisquam eum et asperiores!</p> </article> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> var menuItems = $('.main-navigation li'); menuItems.on("click", function(event) { menuItems.removeClass("active"); $(this).addClass("active"); $(".main-content").css({ "background": $(this).data("bg-color") }); event.preventDefault(); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » svg tab