功能概述本文介绍如何在个人博客中实现文章阅读限制功能。博主可将文章内容部分展示如前 1/3用户需关注公众号并通过验证后方可阅读全文。这是一种常见的内容营销方式既能展示文章价值也能引导用户关注公众号。功能特点智能内容截断自动计算文章高度仅展示前 1/3 内容优雅视觉提示底部虚化遮罩暗示更多内容待解锁一键解锁交互简洁的“查看全文”按钮点击触发验证流程公众号验证扫码关注公众号发送关键词获取验证码全局解锁机制一次验证全站文章自动解锁平滑展开动画解锁后文章以动画形式完整展开响应式设计适配桌面端与移动端技术实现1. HTML 结构HTML 部分主要包含三块文章内容容器、解锁区域含虚化遮罩和按钮、验证弹窗。dividarticle-content-wrapperdividarticle-contentclassarticle-content-full!-- 完整文章内容 --/divdividarticle-unlock-sectionclassarticle-unlock-sectiondividarticle-blur-overlayclassarticle-blur-overlay/divdivclassunlock-expand-baronclickshowVerifyModal()spanclassunlock-text查看全文/spanspanclassunlock-arrow▼/span/div/div/divdividverify-modalclassverify-modaldivclassverify-modal-contentdivclassverify-headerh3验证解锁/h3/divdivclassverify-bodydivclassqrcode-sectionimgsrc公众号二维码alt公众号二维码p1. 扫码关注公众号/pp2. 发送博客获取验证码/p/divdivclassverify-input-sectioninputtypetextidverify-codeplaceholder请输入验证码buttononclickverifyCode()验证/button/div/div/div/div2. CSS 样式核心文章内容截断与过渡通过max-height与 CSS 变量控制锁定状态的高度并添加平滑过渡效果。#article-content{transition:max-height 0.8scubic-bezier(0.4,0,0.2,1);overflow:hidden;}#article-content.article-locked{max-height:var(--content-one-third,600px);}#article-content.article-unlocked{max-height:none!important;}虚化遮罩位于文章底部与按钮之间营造“渐隐渐现”的视觉效果。.article-blur-overlay{position:absolute;top:-80px;left:0;right:0;height:80px;background:linear-gradient(to bottom,rgba(255,255,255,0)0%,rgba(255,255,255,0.5)30%,rgba(255,255,255,0.85)70%,rgba(255,255,255,1)100%);pointer-events:none;z-index:1;}解锁按钮采用柔和渐变背景与悬停动效提升交互感知。.unlock-expand-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 24px;background:linear-gradient(135deg,#fff5f5 0%,#fff0f0 100%);border:1px dashed #ff6b6b;border-radius:8px;cursor:pointer;transition:all 0.3s ease;z-index:2;}.unlock-expand-bar:hover{background:linear-gradient(135deg,#ffe0e0 0%,#ffd5d5 100%);border-color:#ff5252;transform:translateY(-1px);box-shadow:0 4px 12pxrgba(255,107,107,0.15);}3. JavaScript 核心逻辑配置项constCONFIG{STORAGE_KEY:blog_global_unlocked,// 全局解锁标识VERIFY_CODES:[xxxxxx],// 预设验证码LOCK_ENABLED:true// 功能总开关};检查全局解锁状态functionisGlobalUnlocked(){try{returnlocalStorage.getItem(CONFIG.STORAGE_KEY)true;}catch(e){returnfalse;}}锁定文章展示前 1/3获取文章真实高度后计算 1/3 高度并通过 CSS 变量应用到样式中。functionlockArticle(){constcontentdocument.getElementById(article-content);constunlockSectiondocument.getElementById(article-unlock-section);constblurOverlaydocument.getElementById(article-blur-overlay);// 临时移除 max-height 以获取完整高度constoriginalMaxHeightcontent.style.maxHeight;content.style.maxHeightnone;constfullHeightcontent.scrollHeight;content.style.maxHeightoriginalMaxHeight;constoneThirdHeightMath.floor(fullHeight/3);content.style.setProperty(--content-one-third,oneThirdHeightpx);content.classList.add(article-locked);content.classList.remove(article-unlocked);unlockSection.style.displayblock;blurOverlay.style.displayblock;}解锁文章移除锁定样式隐藏解锁区域并触发高度过渡动画。functionunlockArticle(){constcontentdocument.getElementById(article-content);constunlockSectiondocument.getElementById(article-unlock-section);constblurOverlaydocument.getElementById(article-blur-overlay);content.classList.remove(article-locked);content.classList.add(article-unlocked);unlockSection.classList.add(hidden);blurOverlay.classList.add(hidden);setTimeout((){content.style.maxHeight;},800);showSuccessToast();}验证验证码支持预设验证码校验成功时写入全局解锁状态并触发解锁。functionverifyCode(){constinputdocument.getElementById(verify-code);constcodeinput.value.trim().toUpperCase();if(!code){showError(请输入验证码);return;}if(CONFIG.VERIFY_CODES.includes(code)){localStorage.setItem(CONFIG.STORAGE_KEY,true);unlockArticle();closeVerifyModal();input.value;}else{showError(验证码错误请重新输入);input.style.animationshake 0.5s;setTimeout(()input.style.animation,500);}}4. 解锁成功提示动画使用 SVG 描边动画实现勾选效果增强成功反馈。.success-circle{stroke:#00b894;stroke-width:3;stroke-dasharray:166;stroke-dashoffset:166;animation:stroke 0.6scubic-bezier(0.65,0,0.45,1)forwards;}.success-check{stroke:#00b894;stroke-width:3;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke 0.3scubic-bezier(0.65,0,0.45,1)0.3s forwards;}keyframesstroke{100%{stroke-dashoffset:0;}}实现要点1. 高度计算技巧由于max-height会限制元素高度需先临时移除才能获取真实高度。上述lockArticle中的处理方式可避免直接操作原始样式兼容性较好。2. CSS 变量动态设置将计算得到的 1/3 高度存入 CSS 变量--content-one-third便于在样式表中统一控制同时也为后续调整留出扩展空间。3. 平滑过渡动画使用cubic-bezier(0.4, 0, 0.2, 1)缓动函数让文章展开过程更加自然避免生硬变化。4. 全局解锁机制利用localStorage存储blog_global_unlocked标识用户验证一次后访问任何页面都会自动处于解锁状态提升体验。5. 响应式设计桌面端解锁按钮水平布局与文字并排移动端按钮宽度 100%便于点击后续优化建议后端 API 验证当前验证码为前端硬编码建议改为后端接口验证支持动态生成与过期校验微信公众号对接接入微信 API实现自动回复验证码提升自动化程度验证码有效期增加有效期与单次使用限制增强安全性统计功能记录解锁次数、转化率等数据便于分析效果A/B 测试针对按钮文案、样式、弹窗位置等进行对比实验优化转化率总结文章阅读限制功能是内容营销中轻量且有效的工具。通过前端截断、视觉引导与验证解锁的组合既保留文章核心吸引力又能引导用户完成关注转化。本文实现的方案涵盖了布局控制、动态高度计算、状态持久化与交互动画等多个前端常见技术点适合作为博客系统的功能扩展参考。