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

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

代码语言：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), .........完整代码请登录后点击上方下载按钮下载查看