前端用户体验优化：JS&CSS各种效果代码片段

时间：2023-04-02 22:18:33 HTML

前言不定期更新。某些内容仅与webkit内核兼容。其他内核自行查询密度可控的虚线分割线。css.line{高度：1px；宽度：100%；变换：scaleY(0.4)；-webkit-transform:scaleY(0.4);背景图像：线性渐变（向右，#ccc0%，#ccc50%，透明50%）；背景大小：4px1px；background-repeat:repeat-x;

通过改变background-size值来控制密度显示。通过各属性的x、y、direction转换，横/竖分割线文字淡出css.article{position:relative;}.mask{position:absolute;宽度：100%；底部：0；左：0；高度：60px；背景：线性渐变（顶部，rgba（255,255,255,0），#fff）；background:-webkit-linear-gradient(top,rgba(255,255,255,0),#fff);春眠不知晓
处处闻鸟鸣
夜风雨
知花落多少

引导用户下面还有内容，什么时候接近底部,隐藏div.mask弹窗禁止/恢复背景层滚动document.getElementById('modal').onclick=function(){switchModalStatus(false)};}functionswitchModalStatus(needShow){varmodal=document.getElementById('modal');如果（需要显示）{modal.style.display='块';禁用身体滚动（）；}else{modal.style.display='none';enableBodyScroll();}}functiondisableBodyScroll(){varbody=document.body;window.stTemp=Math.max(body.scrollTop,document.documentElement.scrollTop);body.style.overflow="隐藏";body.style.position="固定";body.style.top=(-window.stTemp+'px');}functionenableBodyScroll(){varbody=document.body;body.style.overflow="滚动";body.style.position="static";body.style.top='0px';body.scrollTop=window.stTemp;document.documentElement.scrollTop=window.stTemp;}.modal{位置：固定；顶部：0；左：0；宽度：100%；高度：100%；背景：rgba(0,0,0,.5);z-索引:1;}.modal>.content{位置：绝对；顶部：50%；左：50%；转换：translateX(-50%)translateY(-50%)；-webkit-transform:translateX(-50%)translateY(-50%);填充：10px；宽度：50%；背景：白色；border-radius:12px;点击弹出框我是弹窗