AI 助理
备案控制台
开发者社区 人工智能 文章 正文

CSS mix-blend-mode 父子元素色彩叠加混合会碰撞出什么样的火花

2023-12-09 561
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS mix-blend-mode 父子元素色彩叠加混合会碰撞出什么样的火花

mix-blend-mode是一个非常有趣的CSS属性，它可以让你的元素与它的父元素进行混合，混合的子元素可以是任何元素，包括文本、图片、SVG等，接下来就和我一起来看看它的效果吧。


先看效果：

简介

什么是混合模式


在开始之前我们先来了解一下什么是混合模式，混合模式（Blend Mode）是图像处理中的一种技术，它可以让你的图像与背景图像进行混合，从而得到一个新的图像。


混合模式常见于图像处理软件中，比如PS（Photoshop）、AI（Illustrator）、AE（After Effects）等。


常见的混合模式有：


  • 正片叠底
  • 叠加
  • 柔光
  • 颜色加深
  • 颜色减淡
  • 差值
  • 反差
  • 变暗
  • 变亮
  • 滤色


这些东西通常是需要图像处理软件来完成的，但是今天我们就可以在CSS中实现这些效果了。


什么是mix-blend-mode


mix-blend-mode是CSS3中新增的一个属性，它可以让你的元素与它的父元素进行混合，从而得到一个新的图像。


mix-blend-mode的值有：


  • normal：默认值，没有混合效果
  • multiply：正片叠底
  • screen：滤色
  • overlay：叠加
  • darken：变暗
  • lighten：变亮
  • color-dodge：颜色减淡
  • color-burn：颜色加深
  • hard-light：强光
  • soft-light：柔光
  • difference：差值
  • exclusion：排除
  • hue：色相
  • saturation：饱和度
  • color：颜色
  • luminosity：亮度


可以看到这些值就是我们常见的混合模式，这就说明我们可以在CSS中实现这些效果了，接下来我们就来看看每种混合模式有什么区别。


混合模式的效果

正片叠底


正片叠底的作用是让两个图层的颜色相乘，从而得到一个新的图像，叠底就是让底层的颜色影响上层的颜色。


正片叠底是一种非常常见的混合模式，它的效果就是将两个图像的像素点的色值相乘，然后再除以255，得到的结果就是新的像素点的色值，这样就可以得到一个新的图像。


例如两个图像的像素点的色值分别为：


  • 图像1：#ff0000
  • 图像2：#00ff00
  • 结果：#000000


这样就可以得到一个新的图像，它的像素点的色值为#000000。


在CSS中我们可以通过mix-blend-mode: multiply来实现这种效果。

<div class="blend-mode">
    <p class="multiply">正片叠底</p>
</div>
<style>
    .blend-mode {
        font-size: 24px;
        font-weight: 700;
        color: #ff0000;
        background: #00ff00;
    }
    p.multiply {
        mix-blend-mode: multiply;
    }
</style>

image.png

这里用代码实现一下正片叠底的计算公式，大家可以自行验证是否正确。

