svg+js实现一个备忘录待办事宜黑板点击便签落下效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+js实现一个备忘录待办事宜黑板点击便签落下效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap");
        *,
        *::before,
        *::after {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        ul {
        	list-style: none;
        }
        body {
        	min-height: 100vh;
        	padding: 2rem;
        	overflow: hidden;
        }
        body::before,
        body::after {
        	content: "";
        	position: fixed;
        	inset: 0;
        	z-index: -1;
        }
        body::after {
        	background-image: radial-gradient(circle, transparent, rgb(0 0 0 / 0.8));
        }
        body::before {
        	filter: url("#fWall");
        	background-color: var(--bodyBg);
        }
        
        .board {
        	width: min(100%, 60rem);
        	margin-inline: auto;
        	display: grid;
        	--fw: 2rem;
        	grid-template-columns: var(--fw) 1fr var(--fw);
        	grid-template-rows: var(--fw) 1fr var(--fw);
        	background-color: rgb(0 0 0);
        	font-family: "Patrick Hand", cursive;
        	font-size: 1.1rem;
        	border-radius: calc(var(--fw) / 2);
        	box-shadow: 0 1rem 0.5rem rgb(0 0 0 / 0.5);
        	cursor: grab;
        	user-select: none;
        }
        .board h1 {
        	font-size: 3rem;
        	text-align: center;
        }
        /* frame set up */
        .board .frame-t {
        	--gr: 1/2;
        	--gc: 1/4;
        	--cp: 0 0, 100% 0, calc(100% - var(--fw)) 100%, var(--fw) 100%;
        	--bd: to bottom;
        }
        .board .frame-r {
        	--gr: 1/4;
        	--gc: 3/4;
        	--cp: 0 var(--fw), 100% 0, 100% 100%, 0 calc(100% - var(--fw));
        	--bd: to left;
        }
        .board .frame-b {
        	--gr: 3/4;
        	--gc: 1/4;
        	--cp: var(--fw) 0, calc(100% - var(--fw)) 0, 100% 100%, 0 100%;
        	--bd: to top;
        }
        .board .frame-l {
        	--gr: 1/4;
        	--gc: 1/2;
        	--cp: 0 0, 100% var(--fw), 100% calc(100% - var(--fw)), 0 100%;
        	--bd: to right;
        }
        /* frame */
        .board .frame {
        	grid-row: var(--gr);
        	grid-column: var(--gc);
        	clip-path: polygon(var(--cp));
        	position: relative;
        	border-radius: calc(var(--fw) / 2);
        	overflow: hidden;
        }
        /* frame-filter/shadow */
        .board .frame::before,
        .board .frame::after {
        	content: "";
        	position: absolute;
        	inset: 0;
        }
        .board :where(.frame-t, .frame-b)::before {
        	filter: url("#fHor");
        }
        .board :where(.frame-l, .frame-r)::before {
        	filter: url("#fVer");
        }
        .board .frame::after {
        	background-image: linear-gradient(
        		var(--bd),
        		rgb(0 0 0 / 0.5),
        		rgb(255 255 255 / 0.25) 40%,
        		rgb(0 0 0 / 0) 50%,
        		rgb(255 255 255 / 0.25) 60%,
        		rgb(0 0 0 / 0.5)
        	);
        }
        .board .content {
        	--gr: 2/3;
        	--gc: 2/3;
        	background-color: rgb(220 220 220);
        	background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / 0.1));
        	color: rgb(20 20 20);
        	box-shadow: inset 0 0.25rem 0.5rem 0.125rem rgb(0 0 0 / 0.5);
        	padding: 2rem;
        	display: grid;
        	gap: 2rem;
        }
        
        .board .content > ul {
        	display: grid;
        	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        	gap: 2rem;
        }
        /* memo */
        .board .content > ul > li {
        	outline: 1px solid transparent;
        	position: relative;
        	width: 100%;
        	aspect-ratio: 1;
        	display: grid;
        	place-items: center;
        	text-align: center;
        	padding: 10%;
        	font-weight: bold;
        	background-color: var(--bc);
        	background-image: linear-gradient(
        			calc(180deg + var(--rd)),
        			rgb(0 0 0 / 0.2) 10%,
        			rgb(0 0 0 / 0) 90%,
        			rgb(255 255 255 / 0.25)
        		),
        		linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 /0.1));
        	background-size: 100% 100%, 100% 10%;
        	background-repeat: no-repeat;
        	transform-origin: top center;
        	transform-style: preserve-3d;
        	transform: rotate(var(--rd, 0deg));
        	transition: transform 125ms ease;
        }
        .board .content > ul > li:hover {
        	transform: rotate(var(--rd, 0deg)) rotateX(22.5deg);
        }
        .board .content > ul > li::before {
        	content: "";
        	position: absolute;
        	transform-origin: var(--to);
        	transform: rotate(calc(var(--rd) * -0.5)) translateZ(-1px);
        	inset: 0;
        	background-image: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.125));
        	filter: blur(2px);
        	transition: transform 125ms ease;
        }
        .board .content > ul > li:hover::before {
        	transform: rotate(calc(var(--rd) * -0.5)) translateZ(-1px) rotateX(-10deg)
        		scaleY(1.05);
        }
        
        .board .content > ul > li > ul {
        	font-weight: normal;
        }
        
        button {
        	display: block;
        	margin-inline: auto;
        	margin-top: 1rem;
        	padding: 0.25rem 0.5rem;
        }
        
        /* memo drop */
        .board .content > ul > li.drop {
        	animation: dropAnimation 4s linear forwards;
        	z-index: 999;
        }
        .board .content > ul > li.drop::before {
        	opacity: 0.5;
        }
        
        @keyframes dropAnimation {
        	10% {
        		transform: rotate(var(--rd, 0deg)) rotateX(80deg);
        	}
        	20% {
        		transform: rotate(var(--rd, 0deg)) translateY(200px) rotateX(80deg)
        			rotateY(10deg);
        	}
        	32% {
        		transform: rotate(var(--rd, 0deg)) translateY(400px) rotateX(85deg)
        			rotateY(0deg);
        	}
        	46% {
        		transform: rotate(var(--rd, 0deg)) translateY(600px) rotateX(80deg)
        			rotateY(10deg);
        	}
        	52% {
        		transform: rotate(var(--rd, 0deg)) translateY(800px) rotateX(75deg)
        			rotateY(0deg);
        	}
        	68% {
        		transform: rotate(var(--rd, 0deg)) translateY(1000px) rotateX(80deg)
        			rotateY(-10deg);
    .........完整代码请登录后点击上方下载按钮下载查看