Ciri laluan klip CSS3 dalam tindakan: pemangkasan kawasan dinamik

Artikel ini akan membawa anda melalui CSS3 clip-path (clipping path) dan memperkenalkan cara menggunakan clip-path untuk mencapai pemangkasan kawasan dinamik. Saya harap ia akan membantu anda.

Saya melawat CodePen hari ini dan melihat kesan yang sangat menarik ini:

Demo CodePen -- Reka Bentuk Bahan Menu Oleh Bennett Feely

Laman web: https://codepen.io/bennettfeely/pen/fHdFb

Masih terdapat beberapa perkara yang patut diterokai dan dipelajari tentang kesan ini lihat.

Bagaimana untuk mencapai kesan yang serupa?

Pertama sekali, fikirkan, jika anda diminta untuk mencapai kesan di atas, apa yang anda akan lakukan?

Di sini saya hanya menyenaraikan beberapa kaedah yang mungkin:

• bayang-kotak

• kecerunan jejari kecerunan

• Transformasi skala: skala()

Cepat melaluinya satu persatu.

Gunakan box-shadow untuk melaksanakan

Jika anda menggunakan box-shadow, kodnya kira-kira seperti berikut:

<div class="g-container">
    <div class="g-item"></div>
</div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.g-item {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    top: 20px;
    left: 20px;
    box-shadow: 0 0 0 0 #fff;
    transition: box-shadow .3s linear;
    
    &:hover {
        box-shadow: 0 0 0 420px #fff;
    }
}

Intinya ialah:

• Topeng dengan overflow: hideen ditetapkan di lapisan luar

• Apabila elemen dalam berlegar, perubahan daripada box-shadow: 0 0 0 0 #fff kepada box-shadow: 0 0 0 420px #fff dilaksanakan

Kesannya adalah seperti berikut:

Keseluruhan animasi disimulasikan, tetapi masalahnya yang paling mematikan ialah dua:

• Apabila tetikus kami meninggalkan bulatan, keseluruhan animasi mula diteruskan secara terbalik, dan kawasan putih mula hilang.

• Elemen tersembunyi dalam segi empat tepat selepas pengembangan animasi tidak mudah diletakkan

Jadi,

walaupun ia kelihatan bagus, anda hanya boleh menyerah. box-shadow

Kod Demo di atas -- Demo CodePen -- animasi zum bayangan kotak

Tapak web: https://codepen.io/Chokcoco/pen/jOLRQNy

Gunakan kecerunan jejari-kecerunan untuk mencapai

Di bawah kami menggunakan kecerunan jejarian

tambah CSS @property untuk memulihkan kesan di atas: radial-gradient

<div class="g-container"></div>

@property --size {
  syntax: &#39;<length>&#39;;
  inherits: false;
  initial-value: 24px;
}

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    background: radial-gradient(circle at 44px 44px, #fff 0, #fff var(--size), transparent var(--size), transparent 0);
    transition: --size .3s linear;
    
    &:hover {
        --size: 450px;
    }
}

Oleh mengawal kesan animasi kecerunan jejari, apabila melayang, kami menukar latar belakang bulatan yang asalnya kecil menjadi latar belakang bulatan besar Kesannya adalah seperti berikut:

emmm, kesannya. Ia sememangnya dipulihkan, dan masalahnya juga membawa maut:

• Oleh kerana ia adalah perubahan pada latar belakang, tetikus tidak perlu melayang di atas bulatan kecil julat div, dan animasi akan bermula Ini jelas salah

• Serupa dengan kaedah

  pertama, DOM unsur navigasi yang tersembunyi di bawah putih tidak mudah untuk letak box-shadow

Kod Demo di atas -- Demo CodePen -- animasi zum kecerunan jejari

Laman web: https://codepen.io/Chokcoco /pen/RwZOqWb

emmm, ada kaedah lain, dengan mengezum

, yang juga akan mempunyai masalah tertentu, jadi saya tidak akan mengembangkannya di sini. transform: scale()

Jadi di sini, jika anda ingin mencapai kesan di atas, intinya ialah:

• Tetikus mesti melayang di atas bulatan untuk memulakan animasi, dan tetikus boleh mulakan animasi selepas ia dikembangkan. Bergerak bebas dalam julat tanpa menarik balik kesan animasi

• Selepas animasi dikembangkan, peletakan DOM di dalam seharusnya tidak terlalu menyusahkan terbaik jika anda boleh mengawal paparan dan menyembunyikan kandungan di dalam tanpa menggunakan Javascript

Gunakan laluan klip untuk melaksanakan pemangkasan kawasan dinamik

Jadi, di sini, kami sebenarnya. memerlukan

tanaman kawasan dinamik.

Dalam artikel saya ini --

Bagaimana untuk melaksanakan limpahan: tersembunyi tanpa menggunakan limpahan: tersembunyi? memperkenalkan beberapa cara untuk memotong elemen dalam CSS, dan antaranya, yang paling sesuai untuk menggunakan kesan ini ialah -- laluan klip.

Menggunakan

, fungsi pemangkasan dinamik boleh dilaksanakan dengan sangat baik, dan kodnya juga sangat mudah: clip-path

<div class="g-container"></div>

.g-container {
    position: relative;
    width: 400px;
    height: 300px;
    overflow: hidden;
    transition: clip-path .3s linear;
    clip-path: circle(20px at 44px 44px);
    background: #fff;
    
    &:hover {
        clip-path: circle(460px at 44px 44px);
    }
}

Kita hanya perlu menggunakan

, dalam Pada mulanya, gunakan clip-path untuk memotong div segi empat tepat menjadi bulatan Apabila melayang, kembangkan jejari bulatan pemotongan ke seluruh julat segi empat tepat. clip-path: circle(20px at 44px 44px)

Kesannya adalah seperti berikut:

这样，我们就能完美的实现题图的效果，并且，内置的 DOM 元素，直接写进这个 div 内部即可。

<div class="g-container">
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</div>

效果如下：

CodePen Demo -- clip-path zoom in animation

网址：https://codepen.io/Chokcoco/pen/yLorrRm

很有意思的一个技巧，利用 clip-path 实现动态区域裁剪，希望大家能够掌握。

最后

好了，本文到此结束，希望本文对你有所帮助 :)

（学习视频分享：css视频教程）

Atas ialah kandungan terperinci Ciri laluan klip CSS3 dalam tindakan: pemangkasan kawasan dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!