LBZCC

发现更多乐趣!

CSS实现单行文字加载效果

2025年06月04日
<h4>效果</h4>
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}

@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}

@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<p class="text-loading">折腾猫正在持续等待着一个心仪的人</p>
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>

何如让iframe标签的禁止视频自动播放?

2025年06月04日
<iframe src="//player.bilibili.com/player.html?isOutside=true&amp;aid=114336005689913&amp;bvid=BV1X1oLY2EUr&amp;cid=29411315131&amp;p=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="500px" width="100%"></iframe>
<h3>修改方法</h3>
<ol>
<li>添加<span>autoplay=0</span>参数:在 src 的 URL 末尾添加<span>&amp;autoplay=0</span>,明确禁止自动播放。
<ul><li>例子:https://www.youtube.com/embed/VIDEO_ID&amp;autoplay=0</li></ul>
</li>
<li><strong>确保没有 allow="autoplay"</strong>:检查 iframe 标签是否包含该属性,如有则移除。</li>
</ol>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<iframe
src="//player.bilibili.com/player.html?isOutside=true&aid=114336005689913&bvid=BV1X1oLY2EUr&cid=29411315131&p=1&autoplay=0"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
height="500px"
width="100%"
></iframe>
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>
<h4>说明</h4>
<ul>
<li><strong>autoplay=0</strong>:这是关键参数,强制播放器不自动播放。</li>
<li><strong>其他参数</strong>:保留了原有的视频 ID、分 P 等参数,仅添加了<code>&amp;autoplay=0</code>。</li>
</ul>
<blockquote>如果修改后仍有自动播放问题,可能是 B 站播放器的默认行为或浏览器缓存导致,可尝试清除缓存或在隐私模式下测试。</blockquote>

解决PUBG Shield Reporter中MSVCP140.dll缺失问题

2025年06月04日
<img src="https://lbz.cc/tuchuang/uploads/683ff22c74d330.18679721.png" alt="文章图片">
这个错误是由于缺少Microsoft Visual C++ Redistributable运行时组件中的MSVCP140.dll文件导致的。以下是几种解决方法:
<h3>解决方案</h3>
<ol start="1">
<li>
<p><strong>安装/修复Visual C++ Redistributable</strong></p>
<ul>
<li><p>前往微软官网下载最新版Visual C++ Redistributable</p></li>
<li><p>下载地址:<a href="https://aka.ms/vs/17/release/vc_redist.x64.exe" target="_blank">https://aka.ms/vs/17/release/vc_redist.x64.exe</a></p></li>
<li><p>运行安装程序并按照提示完成安装</p></li>
</ul>
</li>
<li><p><strong>通过Steam验证游戏文件完整性</strong></p><ul><li><p>打开Steam客户端</p></li>
<li><p>右键点击PUBG游戏 &gt; 属性 &gt; 本地文件 &gt; 验证游戏文件的完整性</p></li>
<li><p>等待验证完成,Steam会自动修复缺失或损坏的文件</p></li></ul></li>
<li><p><strong>重新安装游戏</strong></p><ul><li><p>如果上述方法无效,可以尝试完全卸载PUBG后重新安装</p></li></ul></li>
<li><p><strong>手动放置DLL文件(不推荐)</strong></p><ul><li><p>从可信来源获取MSVCP140.dll文件</p></li>
<li><p>将其复制到游戏安装目录的Win64文件夹中(路径:D:\Steam\steamapp\common\PUBG\IsGame\Binaries\Win64\)</p></li>
</ul></li>
</ol>
<h3>注意事项</h3>
<ul>
<li><p>建议优先使用前两种官方推荐的方法</p></li>
<li><p>确保你的Windows系统是最新版本</p></li>
<li><p>如果问题仍然存在,可能需要检查系统是否有其他问题或考虑重装系统</p></li></ul>
<blockquote>这个错误通常不会影响游戏运行,只是影响了举报功能的正常工作。</blockquote>

愚人节整蛊代码:你屏幕上有根毛

