>  기사  >  웹 프론트엔드  >  고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법

고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법

青灯夜游
青灯夜游앞으로
2023-01-14 05:30:013557검색

고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법

에서는 복잡한 레이아웃 구현, 기기 차이와의 호환성, 멋진 애니메이션 만들기, 복잡한 상호 작용 만들기, 접근성 향상 및 기발한 효과 만들기에 중점을 둘 것입니다.

기본 개요를 고려하면서 기술 탐구와 현실과의 결합에도 중점을 둡니다.

텍스트는 여기서 시작됩니다.

과거에는 사진이 희미해지도록 만들고 싶었습니다. 가장 일반적인 것은 다음과 같은 전반적인 투명성 변경입니다.

<div class="img"></div>
div {
    width: 300px;
    height: 300px;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
    transition: .4s;
}
.img:hover {
    opacity: 0;
}

그러나 오늘날 CSS는 매우 강력합니다. CSS로 얻을 수 있는 페이드 효과는 더 이상 그렇게 간단하지 않습니다. [추천 학습: css 동영상 튜토리얼]

생각해 보세요. CSS로 다음과 같은 효과를 얻을 수 있을까요?

답은 '예'입니다! 이 기사에서는 위에서 언급한 그림 페이드 효과를 얻기 위해 하나의 레이블만 사용하여 처음부터 단계별로 설명합니다.

여기서 핵심은 두 가지입니다.

  • 그림을 이렇게 세밀하게, 여러 조각으로 자르는 방법은 무엇일까요?

  • 위 (1)을 기반으로 이러한 작은 블록의 독립적인 숨기기 및 표시를 제어하는 ​​방법은 무엇입니까?

당황하지 말고 차근차근 풀어봅시다.

강력한 마스크

먼저 마스크를 사용해야 합니다.

CSS에서 마스크 속성을 사용하면 사용자는 이미지의 특정 영역을 마스킹하거나 잘라서 요소의 표시 영역 중 일부 또는 전부를 숨길 수 있습니다.

Syntax

마스크를 사용하는 가장 기본적인 방법은 그림을 사용하는 것입니다. 다음과 비슷합니다.

div {
    width: 300px;
    height: 300px;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
    transition: .4s;
}
.img:hover {
    opacity: 0;
}

물론 그림을 사용하는 방법은 나중에 설명하겠습니다. 이미지를 사용하는 방법은 실제로 더 번거롭습니다. 왜냐하면 먼저 해당 이미지 자료를 준비해야 하기 때문입니다. 이미지 외에도 마스크는 그라데이션인 배경과 유사한 매개변수를 받을 수도 있습니다.

다음 사용법과 유사:

