CSS线性渐变——如何实现两图片之间的边界模糊过渡效果

最新推荐文章于 2025-05-13 09:00:00 发布

阿猴.

最新推荐文章于 2025-05-13 09:00:00 发布

阅读量1.1k

点赞数 27

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/hzzh_kk/article/details/143337259

版权

过渡效果，我们可以使用 CSS 的 background-image 和 background-color 属性，并结合渐变背景来实现这种过渡。具体来说，可以使用 linear-gradient 与图片背景组合起来实现这种效果。

首先，我们需要将图片插入到 HTML 中

<div class="transition-background">
  <img src="xxxxx" alt="Picture 1">
</div>

然后，我们在 CSS 文件中编写相应的样式：

.transition-background {
  position: relative;
  width: 100%;
  height: 100px; /* 或者指定一个具体的高度 */
  overflow: hidden;
}

.transition-background img {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 2s ease-in-out;
}

.transition-background:hover img {
  transform: translateY(-100%);
}

接下来，我们将添加一个渐变层作为过渡效果：

.transition-background:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, white 0%, white 50%, transparent 50%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.transition-background:hover:before {
  opacity: 1;
}

这段 CSS 将实现以下效果：当鼠标悬停在 .transition-background 上时，图片向上移动，露出下方的渐变层。渐变层从上至下，前50%部分是白色，后50%部分是透明的。图片和渐变层都有一个 2 秒的过渡效果，采用 ease-in-out 的速度曲线。注意，此方法仅适用于静态图片。如果你需要在不同状态下改变背景，可以结合 JavaScript 或 CSS 动画来实现更复杂的效果。

拓展延伸 -----多个图片块的渐变

`linear-gradient` 是 CSS 中的一个功能，

它允许你在两个或多个颜色之间创建一个渐变过渡效果。线性渐变沿着一个特定的方向扩展，在这个方向上，颜色从起点逐渐变化到终点。

下面是如何定义一个简单的线性渐变的例子：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction 指定了渐变的方向，可以是角度或关键词（如 to bottom, to top, to right, to left, to bottom right 等）。

color-stop 定义了颜色停止点，它由颜色值和可选的百分比位置组成。

让我们看几个具体的例子：

水平方向上的渐变：（从左to右）

div {
  background-image: linear-gradient(to right, red, yellow);
}

垂直方向上的渐变：（从上to下）

div {
  background-image: linear-gradient(to bottom, blue, green);
}

从中心向四周扩散的渐变：
radial-gradient 不是线性渐变，但它也可以用来创建类似的效果。

div {
  background-image: radial-gradient(circle at center, red, yellow);
}

带颜色停靠点位置的渐变：

div {
  background-image: linear-gradient(to right, red 0%, yellow 100%);
}

多色渐变：

div {
  background-image: linear-gradient(to right, red, orange 20%, yellow 50%, green 80%, blue);
}

这些渐变可以应用于任何 HTML 元素，如 `<div>`、`<section>` 或者 `<body>` 等等。此外，渐变背景可以与其他 CSS 属性一起使用，如 `background-size`、`background-position` 和 `background-repeat` 来进一步定制外观。

CSS线性渐变——如何实现两图片之间的边界模糊过渡效果

过渡效果，我们可以使用 CSS 的 background-image 和 background-color 属性，并结合渐变背景来实现这种过渡。具体来说，可以使用 linear-gradient 与图片背景组合起来实现这种效果。

拓展延伸 -----多个图片块的渐变

`linear-gradient` 是 CSS 中的一个功能，

它允许你在两个或多个颜色之间创建一个渐变过渡效果。线性渐变沿着一个特定的方向扩展，在这个方向上，颜色从起点逐渐变化到终点。

水平方向上的渐变：（从左to右）

垂直方向上的渐变：（从上to下）

从中心向四周扩散的渐变：

`radial-gradient` 不是线性渐变，但它也可以用来创建类似的效果。

带颜色停靠点位置的渐变：

多色渐变：

这些渐变可以应用于任何 HTML 元素，如 `<div>`、`<section>` 或者 `<body>` 等等。此外，渐变背景可以与其他 CSS 属性一起使用，如 `background-size`、`background-position` 和 `background-repeat` 来进一步定制外观。

CSS线性渐变——如何实现两图片之间的边界模糊过渡效果

过渡效果，我们可以使用 CSS 的 background-image 和 background-color 属性，并结合渐变背景来实现这种过渡。具体来说，可以使用 linear-gradient 与图片背景组合起来实现这种效果。

拓展延伸 -----多个图片块的渐变

linear-gradient 是 CSS 中的一个功能，

它允许你在两个或多个颜色之间创建一个渐变过渡效果。线性渐变沿着一个特定的方向扩展，在这个方向上，颜色从起点逐渐变化到终点。

水平方向上的渐变：（从左to右）

垂直方向上的渐变：（从上to下）

从中心向四周扩散的渐变：

radial-gradient 不是线性渐变，但它也可以用来创建类似的效果。

带颜色停靠点位置的渐变：

多色渐变：

这些渐变可以应用于任何 HTML 元素，如 <div>、<section> 或者 <body> 等等。此外，渐变背景可以与其他 CSS 属性一起使用，如 background-size、background-position 和 background-repeat 来进一步定制外观。

`linear-gradient` 是 CSS 中的一个功能，

`radial-gradient` 不是线性渐变，但它也可以用来创建类似的效果。

这些渐变可以应用于任何 HTML 元素，如 `<div>`、`<section>` 或者 `<body>` 等等。此外，渐变背景可以与其他 CSS 属性一起使用，如 `background-size`、`background-position` 和 `background-repeat` 来进一步定制外观。