LBZCC

<p>在数字时代，截图工具几乎是每个人的必备工具。无论是台式机、笔记本、平板还是手机，我们常常需要快速截取屏幕上的内容。但市面上很多截图工具都是付费的，这让很多人望而却步。</p>
<p>今天，一位热心的博主带来了一个好消息！他开发了一款多端一键截图工具的源码，并且完全免费分享给大家。这款工具支持台式机、笔记本、平板和手机等多种设备，只需一键操作，就能轻松截图，方便又实用。
博主表示，只要大家在他的网站上多多留言交流，就能免费获取这款源码。他希望通过这种方式，让更多人享受到技术带来的便利，也让大家感受到开源和分享的乐趣。</p>
<p>如果你也对这款截图工具感兴趣，不妨去博主的网站看看吧！说不定你还能根据自己的需求，对源码进行二次开发，让它更符合你的使用习惯呢！</p>
<img src="/tuchuang/uploads/6845148b33e142.34583212.png" alt="文章图片"></img>


<a href="https://lbz.cc/wangpan/?download=%E7%BD%91%E7%AB%99%E7%BC%A9%E7%95%A5%E5%9B%BE%E5%9C%A8%E7%BA%BF%E7%94%9F%E6%88%90%E5%B7%A5%E5%85%B7.zip&code=leyw" class="download-btn" download >点击下载</a>

<img src="https://lbz.cc/tuchuang/uploads/683ff68729d6f3.72726658.png" alt="文章图片" class="w-full h-auto object-cover" style="cursor: pointer;">

最近听说了一款挺火的软件，叫 “抖音”，发现它的标志有蓝红双色的叠加。我突然想到，我们的网站文字能否做出这个效果，甚至让文字像这个一样抖起来？答案当然是可以的。
<h3>试玩一下</h3>
<blockquote>前方高能！别把你的眼睛都给看蒙了 2333</blockquote>
<style>
body{
/* 默认不应用动画 */
animation: none;
}
@keyframes shake-it{
0%{
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25%{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50%{
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100%{
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}
</style>
<script>
function paul_shake(action, selector) {
var status = false;
action.addEventListener("click", function () {
if(status === true){
status = false;
selector.style = "";
}
else{
status = true;
selector.style = "animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
}
})
}

// 获取实际的按钮元素并绑定事件
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('shake-it');
paul_shake(button, document.body);
});
</script>
<button class="btn small" id="shake-it" style="background-color: rgb(31 41 55);color: rgb(255 255 255);padding:0.5rem 0.5rem 0.75rem 0.75rem;border-radius:0.5rem;">点击我开始展示。玛尼玛尼轰！文字抖起来！</button>

<h3>静态效果</h3>
只需要给对应的选择器添加 text-shadow 属性即可完成。例如我让 body 里面的所有文字抖起来，就这样写：
<pre>
<code>body{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}</code></pre>
<h3>动态效果</h3>
这种静态的效果我可不满足，想让它动起来，不需要任何 JavaScript，只需要 CSS3 动画即可完成。接下来我们就利用 CSS3 动画，让所有文字抖起来吧！
<h3>代码</h3>
<pre><code>&lt;style&gt;
body{
/* 默认不应用动画 */
animation: none;
}
@keyframes shake-it{
0%{
text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);
}
25%{
text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
}
50%{
text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);
}
100%{
text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);
}
}
&lt;/style&gt;
&lt;script&gt;
function paul_shake(action, selector) {
var status = false;
action.addEventListener("click", function () {
if(status === true){
status = false;
selector.style = "";
}
else{
status = true;
selector.style = "animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55)";
}
})
}

// 获取实际的按钮元素并绑定事件
document.addEventListener('DOMContentLoaded', function() {
const button = document.getElementById('shake-it');
paul_shake(button, document.body);
});
&lt;/script&gt;
&lt;button class="btn small" id="shake-it"&gt;玛尼玛尼轰！文字抖起来！&lt;/button&gt;</code></pre>

<h4>效果</h4>
<div class="face">
<span class="eye a"></span>
<span class="eye b"></span>
<span class="mouth"></span>
</div>
<style>
.face{
width: 200px;
height: 200px;
position: relative;
border-radius: 66%;
background: #fedf6b;
border: 5px #222 solid;
box-shadow: 15px -15px 0 #ffc16d inset;
}

.eye{
top: 50px;
right: 30px;
width: 25px;
height: 25px;
position: absolute;
border-radius: 66%;
background: #fff;
border: 5px #222 solid;
}

.eye.b{
right: 95px;
}

