Bagaimana untuk Mencipta Kesan Lukisan Bulatan Animasi Lancar dengan Latar Belakang Lutsinar Menggunakan CSS Sahaja?

CSS Sahaja Animasikan Lukis Bulatan dengan jejari sempadan dan Latar Belakang Lutsinar

Masalah:

Cara mencipta sempadan animasi -bulatan jejari dengan latar belakang lutsinar sambil menutup bahagian awal bulatan untuk kesan lukisan?

Penyelesaian:

1. Tubuhkan Kanvas:

   • Tentukan bekas dengan kedudukan mutlak dan sempadan untuk rujukan.
   • Buat elemen separuh klip kedudukan mutlak lebar 50% untuk topeng.

2. Buat Bulatan:

   • Di dalam separuh klip, letakkan bulatan dengan sempadan lutsinar dan bahagian atas biru dan warna sempadan kiri.
   • Letakkan bulatan sejajar kanan dalam separuh klip.

3. Animasikan Lukisan:

   • Gunakan animasi CSS untuk memutarkan bulatan 135 darjah dari kedudukan asalnya -45 darjah untuk memberikan rupa lukisan.
   • Animasikan separuh klip untuk memutar 360 darjah untuk memastikan topeng berada dalam letak semasa putaran.

4. Kekalkan Ketelusan:

   • Tambahkan kecerunan linear berulang pada badan untuk memastikan ketelusan dan sediakan konteks visual.
   • Skalakan kecerunan kepada saiz bekas dan tetapkan ulangan latar belakang kepada tiada ulangan.

5. Betulkan Separuh Bulatan :

   • Buat separuh kedua bulatan (tetap) tanpa animasi, diputar 135 darjah.
   • Animasikan kelegapan separuh bulatan tetap untuk muncul selepas 50% masa animasi.

6. Kawal Masa Animasi:

   • Laraskan tempoh animasi dan pemasaan seperti yang dikehendaki untuk mencapai kelajuan dan kesan lukisan yang diingini.

Coretan Kod:

<code class="css">body {
  background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
  height: 500px;
  background-size: 500px 500px;
  background-repeat: no-repeat;
}

#container {
  position: absolute;
  width: 400px;
  height: 400px;
  border: solid red 1px;
  animation: colors 4s infinite;
}

#halfclip {
  width: 50%;
  height: 100%;
  right: 0px;
  position: absolute;
  overflow: hidden;
  transform-origin: left center;
  animation: cliprotate 16s steps(2) infinite;
  -webkit-animation: cliprotate 16s steps(2) infinite;
}

.halfcircle {
  box-sizing: border-box;
  height: 100%;
  right: 0px;
  position: absolute;
  border: solid 25px transparent;
  border-top-color: blue;
  border-left-color: blue;
  border-radius: 50%;
}

#clipped {
  width: 200%;
  animation: rotate 8s linear infinite;
  -webkit-animation: rotate 8s linear infinite;
}

#fixed {
  width: 100%;
  transform: rotate(135deg);
  animation: showfixed 16s steps(2) infinite;
  -webkit-animation: showfixed 16s linear infinite;
}

@-webkit-keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cliprotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@keyframes rotate {
  0% { transform: rotate(-45deg); }
  100% { transform: rotate(135deg); }
}

@-webkit-keyframes showfixed {
  0% { opacity: 0; }
  49.9% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}
</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Lukisan Bulatan Animasi Lancar dengan Latar Belakang Lutsinar Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!