2025年06月04日
愚人节的时候,发现手机百度网页版出了一个有意思的小彩蛋:会在屏幕上放上一根毛,非常逼真。于是乎就把它给存了下来,并进行了一点点优化改进——限制了最大宽度,并加入了随机旋转角度,这下效果更加完美了。 以下是优化后的完整 js 代码,将代码插入到你的网页中即可看到效果! 代码中的图片地址可能后续会失效,建议保存到本地使用。
<script>
/***
* 愚人节彩蛋 - 你屏幕上有根毛
* 出处:https://www.baidu.com/s?ie=UTF-8&wd=%E6%84%9A%E4%BA%BA%E8%8A%82
* 整理:mengkun https://mkblog.cn/
*/
!function() {
var bottom = Math.floor(60 * Math.random()),
right = Math.floor(50 * Math.random()),
rotate = Math.floor(360 * Math.random());
var foolsEgg = document.createElement("img");
foolsEgg.src = "http://lbz.cc/tuchuang/uploads/683fef4ae8ecc6.22682730.png";
foolsEgg.style.position = "fixed";
foolsEgg.style.bottom = "".concat(bottom, "%");
foolsEgg.style.right = "".concat(right, "%");
foolsEgg.style.zIndex = "9999";
foolsEgg.style.pointerEvents = "none";
foolsEgg.style.width = "40%";
foolsEgg.style.maxWidth = "190px";
foolsEgg.style.transform = "".concat("rotate(", rotate, "deg)");
document.body.append(foolsEgg);
} ();
</script>
<blockquote><a href="https://lbz.cc/go.php?url=http://lbz.cc/tuchuang/uploads/683fef4ae8ecc6.22682730.png" target="_blank" style="color:red">点击下载图片</a></blockquote>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
/***
* 愚人节彩蛋 - 你屏幕上有根毛
* 出处:https://www.baidu.com/s?ie=UTF-8&wd=%E6%84%9A%E4%BA%BA%E8%8A%82
* 整理:mengkun https://mkblog.cn/
*/
!function() {
var bottom = Math.floor(60 * Math.random()),
right = Math.floor(50 * Math.random()),
rotate = Math.floor(360 * Math.random());
var foolsEgg = document.createElement("img");
foolsEgg.src = "这里填写图片地址";
foolsEgg.style.position = "fixed";
foolsEgg.style.bottom = "".concat(bottom, "%");
foolsEgg.style.right = "".concat(right, "%");
foolsEgg.style.zIndex = "9999";
foolsEgg.style.pointerEvents = "none";
foolsEgg.style.width = "40%";
foolsEgg.style.maxWidth = "190px";
foolsEgg.style.transform = "".concat("rotate(", rotate, "deg)");
document.body.append(foolsEgg);
} ();
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>

HTML + CSS 实现一个酷炫的夜间模式切换动画

2025年06月04日
<h3>实现原理</h3>
背景切换:一个白天的背景,再加一个黑夜的背景。黑色背景的堆叠顺序高于白色背景。当场景由白天转为黑夜时,黑色背景由透明逐渐转换为不透明,形成昼夜更替的效果。

日月变换:“太阳”和“月亮”其实是同一个元素,昼夜更替时将它所处的 div 盒子使用 transform 旋转 360°,看上去就是太阳落下然后月亮升起来了……
<img src="http://lbz.cc/tuchuang/uploads/683fedd32bfbf4.26237167.gif" alt="文章图片">
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="author" content="mengkun">

<title>昼夜切换动画</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

/* 白天和黑夜的背景 */
.mk-dark-mode-sky,
.mk-dark-mode-sky:before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 999999999;
transition: 2s ease all;
}
.mk-dark-mode-sky {
background: linear-gradient(#feb8b0, #fef9db);
}
.mk-dark-mode-sky:before {
opacity: 0;
background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed);
}
.mk-dark-mode .mk-dark-mode-sky:before {
opacity: 1;
}

/* 太阳和月亮 */
.mk-dark-mode-planet {
z-index: 1999999999;
position: fixed;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
transform-origin: center bottom;
transition: 2s cubic-bezier(.7, 0, 0, 1) all;
}
.mk-dark-mode-planet:after {
position: absolute;
left: 35%;
top: 40%;
width: 150px;
height: 150px;
border-radius: 50%;
content: "";
background: linear-gradient(#fefefe, #fffbe8);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
</head>
<body>
<div class="mk-dark-mode-sky">
<div class="mk-dark-mode-planet"></div>
</div>
<script>
/* 这里为了方便演示,点击页面中任意位置即可触发切换动画 */
$("body").click(function() {
$("body").toggleClass("mk-dark-mode");

var angle = $('.mk-dark-mode-planet').data('angle') + 360 || 360;
$('.mk-dark-mode-planet').css({'transform': 'rotate(' + angle + 'deg)' });
$('.mk-dark-mode-planet').data('angle', angle);
});
</script>
</body>
</html>
</textarea>
<button id="copyBtn" class="btn-copy">
<i class="fa fa-copy"></i> 复制内容
</button>
</div>
<div class="stats">
<div>字符数: <span id="charCount">0</span></div>
<div>单词数: <span id="wordCount">0</span></div>
<div>行数: <span id="lineCount">0</span></div>
</div>
<div id="status" class="status"></div>
</div>

关于博主

L

LBZCC的博主

热爱写作与分享

欢迎来到我的个人博客!这里记录我的思考、经验和生活点滴。希望我的文章能给您带来一些启发或帮助。