js实现奇偶数筛选列表效果代码-html代码-BFW代码库

js实现奇偶数筛选列表效果代码

代码语言：html

所属分类：其他

代码描述：js实现奇偶数筛选列表效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&amp;display=swap'>

    <style>
        @font-face {
        	font-family: "Ostrich Sans";
        	src: url("//repo.bfw.wiki/bfwrepo/font/ostrichsansrounded-medium.woff2")
        			format("woff2"),
        		url("//repo.bfw.wiki/bfwrepo/font/ostrichsansrounded-medium.woff")
        			format("woff");
        	font-weight: normal;
        	font-style: normal;
        }
        
        *,
        ::after,
        ::before {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        
        :root {
        	--odd-color: #c51df8;
        	--even-color: #a5dd09;
        	--base-color: #585858;
        	--bkg-color: #2e2b2b;
        	--white-color: #cccccc;
        }
        
        body {
        	min-height: 100vh;
        	display: grid;
        	justify-items: center;
        	font-family: "Ostrich Sans", sans-serif;
        	background-color: var(--bkg-color);
        	background-image: url("//repo.bfw.wiki/bfwrepo/image/62b408e76a0b1.png");
        	color: var(--base-color);
        }
        
        header {
        	margin: 2em 0 4em;
        }
        
        input[type="radio"] {
        	-webkit-appearance: none;
        	appearance: none;
        	background-color: var(--bkg-color);
        	margin: 0;
        }
        
        label {
        	font-size: 1.5rem;
        	font-weight: bold;
        	color: var(--base-color);
        	cursor: pointer;
        	transition: color 0.3s;
        }
        
        .container {
        	width: 70vw;
        	height: min-content;
        	padding: 2em;
        }
        
        ol {
        	text-align: center;
        	list-style: none;
        }
        
        li {
        	font-size: clamp(4rem, 10vw, 7rem);
        	line-height: clamp(3rem, 9vw, 6rem);
        	display: inline-block;
        	transition: color 0.3s;
        }
    </style>



</head>

<body>
    <header>
        <label for="color1" data-col="color1">
		<input type="radio" id="color1" name="fontColor" value="base">
		None
	</label>

        <label for="color2" data-col="color2">
		<input type="radio" id="color2" name="fontColor" value="odd">
		Odd
	</label>

        <label for="color3" data-col="color3">
		<input type="radio" id="color3" name="fontColor" value="even">
		Even
	</label>

        <label for="color4" data-col="color4">
		<input type="radio" id="color4" name="fontColor" value="both">
		Both
	</label>
    </header>
.........完整代码请登录后点击上方下载按钮下载查看