svg+css实现自定义数量墙壁上的实体开关效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现自定义数量墙壁上的实体开关效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');

:root {
	--last-shadow: linear-gradient(90deg, rgba(80, 80, 80, 0) 50%, rgba(80, 80, 80, 0.1) 100%);
}

body {
	position: relative;
	height: 100dvh;
	margin: 0;
	padding: 0;
	background-color: #FCFCFA;
	font-family: 'Space Grotesk', sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

* {
	box-sizing: border-box;
}

main {
	position: relative;
	height: 100dvh;
	max-height: -webkit-fill-available;
	max-width: 100vw;
	overflow: hidden;
}

/*	*/

svg {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: -1;
}

svg path {
	transform: translateX(calc((12.5% * -1) * (var(--number) - 1))) scaleX(calc(1 + (0.25 * (var(--number) - 1))));
	transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

svg path:nth-of-type(2) {
	transition-duration: 1s;
}

svg path:nth-of-type(3) {
	transition-duration: 1.5s;
}

svg path:nth-of-type(4) {
	transition-duration: 2s;
}

svg path:nth-of-type(5) {
	transition-duration: 2.5s;
}

input.checkbox#switch-1:checked ~ svg path:nth-of-type(1),
input.checkbox#switch-2:checked ~ svg path:nth-of-type(2),
input.checkbox#switch-3:checked ~ svg path:nth-of-type(3),
input.checkbox#switch-4:checked ~ svg path:nth-of-type(4),
input.checkbox#switch-5:checked ~ svg path:nth-of-type(5) {
	opacity: 0;
}

/*	*/

section.wrapper {
	display: flex;
	flex-direction: column;
	width: 12.500rem;
	min-height: 100vh;
	margin: auto;
	padding: 80px 0;
}

.switch-1 {
	max-width: 12.500rem;
	padding: 6px;
	border-radius: 18px;
	background-color: #EEEEEE;
}

.switch-1 .inner-border {
	padding: 2px;
	border-radius: 12px;
	background: linear-gradient(135deg, #B7B7B7 0%, #CCCCCC 100%);
}

.switch-1 .switch-container {
	display: flex;
	gap: 2px;
}

.switch-1 .switch-container .switch {
	position: relative;
	flex-basis: 100%;
	display: block;
	height: 8.250rem;
	background: linear-gradient(180deg, #FAF7F7 0%, #F4F4F4 100%);
	cursor: pointer;
	overflow: hidden;
	display: none;
}

.switch, .switch *,
.switch::before, .switch::after {
	transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.switch-1 .switch-container .switch:first-of-type {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.switch-1 .switch-container .switch:last-of-type {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.switch-1 .switch-container .switch .text {
	text-indent: -999rem;
	overflow: hidden;
}

.switch-1 .switch-container .switch::before,
.switch-1 .switch-container .switch::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	height: calc(20% + 11px);
	width: 100%;
	z-index: 0;
}

.switch-1 .switch-container .switch:first-of-type::before {
	background: linear-gradient(90deg, rgba(249, 249, 249, 0.75) 0%, rgba(249, 249, 249, 0) 50%);
	
}

.switch-1 .switch-container .switch:last-of-type::after {
	background: var(--last-shadow);
}

/*	*/

#parent[style*="--number: 1"] .switch:nth-of-type(-n+1) {
	display: block;
}

#parent[style*="--number: 1"] .switch:nth-of-type(1) {
	border-radius: 10px;
}

#parent[style*="--number: 2"] .switch:nth-of-type(-n+2) {
	display: block;
}

#parent[style*="--number: 2"] .switch:nth-of-type(2) {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#parent[style*="--number: 3"] .switch:nth-of-type(-n+3) {
	display: block;
}

#parent[style*="--number: 3"] .switch:nth-of-type(3) {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#parent[style*="--number: 4"] .switch:nth-of-type(-n+4) {
	display: block;
}

#parent[style*="--number: 4"] .switch:nth-of-type(4) {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

#parent[style*="--number: 5"] .switch {
	display: block;
}.........完整代码请登录后点击上方下载按钮下载查看