LBZCC

<button class="liquid-btn">点击触发流动</button>
<style>
.liquid-btn {
position: relative;
padding: 15px 50px;
border: none;
border-radius: 30px;
background: #00c6a7;
color: white;
font-size: 18px;
overflow: hidden;
cursor: pointer;
}

.liquid-btn::before,
.liquid-btn::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0.5;
top: -50px;
left: -50px;
animation: liquid-anim 4s linear infinite;
}

.liquid-btn::after {
animation-delay: -2s;
}

@keyframes liquid-anim {
0% { transform: translate(0, 0); opacity: 0.5; }
50% { transform: translate(80px, 80px); opacity: 0.3; }
100% { transform: translate(160px, 160px); opacity: 0; }
}
</style>


<h3>代码</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<button class="liquid-btn">点击触发流动</button>

<style>
.liquid-btn {
position: relative;
padding: 15px 50px;
border: none;
border-radius: 30px;
background: #00c6a7;
color: white;
font-size: 18px;
overflow: hidden;
cursor: pointer;
}

.liquid-btn::before,
.liquid-btn::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
opacity: 0.5;
top: -50px;
left: -50px;
animation: liquid-anim 4s linear infinite;
}

.liquid-btn::after {
animation-delay: -2s;
}

@keyframes liquid-anim {
0% { transform: translate(0, 0); opacity: 0.5; }
50% { transform: translate(80px, 80px); opacity: 0.3; }
100% { transform: translate(160px, 160px); opacity: 0; }
}
</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>

<p>P标签</p>
<strong>我的变粗了</strong><br>
<em>斜体文字</em><br>
<s>这是一个基于HTML、CSS和JavaScript开发的图片批量模糊处理工具，运用Tailwind CSS进行简约美化，实现响应式布局，适配不同设备屏幕；支持多选图片上传，通过滑块调整模糊程度，可单独下载单张图片，也能利用JSZip库实现批量打包下载，同时还添加了空状态提示、微交互动画和无障碍支持，优化用户操作体验。 工具截图</s>

<h1>标签一</h1>
<h2>标签二</h2>
<h3>标签三</h3>
<h4>标签四</h4>
<h5>标签五</h5>
<h6>标签六</h6>

<a href="https://www.baidu.com">这是一条链接</a>

<h3>单图</h3>
<img alt="" src="https://e3f49eaa46b57.cdn.sohucs.com/2025/5/9/21/43/MTAwMTIyXzE3NDY3OTgyMzg3MzQ=.jpg" />
<h3>九宫格展示图</h3>
<div class="media-container">
<div class="image-grid grid grid-cols-3 gap-2 mt-4">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述1" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述2" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述3" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述1" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述2" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述3" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述1" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述2" class="cursor-zoom-in object-cover w-full h-32">
<img src="https://img.liubaozi.com/imgku/%E6%9D%A8%E8%82%B8%E5%AD%90/%E6%9D%A8%E8%82%B8%E5%AD%90-131.jpg" alt="图片描述3" class="cursor-zoom-in object-cover w-full h-32">
<!-- 更多图片... -->
</div>
</div>
<style>
/* 图片网格布局 */
.image-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 8px;
margin: 16px 0;
}

/* 自适应列数 */
@media (min-width: 640px) {
.image-grid {
grid-template-columns: repeat(3, 1fr);
}
}

/* 单张图片样式 */
.image-grid img {
width: 100%;
object-fit: cover;
border-radius: 4px;
transition: transform 0.2s;
cursor: zoom-in;
}

.image-grid img:hover {
transform: scale(1.02);
}

/* 不同数量图片的特殊布局 */
.image-grid img:first-child:nth-last-child(2),
.image-grid img:first-child:nth-last-child(2) ~ img {
height: 180px;
}

.image-grid img:first-child:nth-last-child(1) {
height: 240px;
max-width: 50%;
}
</style>
<blockquote>欢迎来到lcgao.cn博客</blockquote>
<h3>代码展示-支持复制</h3>
<div class="container">
<div class="textarea-container">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
<textarea id="content" name="content" rows="10" placeholder="输入文章内容..." readonly class="wenbentextarea">
12311111
</textarea>
</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>


<style>
.text-loading:after{
content: "...";
animation: text-loading 2s infinite;
}

@keyframes text-loading {
25%{
content: ".";
}
50%{
content: "..";
}
100%{
content: "...";
}
}
</style>
<h1><p class="text-loading">代码持续更新..</p></h1>