如何使用 HTML 和 CSS 通过拖放填充颜色来更改图像颜色?

htmlcssweb developmentfront end technology更新于 2024/5/12 15:40:17

在 Web 开发领域，了解最新的 CSS 和 HTML 技术对于为网站添加令人惊叹的视觉效果至关重要。其中一种效果是"颜色拖放效果"，它允许您在鼠标悬停在图像上时，通过将填充颜色拖放到图像上来更改图像的颜色。

使用此效果，您可以让您的网站更具互动性，吸引访客。在本文中，我们将指导您使用 HTML 和 CSS 创建颜色拖放效果。所以，无论您是初学者还是经验丰富的 Web 开发者，都请继续关注，学习这项激动人心的视觉效果。

什么是水滴填充颜色效果?

水滴填充颜色效果是一种使用 HTML 和 CSS 应用于图像或图形的视觉效果，当鼠标悬停在图像上时，图像上会出现一滴颜色，导致图像颜色发生变化。

该效果营造出一滴颜色落在图像上并扩散开来的错觉，营造出一种戏剧性的动态效果。此效果可用于为网站增添互动性和视觉趣味，使其更具吸引力。

为了实现此效果，我们必须使用某些属性，让我们逐一了解一下 -

Filter 属性 - CSS 中的 filter 属性用于将视觉效果应用于元素的内容。它允许您使用各种滤镜功能调整图像和其他图形元素的外观。

filter 属性可以接受一个或多个滤镜功能，并按顺序应用这些功能。有许多不同的滤镜功能可用，每种功能都会应用不同类型的视觉效果。

Clip-path 属性 − clip-path CSS 属性用于创建剪切路径，这是一个非矩形区域，用于定义元素的可见区域。该属性用于隐藏元素中超出剪切路径的部分，从而实现以前只能通过图像蒙版或 SVG 实现的复杂形状和效果。
::before 伪元素 − CSS 中的 ::before 伪元素创建一个插入到元素内容之前的伪元素。它用于在元素前插入内容，无需添加任何其他 HTML 标记。

::before 伪元素的一个常见用途是在元素前添加装饰性内容，例如图标或形状。::before 伪元素也可用于添加文本、背景图像和其他内容。

需遵循的步骤

以下是本例中遵循的步骤 -

步骤 1 - 使用 .icon-container div 创建图标/图像的容器。将 box-sizing: border-box 应用于页面上的所有元素，并将所有元素的边距和填充设置为 0。
步骤 2 − 然后将 body 元素设置为 display: flex，并使用 justify-content: center 和 align-items: center 使容器元素在页面上垂直和水平居中。将 body 元素的背景色设置为深灰色 (#333)。
步骤 3 − 接下来，我们需要为容器元素设置样式，使其具有颜色滴落效果。它被赋予一个相对位置、200像素的宽度和高度，以及一个居中并覆盖整个容器元素的背景图像。

filter 属性用于将背景图像设置为灰度(即黑白)，cursor 属性设置为 pointer，以向用户指示该元素可点击。

步骤 4 − 然后，我们创建悬停时的颜色滴落效果。使用 ::before 伪元素创建一个白色圆圈，当鼠标悬停在该圆圈上时，该圆圈将被裁剪以显示底层背景图像。

将 clip-path 属性设置为 circle(0% at 50% 0%)，以从半径为 0%(即无可见区域)的裁剪圆圈开始，该圆圈位于容器元素的顶部中心。

当鼠标悬停在该元素上时，clip-path 属性将过渡为 circle(100% at 50% 0%)，这将创建一个覆盖整个容器元素的圆圈。此过渡动画持续时间为 0.4 秒，并带有缓出时间函数。

示例

让我们看一个例子 -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title> Color Drop Effect </title>
   <style>
      /* Resetting default styles */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      /* Centering the container */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #333;
      }
      /* Creating the color drop effect */
      .icon-container {
         position: relative;
         width: 200px;
         height: 200px;
         background-image: url('https://via.placeholder.com/200');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         filter: grayscale(100%);
         cursor: pointer;
      }

      .icon-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         clip-path: circle(0% at 50% 0%);
         transition: clip-path 0.4s ease-out;
      }

      .icon-container:hover::before {
         clip-path: circle(100% at 50% 0%);
      }
   </style>
</head>
<body>
   <div class="icon-container"></div>
</body>
</html>