{
    mask: linear-gradient(#000, transparent)                      /* 使用渐变来做遮罩 */
}

그럼 구체적으로 어떻게 사용하나요? 위에서는 매우 간단한 예를 들어 검정색에서 투명색으로 그라데이션을 만들었고 실제로 적용했습니다.

다음 그림은 투명에서 검정색으로 그라데이션을 겹쳐 놓은 것입니다.

{
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법

마스크를 적용한 후의 모습은 다음과 같습니다.

고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법

이 DEMO를 사용하면 먼저 마스크의 기본 사용법을 간략하게 이해할 수 있습니다.

여기서 마스크 사용에 대한 가장 중요한 결론을 얻습니다. 마스크에 의해 생성된 투명한 그라데이션의 겹치는 부분이 투명해집니다.

위의 그라데이션이 사용된다는 점은 주목할 가치가 있습니다. linear-gradient(90deg, transparent, #fff),这里的 #fff 단색 부분은 실제로 효과에 영향을 주지 않고 어떤 색상으로도 변경할 수 있습니다.

CodePen 데모 -- MASK의 기본 사용

마스크를 사용하여 호버 구현 및 그림 숨기기

마스크의 간단한 사용법을 이해한 후 위에서 언급한 첫 번째 DEMO를 변형해 보겠습니다. .

<div class="img"></div>
div {
    width: 300px;
    height: 300px;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
}
.img:hover {
    mask: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

예, 마스크를 사용하면 대략적인 사라지는 효과도 얻을 수 있습니다.

마스크에 대해 모르신다면 먼저 이 글을 읽어보세요. Wonderful CSS MASK

물론이죠 , 현재 효과에는 큰 결함이 있는데, 바로 애니메이션이 부족하다는 것입니다. 사진이 즉시 사라집니다. 따라서 위에서 언급한 마스크를 사용하여 얻은 이미지 사라짐 효과에 애니메이션도 추가해야 합니다.

그리고 이를 위해서는 CSS @property를 사용해야 합니다.

강력한 CSS @property

CSS @property는 누구에게나 친숙할 것입니다.

@property CSS at-rule은 CSS Houdini API의 일부입니다. 이를 통해 개발자는 CSS 사용자 정의 속성을 명시적으로 정의하여 속성 유형 확인, 기본값 설정 및 사용자 정의 속성 상속 가능 여부를 정의할 수 있습니다.

如果你对 CSS @property 还有所疑惑,建议你先快速读一读这篇文章 -- CSS @property,让不可能变可能

回到我们的正题,如果我们想给上述使用 Mask 的代码,添加上动画,我们期望代码大概是这样:

div {
    width: 300px;
    height: 300px;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
    mask: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
}
.img:hover {
    mask: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

这里,mask 的是从 mask: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))mask: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 变化的。

但是实际上,这样并不会产生任何的动画效果。

原因在于,我们 Mask 属性本身是不支持过渡动画的!

但是,利用上 CSS @property,整个效果就不一样了。借助,CSS @property,我们改造一下代码:

@property --m-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
div {
    width: 300px;
    height: 300px;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
    mask: linear-gradient(90deg, rgba(0, 0, 0, var(--m-0)), rgba(0, 0, 0, var(--m-0)));
    transition: --m-0 0.5s;
}
div:hover {
    --m-0: 0;
}

我们利用 CSS @property 定义了一个名为 --m-0 的变量,然后,我们将整个动画过渡效果赋予了这个变量,而不是整个 mask。

利用这个小技巧,我们就可以成功的实现基于 mask 属性的动画效果:

借助多重 mask 分割图片

到了这一步,后面的步骤其实就很明朗了。

由于 mask 拥有和 background 一样的特性。因此,mask 是可以有多重 mask 的。也就是说,我们可以设置多个不同的 mask 效果给同一个元素。

什么意思呢?上面的效果只有一重 mask,我们稍微添加一些 mask 代码,让它变成 2 重 mask:

@property --m-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --m-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
div {
    mask: 
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-0)), rgba(0, 0, 0, var(--m-0))),
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1)));
    mask-size: 50% 100%;
    mask-position: left, right;
    mask-repeat: no-repeat;
    transition: 
        --m-0 0.3s,
        --m-1 0.25s 0.15s;
}
div:hover {
    --m-0: 0;
    --m-1: 0;
}

这样,我们的步骤大概是:

  • 首先将 mask 一分为二,左右两边各一个

  • 然后,设置了两个基于 CSS @property 的变量,--m-0--m-0

  • 然后,给它们设置了不同的过渡时间和过渡延迟时间

  • 在 hover 的一瞬间,再将这两个变量的值,都置为 0,也就是实现 linear-gradient(90deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 的变化,用于隐藏对应 mask 块

  • 由于设置了不同的过渡时间和延迟时间,整体上看上去,整个动画就分成了两部分

看看效果:

继续切割为 4 重 mask

好,既然 2 重 mask 效果没问题,那么我们可以再进一步,将整个效果切割为 4 个 mask。代码还是如法炮制,这里我再贴上核心代码:

@property --m-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --m-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --m-2 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --m-3 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
div {
    mask: 
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-0)), rgba(0, 0, 0, var(--m-0))),
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1))),
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-2)), rgba(0, 0, 0, var(--m-2))),
        linear-gradient(90deg, rgba(0, 0, 0, var(--m-3)), rgba(0, 0, 0, var(--m-3)));
    mask-size: 50% 50%;
    mask-repeat: no-repeat;
    mask-position: left top, right top, left bottom, bottom right;
    transition: 
        --m-0 0.3s,
        --m-1 0.15s 0.1s,
        --m-2 0.25s 0.21s,
        --m-3 0.19s 0.15s;
}
div:hover {
    --m-0: 0;
    --m-1: 0;
    --m-2: 0;
    --m-3: 0;
}

这样,我们就可以得到 4 块分割图片的 mask 消失效果:

好,再依次类推,我们就可以得到分割为 9 块的,分割为 16 块的。由于代码太多,就简单看看效果:

CodePen Demo -- 基于 @property 和 mask 的图片渐隐消失术

基于 SCSS 简化代码

那么,如果我们要分割为 100 块呢?或者 400 块呢?还要手写这些代码吗?

当然不需要,由于上面的代码的规律非常的明显,我们可以借助预处理器很好的封装整个效果。从而快速的实现切割成任意规则块数的效果。

完整的代码如下:

