Bear双标签并排，HTML源码CSS样式左右飞！-html教程-PHP中文网

Bear双标签并排，HTML源码CSS样式左右飞！

雪夜

发布： 2025-11-14 23:11:02

原创

842人浏览过

通过自定义CSS实现Bear笔记双标签并排显示与左右飞入动画，需导出HTML后添加容器结构，使用flex布局与@keyframes定义动画，设置flyInLeft和flyInRight关键帧，分别绑定0.8s ease-out动画至左右标签，并通过媒体查询适配移动端，确保响应式兼容性。

bear双标签并排，html源码css样式左右飞！

如果您在使用Bear笔记应用时，希望实现双标签并排显示，并通过HTML源码中的CSS样式让内容从左右两侧飞入页面，则可以通过自定义CSS动画和布局来达成这一视觉效果。以下是具体操作步骤：

本文运行环境：MacBook Pro，macOS Sonoma

一、启用Bear的HTML导出功能

为了能够编辑Bear笔记的HTML源码，您需要先将笔记导出为HTML格式，以便插入自定义CSS样式。

1、打开Bear中的目标笔记，点击右上角的“分享”按钮。

立即学习“前端免费学习笔记（深入）”；

2、选择“导出副本”选项，然后点击“HTML”格式进行导出。

3、将导出的HTML文件保存到桌面或便于访问的文件夹中。

二、修改HTML源码结构以支持双标签布局

在原始HTML中添加容器元素，用于划分左右两个标签区域，确保内容可以并排展示。

1、使用文本编辑器（如VS Code）打开导出的HTML文件。

2、找到主体内容区域，在<body>内包裹原内容，添加如下结构：

必须确保每个标签使用独立的div容器，并设置float或flex布局

<div class="bear-tag-container">
<div class="tag-left">左侧标签内容</div>
<div class="tag-right">右侧标签内容</div>
</div>

三、编写CSS实现左右飞入动画

通过@keyframes定义两个独立的进入动画，分别控制左右区域从屏幕外滑入视图。

码上飞

码上飞（CodeFlying）是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

138

查看详情

1、在HTML文件的<head>部分插入<style>标签，写入以下CSS代码：

@keyframes flyInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

@keyframes flyInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

动画持续时间建议设为0.8秒，以获得流畅但不拖沓的效果

四、应用CSS样式与动画到双标签容器

为左右标签分别绑定动画和布局属性，确保它们在页面加载时正确呈现。

1、继续在<style>标签中添加以下样式规则：

.bear-tag-container {
display: flex;
justify-content: space-between;
}

.tag-left {
width: 45%;
animation: flyInLeft 0.8s ease-out forwards;
}

.tag-right {
width: 45%;
animation: flyInRight 0.8s ease-out forwards;
}

使用flex布局可确保兼容性，避免浮动带来的错位问题