penukaran CSS: alat yang berkuasa untuk menyelesaikan kesukaran reka bentuk

Artikel ini akan meneroka kuasa penukaran CSS dalam aplikasi dunia nyata, menunjukkan bagaimana ia dapat menyelesaikan pelbagai cabaran reka bentuk dengan berkesan dan mewujudkan kesan visual yang menarik. Kami akan belajar bagaimana untuk menyelaraskan unsur -unsur secara menegak, membuat anak panah yang indah, membina animasi beban, dan melaksanakan animasi flip, dll.

penukaran CSS3 menjadi standard pada tahun 2012, dan sebelum itu beberapa pelayar telah memberikan sokongan. Transformasi membolehkan anda dengan mudah mengubah elemen web, seperti putaran, skala, atau unsur -unsur condong, untuk mencapai dengan hanya satu baris kod, yang sukar dicapai sebelum ini. Penukaran CSS menyokong transformasi 2D dan 3D.

Dari segi keserasian penyemak imbas, semua pelayar arus perdana menyokong penukaran 2D, termasuk Internet Explorer 9 dan kemudian. Penukaran 3D hanya disokong sebahagiannya dalam IE10 dan kemudian.

Artikel ini tidak akan menerangkan asas -asas penukaran. Jika anda tidak biasa dengan penukaran, disarankan agar anda membaca pengenalan kepada penukaran 2D dan 3D terlebih dahulu.

penjajaran menegak elemen kanak -kanak

penjajaran menegak unsur -unsur selalu menjadi masalah bagi pereka web. Walaupun nampaknya mudah, sebenarnya terdapat banyak teknik yang rumit. Sesetengah kaedah mengesyorkan menggunakan

dan display: inline, yang lain mengesyorkan menggunakan vertical-align: middle dan gaya yang berkaitan. Sudah tentu, Flexbox atau Grid dapat menyelesaikan masalah ini, tetapi untuk komponen yang lebih kecil, penukaran mungkin menjadi pilihan yang lebih mudah. display: table

Apabila unsur -unsur sangat berubah -ubah, penjajaran menegak boleh menjadi lebih rumit. Penukaran CSS menyediakan cara yang berkesan untuk menyelesaikan masalah ini. Berikut adalah contoh mudah dengan dua div bersarang:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

kami menetapkan lebar, ketinggian, dan sempadan untuk elemen induk dan menambah jarak untuk menjadikannya lebih cantik:

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Kemudian, gunakan

untuk memusatkan teks secara menegak: transform: translateY(-50%);

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Untuk mengelakkan kabur, anda boleh menambah

: perspective(1px)

.child {
  transform: perspective(1px) translateY(-50%);
}

Dengan cara ini, walaupun panjang teks berbeza, unsur -unsur kanak -kanak boleh berpusat secara menegak.

Buat anak panah

Satu lagi kes penggunaan yang menarik adalah untuk membuat anak panah dialog berskala. Anda boleh membuat anak panah menggunakan editor grafik, tetapi ini adalah rumit dan imej bitmap mungkin tidak skala dengan baik.

penyelesaian CSS tulen lebih berkesan. Katakan kita mempunyai kotak teks:

<div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

Buat anak panah dengan pseudo-elemen

dan tukarnya ke bentuk anak panah menggunakan transformasi putaran: ::before

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}

Dengan cara ini, walaupun saiz fon halaman diubah, anak panah dapat mengekalkan perkadaran.

Buat "Jump Ball" Loading Animation

Untuk menunjukkan proses pemuatan, anda boleh membuat animasi pemuatan bola lompat menggunakan animasi dan transformasi CSS:

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div>

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}

Buat animasi pemuatan "pemutar" menggunakan SVG (bahagian ini sama dengan teks asal. Untuk mengelakkan pertindihan, kod terperinci ditinggalkan di sini, dan hanya gambaran keseluruhannya)

SVG boleh digunakan untuk membuat animasi pemuatan yang lebih kompleks, seperti pemintal. Dengan menggabungkan elemen SVG, animasi CSS, dan transformasi, anda boleh membuat kesan pemuatan visual yang menarik.

Buat animasi flip

Akhirnya, mari kita lihat contoh imej dengan animasi flip. Apabila anda melayang tetikus anda ke atas gambar, ia membalikkan dan memaparkan keterangannya. Ini sangat berguna untuk laman web seperti Instagram. (Bahagian kandungan ini serupa dengan teks asal. Untuk mengelakkan pertindihan, kod terperinci ditinggalkan di sini dan hanya gambaran keseluruhannya)

kesan animasi flip lancar boleh dicapai dengan menggunakan penukaran 3D dan transform-style: preserve-3d;, serta sifat transition.

Langkah berjaga -jaga

Walaupun penukaran dan animasi CSS berkuasa, mereka harus digunakan dengan berhati -hati untuk mengelakkan terlalu banyak menyebabkan pengalaman pengguna yang lemah.

Ringkasan

Artikel ini menunjukkan bagaimana penukaran CSS dapat digabungkan dengan teknologi lain untuk menyelesaikan pelbagai tugas reka bentuk. Kami belajar bagaimana menyelaraskan unsur -unsur secara menegak, membuat anak panah berskala, melompat dan memutar animasi beban, dan melaksanakan animasi flip. Ingat, CSS harus digunakan untuk meningkatkan pengalaman pengguna, bukan hanya menunjukkan.

(kandungan "soalan yang sering ditanya mengenai transformasi CSS" dalam teks asal sangat konsisten dengan kandungan artikel ini, jadi ia ditinggalkan di sini)

Atas ialah kandungan terperinci Menggunakan CSS berubah di dunia nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!