js实现可拖拽破案线索便签纸代码-html代码-BFW代码库

js实现可拖拽破案线索便签纸代码

代码语言：html

所属分类：拖放

代码描述：js实现可拖拽破案线索便签纸代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 background: #1a1410;
 font-family: "Courier Prime", monospace;
 padding: clamp(0.5rem, 2vw, 1.5rem);
 min-height: 100vh;
}

.board {
 position: relative;
 max-width: 1100px;
 margin: 0 auto;
 background: #b58a4e;
 background-image: radial-gradient(
   circle at 20% 30%,
   rgba(0, 0, 0, 0.06) 0 2px,
   transparent 3px
  ),
  radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.05) 0 2px, transparent 3px),
  radial-gradient(circle at 45% 85%, rgba(0, 0, 0, 0.06) 0 2px, transparent 3px);
 background-size: 24px 24px, 31px 31px, 19px 19px;
 border: 14px solid #5b3a1a;
 border-image: linear-gradient(45deg, #6b4423, #3d2710, #6b4423) 1;
 box-shadow: inset 0 0 120px rgba(60, 30, 10, 0.5),
  0 20px 60px rgba(0, 0, 0, 0.6);
 padding: clamp(1rem, 3vw, 2.5rem);
 overflow: hidden;
}
.board-grain {
 position: absolute;
 inset: 0;
 pointer-events: none;
 opacity: 0.5;
 z-index: 1;
 background: repeating-linear-gradient(
  115deg,
  transparent 0 3px,
  rgba(0, 0, 0, 0.025) 3px 4px
 );
}

/* faint flicker over the board */
.board-flicker {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 9;
 background: rgba(20, 10, 5, 0.05);
 mix-blend-mode: multiply;
 animation: flick 6s infinite steps(1);
}
@keyframes flick {
 0%,
 93%,
 100% {
  opacity: 0;
 }
 94% {
  opacity: 0.5;
 }
 95% {
  opacity: 0.05;
 }
 96% {
  opacity: 0.35;
 }
}

/* CLASSIFIED stampoccasionally */
.classified {
 position: absolute;
 top: 38%;
 left: 50%;
 transform: translate(-50%, -50%) rotate(-18deg);
 font-family: "Special Elite";
 font-size: clamp(3rem, 12vw, 7rem);
 color: rgba(140, 16, 16, 0);
 border: 0.12em solid rgba(140, 16, 16, 0);
 padding: 0.05em 0.25em;
 letter-spacing: 0.1em;
 pointer-events: none;
 z-index: 8;
 transition: none;
}
.classified.show {
 animation: bleed 2.4s ease forwards;
}
@keyframes bleed {
 0% {
  color: rgba(140, 16, 16, 0);
  border-color: rgba(140, 16, 16, 0);
 }
 20% {
  color: rgba(140, 16, 16, 0.42);
  border-color: rgba(140, 16, 16, 0.42);
 }
 80% {
  color: rgba(140, 16, 16, 0.42);
  border-color: rgba(140, 16, 16, 0.42);
 }
 100% {
  color: rgba(140, 16, 16, 0);
  border-color: rgba(140, 16, 16, 0);
 }
}

.case-header {
 position: relative;
 z-index: 6;
 margin-bottom: 1.5rem;
}
.stamp {
 display: inline-block;
 font-family: "Special Elite";
 color: #a01818;
 border: 3px solid #a01818;
 padding: 0.2em 0.7em;
 font-size: clamp(0.7rem, 1.6vw, 0.95rem);
 letter-spacing: 0.15em;
 transform: rotate(-4deg);
 opacity: 0.85;
 margin-bottom: 0.6rem;
}
.case-title {
 font-family: "Anton";
 line-height: 0.9;
 color: #1a1410;
}
.case-title .r {
 display: inline-block;
 background: #f4ecd8;
 color: #111;
 padding: 0 0.08em;
 font-size: clamp(2rem, 7vw, 4rem);
 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
.........完整代码请登录后点击上方下载按钮下载查看