如何使用 HTML、css 和 javascript 创建此 hover 按钮

Question

`

 /* Button */.button { margin: 1em 0em; }.circle { width: 50px; height: 50px; border-radius: 50%; background: #1A718A; position:relative; }.button h3{ position:relative; top:3.4em; left:.5em; color: white; font-weight: 400;important: font-size.;9em:important; z-index. 1: }:circle;hover { position:relative; top:1em; left:3em; }

 <div class="button"> <div class="text"><h3>- View <span>Work</span></h3></div> <div class="circle"></div> </div> <!--button-->

`如何使用 HTML、css 和 ZDE9B9ED78D7E2E1DCEEFFEE780E2F99 创建此 hover 按钮。

圆圈向右移动（无效果），而视图变为灰色，作品变为白色（反向）。

也是代码新手:)

默认 State

Hover state

谢谢

Answer 1

娱乐

HTML

我们想要为元素及其文本“- View Work”设置动画，所以我们可以拥有的最简单的 HTML 是：

<p>- View Work</p>

造型

默认样式

然后我们可以根据需要设置它的样式。 要将线放在中间，我们可以通过使用一点 JavaScript 将line-height设置为元素的height来进行一些小技巧：

 const p = document.querySelector('p'); p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');

 p { position: relative; border: 1px solid black; color: black; background-color: #f3f3f3; width: 14rem; height: 10rem; font-weight: bold; font-family: sans-serif; text-align: center; line-height: var(--height); text-transform: uppercase }

 <p>- View Work</p>

带手电筒效果

现在我们要添加圆形，其中文本的颜色不同。

我们可能会以某种方式使用mix-blend-mode ，但是我对它的理解还不够好，无法让它与它一起工作。

因此，我们回退到使用伪元素（更具体地说， ::after ）。
伪元素需要...：

• ...具有不同颜色的相同文本，并且文本重叠
• ... 足够大，以适合内部所有位置的显露圆圈
• ... 将 rest 夹出不在显示圈内

前两个要点就像为伪元素和父元素设置样式一样简单，方式大致相同。
要获取文本，我们可以通过设置自定义数据属性（例如data-text ）来再次使用 JavaScript 来获取文本。 然后伪元素可以显示带有content: attr(data-text) 。

对于显示圆，我们给伪元素一个背景色。 然后，我们使用clip-path剪掉应该“显示”的内容。

在 hover 上，我们在显示圈的两个不同位置之间进行转换。

 const p = document.querySelector('p'); p.dataset.text = p.innerText; p.style = '--height:' + getComputedStyle(p).getPropertyValue('height');

 p { position: relative; border: 1px solid black; color: black; background-color: #f3f3f3; } p, p::after { width: 14rem; height: 10rem; font-weight: bold; font-family: sans-serif; text-align: center; line-height: var(--height); text-transform: uppercase } p::after { content: attr(data-text); position: absolute; top: 0; left: 0; color: white; background-color: #1A718A; clip-path: circle(3rem at 70px 55px); transition: clip-path 0.15s;; pointer-events: none; } p:hover::after { clip-path: circle(3rem at 155px 100px); }

 <p>- View Work</p>

尾注

此示例代码仅适用于单行，并且要求元素具有固定大小。 这种效果也可以通过主要使用 JavaScript 来实现，其中可以用实际的 HTML 元素模拟这样的伪元素，然后将所述元素覆盖在原始元素上。