svg+css实现手机底部tab选项卡点击切换亮灯效果代码-html代码-BFW代码库

代码语言：html

所属分类：选项卡

代码描述：svg+css实现手机底部tab选项卡点击切换亮灯效果代码

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
        <style>
            * {
	transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: "Space Mono", monospace;
}

body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	height: 100vh;
	background-color: hsla(234, 42%, 52%, 1);
	background-image: radial-gradient(
			at 56% 30%,
			hsla(240, 90%, 69%, 1) 0px,
			transparent 50%
		),
		radial-gradient(at 19% 14%, hsla(249, 65%, 76%, 1) 0px, transparent 50%),
		radial-gradient(at 17% 62%, hsla(279, 68%, 60%, 1) 0px, transparent 50%),
		radial-gradient(at 89% 34%, hsla(316, 80%, 71%, 1) 0px, transparent 50%),
		radial-gradient(at 9% 58%, hsla(186, 69%, 71%, 1) 0px, transparent 50%),
		radial-gradient(at 0% 17%, hsla(228, 98%, 63%, 1) 0px, transparent 50%),
		radial-gradient(at 91% 47%, hsla(208, 96%, 66%, 1) 0px, transparent 50%);
}

.device_frame {
	height: 75vh;
	width: 25vw;
	min-width: 35rem;
	display: flex;
	padding: 2rem;
	align-items: flex-end;
	background-color: #0f0e17;
	border-bottom-left-radius: 3rem;
	border-bottom-right-radius: 3rem;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
}

.bar_wrapper {
	position: relative;
	width: 100%;
}

.bar {
	display: flex;
	width: 100%;
	background-color: #28223e;
	border-radius: 3rem;
	background: rgba(40, 34, 62, 0.5);
	box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 2;
}

.bar_wrapper::before {
	content: "";
	position: absolute;
	width: calc(100% / 8);
	height: 2rem;
	border-radius: 1rem;
	background-color: #f98b55;
	box-shadow: 0 0 10px -1px darkorange;
	z-index: 0;
	bottom: 0;
	margin-bottom: -0.75rem;
	transition: 300ms ease-in-out;
	transform: translatex(0%);
}

.bar_wrapper.c0::before {
	transform: translatex(50%);
}

.bar_wrapper.c1::before {
	transform: translatex(250%);
}

.bar_wrapper.c2::before {
	transform: translatex(450%);
}

.bar_wrapper.c3::before {
	transform: translatex(650%);
}

.tabItem {
	padding: 3rem;
	stroke: #ffffff55;
	color: transparent;
}

.tabItem.selected {
	stroke: transparent;
	color: white;
	transform: scale(125%);
}

.source {
	position: fixed;
	bottom: 0;
	right: 50%;
	transform: translatex(50%);
	letter-spacing: 0.25rem;
	color: #00000066;
}

.source > a {
	text-decoration: none;
	color: #c32361;
	background: white;
	border-radius: 0.5rem;
	padding: 0 1rem;
	opacity: 0.5;
}

.source > a:hover {
	opacity: 1;
}
        </style>
    
    </head>
    <body>
        <!-- partial:index.partial.html -->
        <div class="device_frame">
            <div class="bar_wrapper c0">
                <div class="bar">
                    <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" class="tabItem selected">
                        <g id="Home" transform="translate(2.500000, 2.000000)" fill="currentColor" fill-rule="nonzero" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.63477851,18.7733424 L6.63477851,15.7156161 C6.63477851,14.9350667 7.27217143,14.3023065 8.05843544,14.3023065 L10.9326107,14.3023065 C11.310188,14.3023065 11.6723007,14.4512083 11.9392882,14.7162553 C12.2062757,14.9813022 12.3562677,15.3407831 12.3562677,15.7156161 L12.3562677,18.7733424 C12.3538816,19.0978491 12.4820659,19.4098788 12.7123708,19.6401787 C12.9426757,19.8704786 13.2560494,20 13.5829406,20 L15.5438266,20 C16.4596364,20.0023499 17.3387522,19.6428442 17.9871692,19.0008077 C18.6355861,18.3587712 19,17.4869804 19,16.5778238 L19,7.86685918 C19,7.13246047 18.6720694,6.43584231 18.1046183,5.96466895 L11.4340245,0.675869015 C10.2736604,-0.251438297 8.61111277,-0.221497907 7.48539114,0.74697893 L0.967012253,5.96466895 C0.37274068,6.42195254 0.0175522924,7.12063643 0,7.86685918 L0,16.568935 C0,18.4638535 1.54738155,20 3.45617342,20 L5.37229029,20 C6.05122667,20 6.60299723,19.4562152 6.60791706,18.7822311 L6.63477851,18.7733424 Z"></path>
                        </g>
                    </svg>
                    <svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" class="tabItem" fill="currentColor" stroke-width="1.25">
                        <g transform="translate(2.000000, 3.000000)" fill="" fill-rule="nonzero">
                            <path d="M14.5155556,3.55271368e-15 C17.9644444,3.55271368e-15 20,1.98459316 20,5.38180067 L20,5.38180067 L15.7688889,5.38180067 L15.7688889,5.41646606 C13.8052098,5.41646606 12.2133333,6.96848811 12.2133333,8.88300433 C12.2133333,10.7975206 13.8052098,12.3495426 15.7688889,12.3495426 L15.7688889,12.3495426 L20,12.3495426 L20,12.6615311 C20,16.0154068 17.9644444,18 14.5155556,18 L14.5155556,18 L5.48444444,18 C2.03555556,18 -1.77635684e-14,16.0154068 -1.77635684e-14,12.6615311 L-1.77635684e-14,12.6615311 L-1.776.........完整代码请登录后点击上方下载按钮下载查看