.mouth{
right: 50px;
width: 50px;
height: 40px;
bottom: 50px;
position: absolute;
border-radius: 66%;
border-bottom: 5px #222 solid;
}
</style>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<div class="face">
<span class="eye a"></span>
<span class="eye b"></span>
<span class="mouth"></span>
</div>
<style>
.face{
width: 200px;
height: 200px;
position: relative;
border-radius: 66%;
background: #fedf6b;
border: 5px #222 solid;
box-shadow: 15px -15px 0 #ffc16d inset;
}

.eye{
top: 50px;
right: 30px;
width: 25px;
height: 25px;
position: absolute;
border-radius: 66%;
background: #fff;
border: 5px #222 solid;
}

.eye.b{
right: 95px;
}

.mouth{
right: 50px;
width: 50px;
height: 40px;
bottom: 50px;
position: absolute;
border-radius: 66%;
border-bottom: 5px #222 solid;
}
</style>
</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>

<h3>效果</h3>
<div class="red-packet">
<header>
<img src="https://liubaozi.com/logo.png"/>
</header>
<main>
<h1>祝你新年快乐</h1>
<p class="author">折腾猫敬上</p>
<button class="open">开</button>
</main>
</div>
<style>
/* 改变间距计算方式 */
*{
box-sizing: border-box;
}

/* 设置间距和字体 */
body{
font: lighter 16px "微软雅黑";
animation: red-packet .75s both cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 标题变细 */
h1, h2, h3{
font-weight: lighter;
}

/* 图片响应式 */
img{
height: auto;
max-width: 100%;
}
.red-packet{
color: #fff;
padding: 1em;
height: 35em;
margin: auto;
max-width: 25em;
overflow: hidden;
position: relative;
border-radius: 1em;
background: #c40b00;
}
.red-packet header{
top: -14.5em;
left: 0;
right: 0;
height: 25em;
position: absolute;
border-radius: 100%;
background: #b00b00;
}
.red-packet img{
left: 0;
right: 0;
bottom: -2em;
margin: auto;
max-width: 5em;
position: absolute;
border-radius: 100%;
border: .25em solid #fff;
}
.red-packet main{
margin-top: 15em;
text-align: center;
}
.red-packet .author{
opacity: .7;
text-align: center;
}
.red-packet .open{
outline: 0;
width: 3em;
height: 3em;
color: #fff;
border: none;
display: block;
font-size: 2em;
cursor: pointer;
margin: 1em auto;
background: #ffb03a;
border-radius: 100%;
transition: background .3s, transform .3s;
}
.red-packet .open:hover{
transform: scale(1.1);
}
.red-packet .open:active{
background: #eba534;
}
@keyframes red-packet{
from{
opacity: 0;
transform: scale(0);
}
to{
opacity: 1;
transform: scale(1);
}
}
</style>
<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<div class="red-packet">
<header>
<img src="https://liubaozi.com/logo.png"/>
</header>
<main>
<h1>祝你新年快乐</h1>
<p class="author">折腾猫敬上</p>
<button class="open">开</button>
</main>
</div>
<style>
/* 改变间距计算方式 */
*{
box-sizing: border-box;
}

/* 设置间距和字体 */
body{
font: lighter 16px "微软雅黑";
animation: red-packet .75s both cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 标题变细 */
h1, h2, h3{
font-weight: lighter;
}

/* 图片响应式 */
img{
height: auto;
max-width: 100%;
}
.red-packet{
color: #fff;
padding: 1em;
height: 35em;
margin: auto;
max-width: 25em;
overflow: hidden;
position: relative;
border-radius: 1em;
background: #c40b00;
}
.red-packet header{
top: -14.5em;
left: 0;
right: 0;
height: 25em;
position: absolute;
border-radius: 100%;
background: #b00b00;
}
.red-packet img{
left: 0;
right: 0;
bottom: -2em;
margin: auto;
max-width: 5em;
position: absolute;
border-radius: 100%;
border: .25em solid #fff;
}
.red-packet main{
margin-top: 15em;
text-align: center;
}
.red-packet .author{
opacity: .7;
text-align: center;
}
.red-packet .open{
outline: 0;
width: 3em;
height: 3em;
color: #fff;
border: none;
display: block;
font-size: 2em;
cursor: pointer;
margin: 1em auto;
background: #ffb03a;
border-radius: 100%;
transition: background .3s, transform .3s;
}
.red-packet .open:hover{
transform: scale(1.1);
}
.red-packet .open:active{
background: #eba534;
}
@keyframes red-packet{
from{
opacity: 0;
transform: scale(0);
}
to{
opacity: 1;
transform: scale(1);
}
}
</style>
</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>