js+css实现可撕扯手写便签纸绘制效果代码-html代码-BFW代码库

js+css实现可撕扯手写便签纸绘制效果代码

代码语言：html

代码描述：js+css实现可撕扯手写便签纸绘制效果代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📝 手写便签纸</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            overflow: hidden;
        }
        
        .desk {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }
        
        /* 便签本 */
        .notepad-stack {
            position: absolute;
            width: 340px;
            height: 360px;
        }
        
        .stack-paper {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #fff9c4 0%, #fff59d 100%);
            border-radius: 3px;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .stack-paper:nth-child(1) { transform: translate(8px, 8px) rotate(2deg); }
        .stack-paper:nth-child(2) { transform: translate(6px, 6px) rotate(1deg); }
        .stack-paper:nth-child(3) { transform: translate(4px, 4px) rotate(-0.5deg); }
        .stack-paper:nth-child(4) { transform: translate(2px, 2px) rotate(0.5deg); }
        
        /* 主便签纸 */
        .note-container {
            position: relative;
            z-index: 10;
            transform-style: preserve-3d;
        }
        
        .sticky-note {
            position: relative;
            width: 340px;
            height: 360px;
            background: linear-gradient(180deg, #fff9c4 0%, #fff176 50%, #ffee58 100%);
            border-radius: 3px;
            box-shadow: 
                0 15px 35px rgba(0,0,0,0.3),
                0 5px 15px rgba(0,0,0,0.2);
            transform-origin: top center;
            transition: transform 0.1s ease;
            cursor: crosshair;
            overflow: hidden;
        }
        
        /* 便签顶部粘性条 */
        .sticky-top {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 35px;
            background: linear-gradient(180deg, 
                rgba(255,193,7,0.6) 0%, 
                rgba(255,193,7,0.3) 50%,
                transparent 100%);
            border-bottom: 1px dashed rgba(0,0,0,0.1);
        }
        
        /* 纸张纹理 */
        .paper-texture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                repeating-linear-gradient(
                    0deg,
.........完整代码请登录后点击上方下载按钮下载查看