分享一个破防盗链方法，亲测。。。（Referrer-Policy）
废话少说，来这的有几个不是因为盗图不显示再去搜索di，盗图一时爽 一直盗图一直爽。🤣 言归正传！盗图可耻，请尊重版权！👀 代码在此<meta name="referrer" content="never"> 好吧是个标签👅，亲测掘金是可以被盗的，详情可以看此文章 点我点我。 注意 注意 注意此标签建议不要全局使用，因为它修改了你的所有链接的 Referrer Policy 都指 no-referrer了，这样后端判断以为是浏览器直接打开资源就放行了，但是如果你的网站使用了 ga或者其他需要根据这个判断的链接人家就无法追踪你了，可以使用 iframe包裹一层，用一个单独的html加载统计代码。 下面列出 Referrer Policy 的几个参数Referrer-Policy: no-referrer Referrer-Policy: no-referrer-when-downgrade Referrer-Policy: origin Referrer-Policy: origin-when-cross-origin Referrer-Policy:...
js-面试-并发，记录下并发，并行，串行
区分 并发 并行 串行之前很容易搞混 并发和并行，所以记录一哈 并发 两个或多个事件在同一时间，间隔发生。 并行 两个或多个事件在同一时间执行 或者并发是同一实体上的多个事件而并行是不同实体上的多个事件。 来看一个并发的面试题 看前试试水 const urls = Array.from({ length: 10 }).map((v, i) => i); const sleep = url => new Promise(resolve => setTimeout(resolve, Math.random() * 3000 + 1000)) const sendRequest = (urls, limit, callback) => { const copyUrls = urls.slice(0) let index = 0; const requestUrl = () => { index += 1; ...
parabola-js demo page
.wrap { overflow: hidden; } .box-1 { position: relative; width: 70%; height: 400px; margin: 100px auto; border: 1px solid; } .r-item { position: absolute; top: 20%; right: 0; width: 50px; height: 50px; background-color: #00c4b6; } .r-target { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: #8e908c; visibility: hidden; } 抛物线测试 ...
css svg loading demo
本篇将记录一些 loading demo。 通过svg属性stroke-dashoffset 偏移和svg的差速旋转实现 loading 了解 stroke-dashoffsethttps://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset loading-1效果 .svg-loading-wrap { margin: 10px auto 10px 10px; } .svg-loading-wrap .item .load { width: 75px; animation: loading 3s linear infinite; } .svg-loading-wrap .item .load #loading-inner { stroke-dashoffset: 0; stroke-dasharray: 300; stroke-width: 10; stroke-miterlimit: 10; stroke-linecap: round; ...
css-svg实现小于12号字体
效果 .s12-wrap { display: flex; align-items: center; justify-content: center; } .s12-d { width: max-content; margin: 20px auto; } 千山鸟飞绝 - from hill to hill no bird in flight 千山鸟飞绝 - from hill to hill no bird in flight const svg = document.getElementById('size-svg'); const sText = document.getElementById('size-text'); const inp = document.getElementById('s12-inp'); let size = 12; const fontsizeHeightMap = { 1:...
css-手风琴动效
.sfq-wrap { width: 100%; min-width: 400px; margin: 100px auto; } .sfq-wrap ul, .sfq-wrap li { padding: 0; margin: 0; list-style: none; } .sfq-wrap .list { display: flex; overflow: hidden; justify-content: flex-start; align-items: flex-start; } .sfq-wrap .list > li { display: flex; justify-content: center; align-items: center; position: relative; padding: 10px; height: 500px; width: 600px; transition: width 0.5s; font-size: 18px; font-weight: bold; ...
三角边框-实心/镂空
实心边框 .sanjiao-wrap { width: 400px; min-height: 100px; padding: 20px; margin: 100px auto; border: 1px solid; } .sanjiao-box-1 { width: max-content; margin: 0 auto; border-width: 0 30px 30px; /*border-color: transparent transparent black black;*/ border-color: transparent transparent black; border-style: solid; } .sanjiao-box-2 { --width: 50px; margin-top: 20px; width: 0; height: 0; border-style: solid; ...
底部 footer 自适应
底部 footer 自适应在底部 .btn-wrap { position: relative; width: 300px; height: 500px; overflow-y: auto; margin: 100px auto; border: 1px solid; } .btn-content-wrap { min-height: 100%; text-align: center; background-color: azure; } .btn-content { padding-bottom: 40px; } .btn-footer { margin-top: -40px; background-color: #00adb5; line-height: 40px; color: #fff; text-align: center; } .btn-s-input:checked ~ .btn-content >...
css 实现毛玻璃
solution filter: blur(x px); 效果 .f-wrap { height: 400px; position: relative; background: url("/img/filter-glass/bg1.jpg") no-repeat 0 / 100% fixed; } .f-box-1 { position: absolute; /*left: 50%;*/ /*top: 50%;*/ /*transform: translate3d(-50%, -50%, 0);*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; width: 80%; height: 55%; box-sizing: border-box; padding: 66px 30px; background-color:...
绝对定位-元素宽度自动撑开
.wrap { position: relative; margin: auto; height: 30px; width: 120px; margin-bottom: 50px; border: 1px solid blue; } .wrap > div { position: absolute; border: 1px solid; } .box-1 { left: 50%; transform: translateX(-50%); } 情景当父级出现定宽高情况下，子级绝对定位元素需要宽度撑开时。原场景 我是父级 100px 子元素-撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑撑 .box-1 { left: 50%; transform: translateX(-50%); } 1. width: max-content .wrap1 { z-index: 2; ...
最新文章