function multiply(color1, color2) {
    const r1 = parseInt(color1.slice(1, 3), 16);
    const g1 = parseInt(color1.slice(3, 5), 16);
    const b1 = parseInt(color1.slice(5, 7), 16);
    const r2 = parseInt(color2.slice(1, 3), 16);
    const g2 = parseInt(color2.slice(3, 5), 16);
    const b2 = parseInt(color2.slice(5, 7), 16);
    const r = Math.round((r1 * r2) / 255);
    const g = Math.round((g1 * g2) / 255);
    const b = Math.round((b1 * b2) / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(multiply('#ff0000', '#00ff00')); // #000

滤色


滤色的作用是将两个图层的之间的颜色叠加，使其产生一种比较明亮的效果。


滤色的效果计算相对来说要复杂一些，它的计算公式是：255 - ( (255-基色) * (255-混合色) ) / 255

例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#ffff00


这样就可以得到一个新的图像，它的像素点的色值为#ffff00。


在CSS中我们可以通过mix-blend-mode: screen来实现这种效果。

/* 省略其他代码，同第一个示例代码相同 */
p.screen {
    mix-blend-mode: screen;
}

image.png

代码实现：

function screen(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = Math.round(255 - ((255 - r1) * (255 - r2)) / 255);
    const g = Math.round(255 - ((255 - g1) * (255 - g2)) / 255);
    const b = Math.round(255 - ((255 - b1) * (255 - b2)) / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(screen('#00ff00', '#ff0000')); // #ffff0

在代码中基色指的是父元素的背景色，混合色指的是字体的颜色。


叠加


叠加的效果是将两个图层的颜色叠加，使其产生一种比较明亮的效果，如果底部的颜色比较明亮则减弱顶部的颜色，如果底部的颜色比较暗则增强顶部的颜色。


叠加的计算公式更加复杂了，它分两种情况：


  1. 如果基色小于等于128，则结果为：基色 * 混合色 / 128
  2. 如果基色大于128，则结果为：255 - ( (255-基色) * (255-混合色) ) / 128


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#00ff00


这样就可以得到一个新的图像，它的像素点的色值为#00ff00。


在CSS中我们可以通过mix-blend-mode: overlay来实现这种效果。

p.overlay {
    mix-blend-mode: overlay;
}

image.png

代码实现：

function overlay(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = r1 <= 128 ? Math.round((r1 * r2) / 128) : Math.round(255 - ((255 - r1) * (255 - r2)) / 128);
    const g = g1 <= 128 ? Math.round((g1 * g2) / 128) : Math.round(255 - ((255 - g1) * (255 - g2)) / 128);
    const b = b1 <= 128 ? Math.round((b1 * b2) / 128) : Math.round(255 - ((255 - b1) * (255 - b2)) / 128);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(overlay('#00ff00', '#ff0000')); // #0ff0

变暗、


变暗的效果是将两个图层的颜色进行比较，如果混合色比基色暗，则使用混合色，否则使用基色。


变暗的计算公式是：基色和混合色中较小的那个会被保留，另一个会被抛弃。


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#000000


这样就可以得到一个新的图像，它的像素点的色值为#000000。


在CSS中我们可以通过mix-blend-mode: darken来实现这种效果。

p.darken {
    mix-blend-mode: darken;
}

image.png

代码实现：

function darken(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = Math.min(r1, r2);
    const g = Math.min(g1, g2);
    const b = Math.min(b1, b2);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(darken('#ff0000', '#00ff00')); // #000

变亮


变亮和变暗正好相反。


变亮的计算公式是：基色和混合色中较大的那个会被保留，另一个会被抛弃。


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#ffff00


这样就可以得到一个新的图像，它的像素点的色值为#ffff00。


在CSS中我们可以通过mix-blend-mode: lighten来实现这种效果。

p.lighten {
    mix-blend-mode: lighten;
}

image.png

代码实现：

function lighten(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = Math.max(r1, r2);
    const g = Math.max(g1, g2);
    const b = Math.max(b1, b2);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(lighten('#ff0000', '#00ff00')); // #ffff0

颜色减淡


颜色减淡的效果是将混合色的颜色添加到基色上，但是如果混合色的颜色比基色的颜色要深，则会使基色的颜色变浅。


颜色加深的计算公式是：基色 / (1 - 混合色)


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#00ff00


这样就可以得到一个新的图像，它的像素点的色值为#00ff00。


在CSS中我们可以通过mix-blend-mode: color-dodge来实现这种效果。


p.color-dodge {
    mix-blend-mode: color-dodge;
}

image.png

代码实现：

function computed(Cb, Cs) {
    let B;
    if (Cb == 0) {
        B = 0;
    } else if (Cs == 1) {
        B = 1;
    } else {
        B = Math.min(1, Cb / (1 - Cs));
    }
    return Math.round(B * 255);
}
function colorDodge(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = computed(r1 / 255, r2 / 255);
    const g = computed(g1 / 255, g2 / 255);
    const b = computed(b1 / 255, b2 / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(colorDodge('#00ff00', '#ff0000')); // #0ff0

这次的公式有点奇怪，1 代表 255，0 代表 0，因为我找了很多资料，这个公式是靠谱的，所以就沿用0和1的计算方式。


颜色加深


颜色加深的效果是将混合色的颜色添加到基色上，但是如果混合色的颜色比基色的颜色要浅，则会使基色的颜色变深。


颜色加深的计算公式是：1 - (1 - 基色) / 混合色


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#000000


这样就可以得到一个新的图像，它的像素点的色值为#000000。


在CSS中我们可以通过mix-blend-mode: color-burn来实现这种效果。

p.color-burn {
    mix-blend-mode: color-burn;
}

image.png

颜色加深的代码实现：

function computed(Cb, Cs) {
    let B;
    if (Cb == 1) {
        B = 1;
    } else if (Cs == 0) {
        B = 0;
    } else {
        B = Math.max(0, 1 - (1 - Cb) / Cs);
    }
    return Math.round(B * 255);
}
function colorBurn(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = computed(r1 / 255, r2 / 255);
    const g = computed(g1 / 255, g2 / 255);
    const b = computed(b1 / 255, b2 / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(colorBurn('#00ff00', '#ff0000')); // #0ff0

强光


强光主要用于调整图像的对比度和亮度，当混合色比较亮时，强光模式会让图像更亮，反之则会让图像变暗。


强光的计算公式是：混合色 < 0.5 ? 2 * 基色 * 混合色 : 1 - 2 * (1 - 基色) * (1 - 混合色)


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#ff0000


这样就可以得到一个新的图像，它的像素点的色值为#ff0000。


在CSS中我们可以通过mix-blend-mode: hard-light来实现这种效果。

p.hard-light {
    mix-blend-mode: hard-light;
}

image.png

强光的代码实现：

function computed(Cb, Cs) {
    let B;
    if (Cs < 0.5) {
        B = 2 * Cb * Cs;
    } else {
        B = 1 - 2 * (1 - Cb) * (1 - Cs);
    }
    return Math.round(B * 255);
}
function hardLight(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = computed(r1 / 255, r2 / 255);
    const g = computed(g1 / 255, g2 / 255);
    const b = computed(b1 / 255, b2 / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(hardLight('#00ff00', '#ff0000')); // #ff00

柔光


在柔光模式下，如果顶部图层的像素颜色值比底部图层的像素颜色值大，则将其混合到底部图层中；反之，则减少底部图层的亮度。


柔光的计算公式是：混合色 < 0.5 ? 2 * 基色 * 混合色 + 基色 * 基色 * (1 - 2 * 混合色) : sqrt(基色) * (2 * 混合色 - 1) + 2 * 基色 * (1 - 混合色)


例如两个图像的像素点的色值分别为：


  • 混合色：#ff0000
  • 基色：#00ff00
  • 结果：#00ff00


这样就可以得到一个新的图像，它的像素点的色值为#00ff00。

image.png

柔光的代码实现：

function computed(Cb, Cs) {
    let B;
    if (Cs < 0.5) {
        B = 2 * Cb * Cs + Cb * Cb * (1 - 2 * Cs);
    } else {
        B = Math.sqrt(Cb) * (2 * Cs - 1) + 2 * Cb * (1 - Cs);
    }
    return Math.round(B * 255);
}
function softLight(baseColor, blendColor) {
    const r1 = parseInt(baseColor.slice(1, 3), 16);
    const g1 = parseInt(baseColor.slice(3, 5), 16);
    const b1 = parseInt(baseColor.slice(5, 7), 16);
    const r2 = parseInt(blendColor.slice(1, 3), 16);
    const g2 = parseInt(blendColor.slice(3, 5), 16);
    const b2 = parseInt(blendColor.slice(5, 7), 16);
    const r = computed(r1 / 255, r2 / 255);
    const g = computed(g1 / 255, g2 / 255);
    const b = computed(b1 / 255, b2 / 255);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}
console.log(softLight('#00ff00', '#ff0000')); // #0ff0

差值


排除


色相


饱和度


颜色


亮度


写累了，不想写了，有兴趣的可以自己去实现一下，这些都在规范里面有：ltblendmodegt


后面几个感兴趣的可以自己动手来实现一下代码，这里就不写了。


使用

其实上面的原理没多少会喜欢，大家还是喜欢看实际的效果，那么我们就来看看这些混合模式的实际效果。

首先我上面的示例都是作用在文本上的，实际这些混合模式是可以作用在任何元素上的，比如图片，背景等等。


并且这些元素都是会作为叠加层来进行混合的，也就是说，如果你的元素有背景色，那么这个背景色也会参与到混合中，只要对顶层元素设置了混合模式，那么它的背景色也会参与到混合中。


我们来看看字体颜色与背景色的叠加，这个是最简单的，我们只需要设置一个背景色，然后设置一个字体颜色，然后设置一个混合模式就可以了。


<div class="blend-mode">
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
</div>
<style>
    .blend-mode {
        width: 200px;
        padding: 20px;
        font-weight: 700;
        font-size: 80px;
        letter-spacing: -.3em;
        text-align: center;
        color: #ff0000;
        background: linear-gradient(45deg, #F53F3F, #F77234, #FF7D00, #F7BA1E, #FADC19, #9FDB1D, #00B42A, #14C9C9, #3491FA, #165DFF, #722ED1);
    }
    .blend-mode span:nth-child(1) {
        color: #ff0000;
        mix-blend-mode: multiply;
    }
    .blend-mode span:nth-child(2) {
        color: #ffff00;
        mix-blend-mode: difference;
    }
    .blend-mode span:nth-child(3) {
        color: #00ff00;
        mix-blend-mode: color-dodge;
    }
    .blend-mode span:nth-child(4) {
        color: #0000ff;
        mix-blend-mode: screen;
    }
</style>

image.png

可以看到这样的叠加效果是非常有趣的，这里我只是用了四种混合模式，可以根据自己的需要进行搭配和选择。


我上面的效果虽然说还算可以，但是并没有那么有趣，那就随随便便加点动画，好像突然就变的有趣起来了：

.blend-mode span {
    display: inline-block;
}
.blend-mode span:nth-child(1) {
    color: #ff0000;
    mix-blend-mode: multiply;
    animation: shake 1.3s infinite alternate;
    animation-delay: .3s;
}
.blend-mode span:nth-child(2) {
    color: #ffff00;
    mix-blend-mode: difference;
    animation: shake 1s infinite alternate;
    animation-delay: .6s;
}
.blend-mode span:nth-child(3) {
    color: #00ff00;
    mix-blend-mode: color-dodge;
    animation: shake 1.5s infinite alternate;
    animation-delay: .9s;
}
.blend-mode span:nth-child(4) {
    color: #0000ff;
    mix-blend-mode: screen;
    animation: shake 2s infinite alternate;
    animation-delay: 1.2s;
}
@keyframes shake {
    0% {
        transform: translate(0, -10px);
        color: #3491FA;
    }
    20% {
        color: #722ED1;
    }
    40% {
        color: #F5319D;
    }
    60% {
        color: #A0C95E;
    }
    80% {
        color: #EBD89A;
    }
    100% {
        transform: translate(0, 20px);
    }
}

总结

mix-blend-mode是一个非常有趣的属性，也是非常强大的一个属性，它可以让我们的元素有更多的表现力，让我们的元素更加有趣，更加有生命力。


我上面的案例都是使用的文字相关的效果，但是这个属性并不仅仅局限于文字，它可以作用在任何元素上，比如图片，背景等等，只要对顶层元素设置了混合模式，那么它的背景色也会参与到混合中。


这个属性的兼容性还是很好的，除了IE11以下的版本，其他的浏览器都是支持的，所以可以放心的使用。


文章标签：
前端开发
计算机视觉
人工智能
关键词：
CSS元素
CSS叠加
CSS mix-blend-mode
田八
目录
相关文章
凉凉心.
|
1月前
|
前端开发 算法 Java
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
凉凉心.
111 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
凉凉心.
230 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
盒模型 盒模型： 所谓盒模型，就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制：position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法，以便于把元素组成成多栏布局。 盒模型讲解： 在默认的情况下，每个盒子的边框是不可见的，背景也是透明的。 所以我们 不能直接的看到页面中的盒
凉凉心.
148 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
145 1
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制： 当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则： 层叠规则一：找到应用给每个元素和属性的声明。 说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则， 并标识出所有受到影响的HTML元素。
凉凉心.
81 1
dingtalk_pbspgm
|
9月前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果？
如何使用CSS过渡实现页面元素的淡入淡出效果？
dingtalk_pbspgm
430 79
john散漫
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果？
在上述代码中，定义了一个名为 `fade-in` 的CSS类，其初始透明度为0，并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时，元素的透明度变为1，实现淡入效果；当再次点击按钮移除 `active` 类时，元素又会逐渐淡出。通过这种方式，可以根据用户的操作灵活地控制元素的淡入淡出效果。
john散漫
1509 60
奔跑的数据
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素：用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素，以亚航网站的特价机票信息为例，通过设置代理 IP、User-Agent 和 Cookie 等技术手段，有效提升爬虫策略，实现高效、稳定的爬取。
奔跑的数据
343 5
捕捉页面的关键元素：用CSS选择器与Puppeteer自动抓取
众所周知
|
12月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
298 7
你都不懂
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
你都不懂
97 0

热门文章

最新文章

  • 1
    【专栏：HTML与CSS实战项目篇】打造一个动态新闻网站
  • 2
    CSS控制首行
  • 3
    CSS——高级
  • 4
    WKWebView对网页和js，css，png等资源文件的缓存机制及如何刷新缓存
  • 5
    理解 CSS 布局和块级格式上下文
  • 6
    css 框架
  • 7
    CSS浮动详解（1）
  • 8
    CSS定位属性Position详解
  • 9
    css中如何设置字体
  • 10
    用CSS来改变网页鼠标显示样式的方法
  • 1
    仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
    2288
  • 2
    个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
    688
  • 3
    个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
    1084
  • 4
    征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
    1605
  • 5
    银行流水生成器在线制作，银行流水虚拟生成器app，h5+js+css【仅供学习用途】
    3479
  • 6
    制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
    592
  • 7
    医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
    743
  • 8
    处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
    1348
  • 9
    病历单生成器在线制作，病历单生成器app，HTML+CSS+JS恶搞工具
    3148
  • 10
    抖音快手小红书虚拟评论截图生成器，模拟对话制作工具，html+js+css
    909

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    oss云网关配置