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