svg+css实现图标菜单点击背景色跟随切换代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现图标菜单点击背景色跟随切换代码

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

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        html {
        	height:100%;
        	font-size:1.3vw
        }
        @media(min-width:768px) {
        	html {
        	font-size:62.5%
        }
        }body {
        	height:100%;
        	display:flex;
        	align-items:center;
        	justify-content:center;
        	background-color:#e4a924;
        	transition:background-color .55s;
        	will-change:background-color;
        	margin:0
        }
        .menu__item {
        	width:8.5rem;
        	height:8.5rem;
        	border-radius:12.5rem;
        	background:#f3f3f3;
        	display:inline-block;
        	margin-left:1.1rem;
        	animation-name:close;
        	animation-duration:0s;
        	will-change:width background-color;
        	transition:background .55s;
        	vertical-align:top;
        	display:inline-flex;
        	align-items:center;
        	justify-content:center;
        	box-shadow:0 1px rgba(0,0,0,0.1)
        }
        .menu__item:first-child {
        	margin-left:0
        }
        .menu__item--animate {
        	animation-duration:.5s
        }
        .menu__item--active {
        	width:17rem;
        	animation-name:open
        }
        @keyframes open {
        	0% {
        	width:8.5rem
        }
        40% {
        	width:18.5rem
        }
        80% {
        	width:17rem
        }
        100% {
        	width:17rem
        }
        }@keyframes close {
        	0% {
        	width:17rem
        }
        40% {
        	width:7rem
        }
        80% {
        	width:8.5rem
        }
        100% {
        	width:8.5rem
        }
        }.menu__item--active.menu__item--yellow {
        	background:#fabe2b
        }
        .menu__item--active.menu__item--red {
        	background:#f43768
        }
        .menu__item--active.menu__item--green {
        	background:#45e1a3
        }
        .menu__item--active.menu__item--purple {
        	background:#c152da
        }
        .menu__item svg {
        	fill:#a6a6a6;
        	width:4.5rem;
        	height:4.5rem;
        	transtiion:fill .55s;
        	will-change:fill
        }
        .menu__item--active svg {
        	fill:#fffdfe
        }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <nav class="menu"><a href="#" class="menu__item menu__item--yellow menu__item--active" data-background="e4a924"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="Bounding_Boxes"><g id="ui_x5F_spec_x5F_header_copy_2"></g><path fill="none" d="M0,0h24v24H0V0z"></path></g><g id="Rounded_1_"><g id="ui_x5F_spec_x5F_header_copy_6"></g><path d="M20,2H4C2.9,2,2.01,2.9,2.01,4L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M7,9h10c0.55,0,1,0.45,1,1v0 c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1v0C6,9.45,6.45,9,7,9z M13,14H7c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6 c0.55,0,1,0.45,1,1v0C14,13.55,13.55,14,13,14z M17,8H7C6.45,8,6,7.55,6,7v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0 C18,7.55,17.55,8,17,8z"></path></g></svg></a>
        <a href="#" class="menu__item menu__item--red" data-background="c92142"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="Bounding_Boxes"><g id="ui_x5F_spec_x5F_header_copy_2"></g><path fill="none" d="M0,0h24v24H0V0z"></path></g><g id="Rounded"><path d="M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4S8,5.79,8,8S9.79,12,12,12z M12,14c-2.67,0-8,1.34-8,4v1c0,0.55,0.45,1,1,1h14 c0.55,0,1-0.45,1-1v-1C20,15.34,14.67,14,12,14z"></path></g></svg></a>
        <a href="#" class="menu__item menu__item--green" data-background="37b983"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="Bounding_Boxes"><path fill="none" d="M0,0h24v24H0V0z"></path></g><g id="Rounded"><path d="M12,8c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S14.21,8,12,8z M20.94,11C20.48,6.83,17.17,3.52,13,3.06V2 c0-0.55-0.45-1-1-1h0c-0.55,0-1,0.45-1,1v1.06C6.83,3.52,3.52,6.83,3.06,11H2c-0.55,0-1,0.45-1,1v0c0,0.55,0.45,1,1,1h1.06 c0.46,4.17,3.77,7.48,7.94,7.94V22c0,0.55,0.45,1,1,1h0c0.55,0,1-0.45,1-1v-1.06c4.17-0.46,7.48-3.77,7.94-7.94H22 c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H20.94z M12,19c-3.87,0-7-3.13-7-7s3.13-7,7-7s7,3.13,7,7S15.87,19,12,19z"></path></g></svg></a>
        <a href="#" class="menu__item menu__item--purple" data-background="9f32b8"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><g id="Header_x2F_BG" display="none"><rect x="-402" y="-314" display="inline" fill="#F1F1F2" width="520" height="520"></rect></g><g id="Bounding_Boxes"><g id="ui_x5F_spec_x5F_header_copy_3" display="none"></g><path fill="none" d="M0,0h24v24H0V0z"></path></g><g id="Rounded"><g id="ui_x5F_spec_x5F_header_copy_5" display="none"></g><path d="M19.43,12.98c0.04-0.32,0.07-0.64,0.07-0.98s-0.03-0.66-0.07-0.98l2.11-1.65c0.19-0.15,0.24-0.42,0.12-0.64l-2-3.46 c-0.12-0.22-0.39-0.3-0.61-0.22l-2.49,1c-0.52-0.4-1.08-0.73-1.69-0.98l-0.38-2.65C14.46,2.18,14.25,2,14,2h-4 C9.75,2,9.54,2.18,9.51,2.42L9.13,5.07C8.52,5.32,7.96,5.66,7.44,6.05l-2.49-1c-0.23-0.09-0.49,0-0.61,0.22l-2,3.46 C2.21,8.95,2.27,9.22,2.46,9.37l2.11,1.65C4.53,11.34,4.5,11.67,4.5,12s0.03,0.66,0.07,0.98l-2.11,1.65 c-0.19,0.15-0.24,0.42-0.12,0.64l2,3.46c0.12,0.22,0.39,0.3,0.61,0.22l2.49-1c0.52,0.4,1.08,0.73,1.69,0.98l0.38,2.65 C9.54,21.82,9.75,22,10,22h4c0.25,0,0.46-0.18,0.49-0.42l0.38-2.65c0.61-0.25,1.17-0.59,1.69-0.98l2.49,1 c0.23,0.09,0.49,0,0.61-0.22l2-3.46c0.12-0.22,0.07-0.49-0.12-0.64L19.43,12.98z M12,15.5c-1.93,0-3.5-1.57-3.5-3.5 s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.93,15.5,12,15.5z"></path></g><g id="Sharp" display="none">&l.........完整代码请登录后点击上方下载按钮下载查看