caret-animation
caret-animation CSS 属性用于启用或禁用插入符的闪烁行为。插入符是可编辑元素中出现的可见标记，指示下一个字符将插入或删除的位置。
当对插入符应用自定义动画时，您应该停止其默认闪烁，以免干扰动画。
语法
css
/* Keyword values */
caret-animation: auto;
caret-animation: manual;
/* Global values */
caret-animation: inherit;
caret-animation: initial;
caret-animation: revert;
caret-animation: revert-layer;
caret-animation: unset;
值
caret-animation 属性指定为下面列出的其中一个关键字值。
正式定义
在数据库中未找到值！正式语法
caret-animation =
auto |
manual
示例
caret-animation 的基本用法
此示例展示了在可编辑元素上将 caret-animation 设置为 auto 与 manual 之间的区别。
HTML
标记包含两个 <p> 元素，它们都设置了 contenteditable 属性，使其可编辑。
html
<p contenteditable="true">
My caret animates because <code>caret-animation</code> is set to
<code>auto</code>.
</p>
<p contenteditable="true">
My caret doesn't animate because <code>caret-animation</code> is set to
<code>manual</code>.
</p>
CSS
CSS 将 caret-color 值设置为 red。然后，它将第一个段落的 caret-animation 值设置为 auto，将第二个段落的 caret-animation 值设置为 manual。
css
p {
caret-color: red;
}
p:first-of-type {
caret-animation: auto;
}
p:last-of-type {
caret-animation: manual;
}
结果
渲染结果如下所示
尝试聚焦这两个段落以查看插入符行为的差异。
创建自定义插入符动画
在此示例中，自定义插入符动画应用于可编辑段落和文本输入。
HTML
标记包含一个 <p> 元素和两个文本 <input> 元素。<p> 元素设置了 contenteditable 属性，使其可编辑。段落和第一个文本输入都设置了 custom-caret 类。
html
<p contenteditable="true" class="custom-caret">
This paragraph has a custom animation applied to it, plus
<code>caret-animation: manual</code> to stop the default caret blinking and
allow the smooth animation to be seen.
</p>
<input
type="text"
class="custom-caret"
value="I've got a custom caret animation" />
<input type="text" value="I've got the default blinking caret" />
CSS
我们首先定义一组 @keyframes，它们将 caret-color 从 transparent 更改为 darkblue。
css
@keyframes custom-caret-animation {
from {
caret-color: transparent;
}
to {
caret-color: darkblue;
}
}
然后，我们使用自定义 @keyframes 动画、caret-color 和 manual 的 caret-animation 值来样式化 <p> 和第一个 <input>，以关闭默认的插入符闪烁行为。
css
.custom-caret {
animation: custom-caret-animation infinite linear alternate 0.75s;
caret-color: darkblue;
caret-animation: manual;
}
p,
input {
font-size: 1.6rem;
}
结果
渲染结果如下所示
尝试聚焦前两个元素，看看自定义插入符动画是什么样子。要将其与默认闪烁插入符进行比较，您可以聚焦第三个元素。
规范
| 规范 |
|---|
| CSS Basic User Interface Module Level 4 # propdef-caret-animation |
浏览器兼容性
加载中…