$count: 400;
$sqrt: 20;
$per: 100% / $sqrt;
$width: 300px;
$perWid: 15;

@for $i from 1 to ($count + 1) {
    @property --m-#{$i} {
       syntax: "<number>";
       initial-value: 1;
       inherits: false;
    }
}
@function bgSet($n) {
    $bg : radial-gradient(rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1)));
    
    @for $i from 2 through $n {         
        $bg: $bg, radial-gradient(rgba(0, 0, 0, var(--m-#{$i})), rgba(0, 0, 0, var(--m-#{$i})));
    }
    
    @return $bg;
}
@function positionSet($n) {
    $bgPosition: ();

    @for $i from 0 through ($n) {   
        @for $j from 0 through ($n - 1) {  
            $bgPosition: $bgPosition, #{$i * $perWid}px #{$j * $perWid}px;
        }
    }
    
    @return $bgPosition;
}
@function transitionSet($n) {
    $transition: --m-1 0.1s 0.1s;

    @for $i from 1 through $n {   
        $transition: $transition, --m-#{$i} #{random(500)}ms #{random(500)}ms;
    }
    
    @return $transition;
}
div {
    width: $width;
    height: $width;
    background: url(고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법.jpg);
    mask: bgSet($count);
    mask-size: $per $per;
    mask-repeat: no-repeat;
    mask-position: positionSet($sqrt); 
    transition: transitionSet($count);
}
div:hover {
    @for $i from 1 through $count {         
        --m-#{$i}: 0;
    }
}

这里,简单解释一下,以生成 400 块小块为例子:

  • 最上面的 SCSS 变量定义中,

    • $count 是我们最终生成的块数
    • $sqrt 是每行以及每列会拥有的块数
    • $per 是每一块占整体图片元素的百分比值
    • $width 是整个图片的宽高值
    • $perWid 是每一块的宽高值
  • 利用了最上面的一段循环函数,批量的生成 CSS @property 变量,从 --m-0--m-400

  • @function bgSet($n) {} 是生成 400 块 mask 片段

  • @function positionSet($n) 是生成 400 块 mask 的 mask-position,也就是生成 400 段不同定位,让 400 块 mask 刚好覆盖整个图片

  • @function transitionSet($n) {} 是随机设置每个块的动画时间和延迟时间

  • 代码最下面,还有一段循环函数,生成 400 个 CSS @property 变量的 hover 值,当 hover 的时候,全部变成 0

这样,我们就实现了 400 分块的渐隐效果。效果如下:

CodePen Demo -- 基于 @property 和 mask 的图片渐隐消失术

调整过渡变量,控制方向

当然,上面我们的对每一个小块的 transition 的过渡时间和过渡延迟时间的设置,都是随机的:

@function transitionSet($n) {
    $transition: --m-1 0.1s 0.1s;

    @for $i from 1 through $n {   
        $transition: $transition, --m-#{$i} #{random(500)}ms #{random(500)}ms;
    }
    
    @return $transition;
}

我们完全可以通过一定的控制,让过渡效果不那么随机,譬如有一定的方向感。

下面,我们通过让动画的延迟时间与 $i,也就是 mask 小块的 index 挂钩:

@function transitionSet($n) {
    $transition: --m-1 0.1s 0.1s;

    @for $i from 1 through $n {   
        $transition: $transition, --m-#{$i} #{100 + random(500)}ms #{($i / 50) * random(100)}ms;
    }
    
    @return $transition;
}

那么,整个动画的方向就是从左往右逐渐消失:

CodePen Demo -- 基于 @property 和 mask 的图片渐隐消失术 2

当然,有意思的是,这个效果,不仅仅能够运用在图片上,它其实可以作用在任何元素之上!

譬如,我们有的只是一段纯文本,同样适用这个效果:

CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术

总结

到这里,简单总结一下。本文,我们核心利用了 CSS @propery 和 mask,实现了一些原本看上去需要非常多 div 才能实现或者是需要借助 Canvas 才能实现的效果。同时,我们借助了 SCSS 预处理器,在寻找到规律后,极大的简化了 CSS 代码的书写量。

到今天,强大的 CSS 已经允许我们去做越来越多更有意思的动效,CSS @propery 和 mask 这两个属性在现代 CSS 发挥了非常重要的作用,非常建议大家认真掌握以下这两个属性。

原文链接:https://juejin.cn/post/7167160342101884935

作者:chokcoco

(学习视频分享:web前端

위 내용은 고급 CSS 기술: 이미지 페이딩을 달성하는 다양한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제