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

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

代码语言：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">.........完整代码请登录后点击上方下载按钮下载查看