react实现卡片堆叠的待办事项应用代码-html代码-BFW代码库

react实现卡片堆叠的待办事项应用代码

代码语言：html

代码描述：react实现卡片堆叠的待办事项应用代码

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

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

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

  
  
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--bg-color: #ddd;
	--txt-s-color: #444;
	--bg-s-color: #eee;
	--bg-t-color: #fff;
	--shadow-color: #27272727;
	--shadow-s-color: #6767672f;
	--primary-color: #6256ca;
	--txt-color: #000;
}

.dark {
	--bg-color: #030712;
	--txt-s-color: #e7e5e4;
	--bg-s-color: #334155;
	--bg-t-color: #1f2937;
	--shadow-color: #818cf827;
	--shadow-s-color: #00002f;
	--primary-color: #c4b5fd;
	--txt-color: #f9fafb;
}

body {
	font-family: sans-serif;
	background-color: var(--bg-color);
	height: 100vh;
	position: relative;
}

.button-group {
	position: absolute;
	top: 2rem;
	display: flex;
	gap: 1rem;
	inset-inline: 0;
	justify-content: center;

	button {
		width: 3rem;
		aspect-ratio: 1;
		border: none;
		outline: none;
		border-radius: 1rem;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0.75rem;
		position: relative;
		box-shadow: 0 4px;
		border: 2px solid;
		transition: box-shadow 200ms ease-in-out, translate 200ms ease-in-out;
		background-color: var(--bg-t-color);

		&:hover::before,
		&:focus-within::before {
			scale: 100%;
			translate: 0 125%;
		}

		&:active {
			box-shadow: 0 0;
			translate: 0 5%;
		}

		&::before {
			z-index: 10;
			position: absolute;
			content: var(--var-content);
			scale: 0;
			color: var(--txt-s-color);
			background-color: var(--bg-s-color);
			padding: 0.5rem;
			border-radius: 4px;
			bottom: 0px;
			transition: scale 200ms ease-in-out, translate 200ms ease-in-out;
			box-shadow: 0 2px 5px var(--shadow-color);
			text-transform: capitalize;
		}
	}

	.add {
		color: #54c392;
		--var-content: "Add";
	}

	.done {
		color: #fccd2a;
		--var-content: "Done";
	}

	.delete {
		color: #f5004f;
		--var-content: "remove";
	}
}

.todo-wrapper {
	position: absolute;
	top: 30%;
	left: 50%;
	translate: -50% -50%;
	transition: translate 200ms ease-in-out;
	z-index: 1;
}

.todo {
	width: inherit;
	aspect-ratio: 1;
	background-color: var(--bg-s-color);
	border-radius: 2px;
	box-shadow: 0 0 20px var(--shadow-s-color);
	padding.........完整代码请登录后点击上方下载按钮下载查看