cari
Rumahhujung hadapan webtutorial cssKemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej

Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej

akan menumpukan pada melaksanakan reka letak yang kompleks, keserasian dengan perbezaan peranti, membuat animasi yang menarik, membuat interaksi yang kompleks, meningkatkan kebolehcapaian dan membina kesan aneh.

Sambil mengambil kira gambaran keseluruhan asas, ia juga memfokuskan pada penerokaan kemahiran dan aplikasinya dalam kombinasi dengan realiti. Semua orang dialu-alukan untuk memberi perhatian.

Teks bermula di sini.

Pada masa lalu, kami mahu mencapai fade-out gambar. Yang paling biasa ialah perubahan ketelusan keseluruhan, seperti ini:

<div class="img"></div>
div {
    width: 300px;
    height: 300px;
    background: url(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.jpg);
    transition: .4s;
}
.img:hover {
    opacity: 0;
}

Walau bagaimanapun, CSS sangat berkuasa hari ini. Kesan pudar yang boleh kita capai dengan CSS tidak lagi begitu mudah. [Pembelajaran yang disyorkan: tutorial video css]

Fikirkanlah, adakah kesan berikut boleh dicapai dengan CSS?

Jawapannya ya! Artikel ini akan langkah demi langkah, bermula dari awal, menggunakan hanya satu label untuk mencapai kesan pudar gambar yang disebutkan di atas.

Di sini, terdapat dua titik teras:

  • Bagaimana untuk memotong gambar dengan begitu halus dan menjadi banyak kepingan?

  • Berdasarkan perkara di atas (1), bagaimana untuk mengawal penyembunyian dan paparan bebas blok kecil ini?

Jangan panik, biar kami selesaikan langkah demi langkah.

Topeng Berkuasa

Pertama sekali, kita perlu menggunakan Mask.

Dalam CSS, atribut topeng membenarkan pengguna menyembunyikan sebahagian atau semua kawasan elemen yang boleh dilihat dengan menutup atau memangkas kawasan tertentu imej.

Sintaks

Cara paling asas untuk menggunakan topeng adalah menggunakan gambar, sama seperti ini:

div {
    width: 300px;
    height: 300px;
    background: url(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.jpg);
    transition: .4s;
}
.img:hover {
    opacity: 0;
}

Sudah tentu kaedah penggunaan gambar akan dibincangkan kemudian . Kaedah menggunakan imej sebenarnya lebih rumit, kerana kita perlu menyediakan bahan imej yang sepadan terlebih dahulu Selain imej, topeng juga boleh menerima parameter seperti latar belakang, iaitu kecerunan.

Penggunaan adalah serupa dengan yang berikut:

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

Bagaimana untuk menggunakannya secara khusus? Contoh yang sangat mudah. ​​Di atas kami mencipta warna kecerunan daripada hitam kepada telus.

{
    background: url(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.png) ;
    mask: linear-gradient(90deg, transparent, #fff);
}

Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imejSelepas memakai topeng, ia akan menjadi seperti ini:

Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imejDEMO ini boleh Dulu, jom memahami secara ringkas penggunaan asas topeng.

Di sini kita mendapat kesimpulan yang paling penting dalam menggunakan topeng:

Bahagian bertindih kecerunan lutsinar yang dijana oleh topeng akan menjadi lutsinar.

Perlu diperhatikan bahawa kecerunan di atas menggunakan

Bahagian warna pepejal

di sini sebenarnya boleh ditukar kepada sebarang warna tanpa menjejaskan kesan. linear-gradient(90deg, transparent, #fff)#fff

Demo CodePen -- Penggunaan asas MASK

Gunakan topeng untuk melaksanakan tuding dan sembunyikan gambar

Setelah memahami penggunaan topeng yang mudah, mari ambil lihat Untuk contoh yang sangat mudah, kami mengubah DEMO pertama yang dinyatakan di atas.

<div class="img"></div>
Ya, menggunakan Mask, kita juga boleh mendapatkan anggaran kesan hilang:
div {
    width: 300px;
    height: 300px;
    background: url(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.jpg);
}
.img:hover {
    mask: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

Jika untuk Mask anda, anda tidak 'Belum faham, anda perlu membaca artikel ini terlebih dahulu:
MASK CSS yang Hebat

Sudah tentu, terdapat kelemahan besar dalam kesan ini, iaitu kekurangan animasi . Gambar hilang serta merta. Oleh itu, kita juga perlu menambah animasi kepada kesan kehilangan imej yang disebutkan di atas yang dicapai dengan bantuan topeng.

Dan ini memerlukan penggunaan CSS @property.

CSS @property yang berkuasa

CSS @property sepatutnya biasa kepada semua orang.

@property CSS at-rule ialah sebahagian daripada CSS Houdini API, yang membenarkan pembangun mentakrifkan sifat tersuai CSS mereka secara eksplisit, membenarkan penyemakan jenis harta, menetapkan nilai lalai dan menentukan sifat tersuai sama ada ia boleh diwarisi .

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

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

div {
    width: 300px;
    height: 300px;
    background: url(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.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(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.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(Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej.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前端

Atas ialah kandungan terperinci Kemahiran CSS lanjutan: pelbagai kaedah untuk mencapai pudar imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:掘金社区. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
巧用CSS实现各种奇形怪状按钮(附代码)巧用CSS实现各种奇形怪状按钮(附代码)Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮,希望对大家有所帮助!

5个常见的JavaScript内存错误5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AM

JavaScript 不提供任何内存管理操作。相反,内存由 JavaScript VM 通过内存回收过程管理,该过程称为垃圾收集。

Node.js 19正式发布,聊聊它的 6 大特性!Node.js 19正式发布,聊聊它的 6 大特性!Nov 16, 2022 pm 08:34 PM

Node 19已正式发布,下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性,希望对大家有所帮助!

实战:vscode中开发一个支持vue文件跳转到定义的插件实战:vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

浅析Vue3动态组件怎么进行异常处理浅析Vue3动态组件怎么进行异常处理Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

聊聊如何选择一个最好的Node.js Docker镜像?聊聊如何选择一个最好的Node.js Docker镜像?Dec 13, 2022 pm 08:00 PM

选择一个Node​的Docker镜像看起来像是一件小事,但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢?

聊聊Node.js中的 GC (垃圾回收)机制聊聊Node.js中的 GC (垃圾回收)机制Nov 29, 2022 pm 08:44 PM

Node.js 是如何做 GC (垃圾回收)的?下面本篇文章就来带大家了解一下。

【6大类】实用的前端处理文件的工具库,快来收藏吧!【6大类】实用的前端处理文件的工具库,快来收藏吧!Jul 15, 2022 pm 02:58 PM

本篇文章给大家整理和分享几个前端文件处理相关的实用工具库,共分成6大类一一介绍给大家,希望对大家有所帮助。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini