Cara menggunakan CSS tulen untuk mencapai kesan yang serupa dengan tetingkap terapung

Cara menggunakan CSS tulen untuk mencapai kesan yang serupa dengan tetingkap terapung

Tetingkap terapung ialah kesan yang sering digunakan dalam reka bentuk web. Ia boleh memberikan akses pantas kepada fungsi atau memaparkan maklumat penting. Artikel ini akan memperkenalkan cara menggunakan CSS tulen untuk mencapai kesan yang serupa dengan tetingkap terapung, termasuk contoh kod khusus.

Pertama, kita perlu mencipta elemen bekas dalam HTML untuk mengehoskan kandungan tetingkap terapung. Boleh menjadi div atau elemen lain yang sesuai.

<div class="floater">
  <div class="content">
    <!-- 悬浮窗口的内容 -->
  </div>
</div>

Seterusnya, kita perlu menggunakan CSS untuk menentukan gaya elemen bekas ini dan menjadikannya kelihatan digantung.

.floater {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

Kod di atas menetapkan kedudukan elemen kontena kepada kedudukan tetap (tetap), dan menetapkan jaraknya dari bahagian bawah dan kanan penyemak imbas melalui atribut bawah dan kanan. Tetapkan saiz elemen bekas melalui sifat lebar dan ketinggian. Tetapkan warna latar belakang, gaya jidar dan pembundaran jidar elemen bekas melalui sifat warna latar belakang, jidar dan jejari sempadan. Tambahkan sedikit kesan bayang-bayang pada elemen bekas melalui sifat bayang-kotak.

Seterusnya, kita perlu menentukan gaya untuk bekas kandungan tetingkap terapung, termasuk kedudukan dan gaya.

.content {
  padding: 10px;
  text-align: center;
}

Kod di atas menambah beberapa pelapik dan menjajarkan tengah kandungan (sejajarkan teks: tengah) pada bekas kandungan tetingkap terapung.

Setakat ini, kami telah melengkapkan struktur asas dan gaya mencipta tetingkap terapung menggunakan CSS tulen. Seterusnya, kita boleh menyesuaikan lagi kesan tetingkap terapung mengikut keperluan khusus, seperti menambah animasi, menetapkan interaksi tetikus, dsb.

Berikut ialah contoh yang menambahkan warna latar belakang kecerunan dan kesan animasi pudar dari bawah ke atas pada tetingkap terapung.

.floater {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 200px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  animation: fade-in 0.5s ease-in-out;
  background: linear-gradient(to top, #f38181, #fce38a);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Kod di atas mentakrifkan animasi yang dinamakan fade-in melalui atribut animasi, dengan tempoh 0.5 saat, dan menggunakan fungsi ease-in-out easing. Warna latar belakang kecerunan dari bawah ke atas ditetapkan melalui sifat latar belakang.

Tidak sukar untuk mencapai kesan yang serupa dengan tetingkap terapung menggunakan CSS tulen Dengan struktur HTML dan gaya CSS yang sesuai, kami boleh mencapai pelbagai kesan tetingkap terapung. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan teknologi tingkap terapung.

Atas ialah kandungan terperinci Cara menggunakan CSS tulen untuk mencapai kesan yang serupa dengan tetingkap terapung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!