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

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

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 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

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

• 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

tanaman kawasan dinamik.

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.

, 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);
    }
}

, 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)

这样，我们就能完美的实现题图的效果，并且，内置的 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!