Html CSS过渡在开始时有黑色背景，为什么

发布于10月04日

我的心脏上有一个过渡，但出于某种原因，在动画开始时，它首先变成黑色，然后再进行所需的渐变.

以下是代码:

.heart {
     font-size: 2.5rem;
     padding-right: 2rem;
     }

.heart:hover::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f004";
  background-image: linear-gradient(#9356DC, #FF79DA);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: 5s ease-in-out;
  cursor: pointer;
  }

<link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        />
<span class="fa-regular fa-heart heart"></span>

我想了解在过渡之初这个黑色背景是从哪里来的.

我try 了不同的方法，比如添加background-color个属性.但这并不能解决问题.

提前谢谢你了

编辑:我将过渡的持续时间从0.9秒更改为5秒，以明确我的意思. 给元素涂上 colored颜色并不能解决问题，当光标不在心形上时，心形必须有一个黑色的轮廓.

.heart { position: relative; font-size: 2.5rem; font-weight: 400; } .heart::before { transition: 0.3s ease-in-out; cursor: pointer; } .heart::after { position:absolute; left: 0; transition: 0.3s ease-in-out; content: "\f004"; background-image: linear-gradient(#9356DC, #FF79DA)!important; font-weight: 600; color: transparent; background-clip: text; -webkit-background-clip: text; opacity: 0; cursor: pointer; } .heart:hover::before { opacity: 0; } .heart:hover::after { opacity: 1; }

Html CSS过渡在开始时有黑色背景，为什么

推荐答案

Html相关问答推荐

将文本区域标签的内容着色为SON(带有 colored颜色 )

有没有一种方法可以用css和html在桌面上并排显示列，在移动设备上显示一个下方的列？

如何通过扭曲元素来倾斜元素？

如何在VB.NET中用打印预览和直接打印的方式在Html中打印数据表的内容，包括页眉/设置纸张/方向/适合页面/总计

SVG的动态CSS

如何使单选按钮在被 Select /选中时看起来像这样的设计？

网格项未在同一行上对齐

添加带有悬停动画的喜欢图标

jQuery 索引返回不正确的结果

理解图像与其内容框之间的关系

样式化单选按钮背景 colored颜色

实验的响应式屏幕尺寸

如何使用CSS将页面标题水平居中对齐

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

使用 css 将内容居中并向左对齐？

如何从 razor 页面打开 html 页面

使用 TailwindCSS 将徽标放在左上角，将菜单放在右上角

如何让 Reindeer 居中

CSS 网格自动高度不适用于特定网格区域

CSS：如何在模糊的背景上剪切文本？