Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan terbang-tutorial css-php.cn

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan terbang

王林

Lepaskan： 2023-10-19 10:41:08

asal

1150 orang telah melayarinya

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan terbang

Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan khas terbang

Pengenalan: CSS (Cascading Style Sheets) adalah sangat penting dalam reka bentuk web Teknologi yang boleh digunakan untuk menggayakan dan menyusun halaman web. Di antara pelbagai kesan, kesan terbang adalah satu yang sangat popular. Dalam artikel ini, kami akan mengajar anda langkah demi langkah cara membuat kesan terbang menggunakan CSS dan memberikan contoh kod khusus.

1. Cipta struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk menampung kesan terbang kita. Berikut ialah contoh kod struktur HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>飞翔特效</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="bird"></div>
  </body>
</html>

Salin selepas log masuk

Kami telah memperkenalkan helaian gaya bernama styles.css dalam <head> tag Fail, digunakan untuk menetapkan gaya kesan terbang. <head> 标签中引入了一个名为 styles.css 的样式表文件，用于设置飞翔特效的样式。

二、添加 CSS 样式

接下来，我们需要添加 CSS 样式来创建飞翔特效。在 styles.css 文件中，我们可以使用以下代码：

.bird {
  width: 100px;
  height: 100px;
  background-color: #FFD700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fly 4s infinite;
}

@keyframes fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Salin selepas log masuk

在上述代码中，我们首先对 .bird 类的元素设置了宽度和高度，并给它设置了背景颜色。使用 position: absolute; 将元素定位到居中位置。

我们使用 transform 属性来设置元素的位移和旋转状态。translate(-50%, -50%)将元素在水平和垂直方向都向左和向上移动50%的距离，以使其居中。

然后，我们创建了一个名为 fly 的关键帧动画。在 0% 的时候元素未发生任何变化，50% 的时候元素向右旋转了180度，100%

2. Tambah gaya CSS

Seterusnya, kita perlu menambah gaya CSS untuk mencipta kesan terbang. Dalam fail styles.css, kami boleh menggunakan kod berikut:

rrreee

Dalam kod di atas, kami mula-mula menetapkan elemen .bird kelas Lebar dan ketinggian ditetapkan, dan warna latar belakang ditetapkan untuknya. Gunakan position: absolute; untuk memusatkan elemen.

Kami menggunakan atribut transform untuk menetapkan keadaan sesaran dan putaran elemen. terjemah(-50%, -50%)Menggerakkan elemen 50% ke kiri dan ke atas, secara mendatar dan menegak, untuk memusatkannya.

Kemudian, kami mencipta animasi bingkai utama yang dipanggil fly. Pada 0%, elemen tidak berubah sama sekali Pada 50%, elemen telah berputar 180 darjah ke kanan Pada 100% , elemen telah berputar 180 darjah ke kanan Kembali ke keadaan awal. Kesan animasi ini akan berpusing dan bertahan selama 4 saat.

3. Demonstrasi Keputusan#🎜🎜##🎜🎜#Selepas menyelesaikan operasi di atas, kita boleh membuka fail HTML dalam pelayar dan melihat kesan burung dengan kesan khas terbang. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜##🎜🎜#Melalui artikel ini, kami belajar cara menggunakan CSS untuk mencipta kesan terbang. Mula-mula kami mencipta struktur HTML untuk memaparkan kesan khas, dan kemudian menggunakan CSS untuk menetapkan gaya yang berkaitan, termasuk kedudukan dan animasi elemen. Akhirnya, dengan membuka fail HTML dalam penyemak imbas, kita boleh melihat kesan terbang yang indah. #🎜🎜##🎜🎜# Saya berharap melalui panduan artikel ini, anda boleh belajar cara menggunakan CSS untuk mencipta kesan khas terbang, dan seterusnya menerapkannya pada reka bentuk web anda sendiri. #🎜🎜#

Atas ialah kandungan terperinci Panduan Animasi CSS: Ajar anda langkah demi langkah cara mencipta kesan terbang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!