Bagaimana untuk mencapai kesan gelembung mudah dalam css

Bubbles ialah elemen reka bentuk UI biasa yang boleh digunakan untuk menekankan maklumat atau menggesa pengguna, meningkatkan interaktiviti dan estetika halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan kesan gelembung mudah.

Langkah 1: Struktur HTML

Mula-mula, kita perlu memberikan gelembung div bekas, dan kemudian meletakkan elemen kandungan teks di dalam bekas. Berikut ialah kod HTML:

<div>
  <p>这是气泡内容</p>
</div>

Langkah 2: Gaya CSS

Seterusnya, kita perlu menggayakan bekas gelembung. Dalam proses ini, secara amnya kita perlu mempertimbangkan aspek berikut:

1. Warna latar belakang dan warna sempadan
   Warna gelembung perlu dibezakan daripada warna latar belakang halaman, dan secara amnya yang lebih cerah akan dipilih Warna untuk menambah kesan visual. Pada masa yang sama, warna sempadan juga perlu ditetapkan untuk membezakannya daripada latar belakang.
2. Saiz dan kedudukan gelembung
   Saiz gelembung boleh dilaraskan mengikut keperluan, dan biasanya lebih besar sedikit daripada kandungan teks. Di samping itu, kedudukan gelembung perlu mempertimbangkan hubungan penjajaran dengan kandungan teks, dan secara amnya diletakkan di atas atau di bawah kandungan.
3. Bentuk gelembung
   Bentuk gelembung boleh dilaraskan mengikut keperluan Bentuk yang lebih biasa ialah segi empat tepat bulat dan segi tiga.

Berikut ialah kod CSS, kami akan menerangkan butiran langkah demi langkah:

.bubble-container {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #00BFFF;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.bubble-container:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #00BFFF transparent;
}

Pertama, kami menetapkan gaya .bubble-container, termasuk warna latar belakang dan warna fon, saiz fon, dsb. Selain itu, kami menggunakan atribut padding untuk menentukan saiz gelembung dan jarak antara kandungan teks.

Kemudian, kami menggunakan kelas pseudo :sebelum untuk mencipta bahagian segi tiga gelembung. Khususnya, kami meletakkan segi tiga dengan menetapkan sifat bawah dan kiri, dan kemudian melaraskan kedudukan melalui sifat margin-kiri. Akhir sekali, kami menggunakan sifat lebar sempadan, gaya sempadan dan warna sempadan untuk menetapkan saiz dan warna segi tiga.

Langkah 3: Lengkapkan kod

Akhir sekali, kami menggabungkan HTML dan CSS untuk mendapatkan kod kesan gelembung lengkap:

Kod HTML:

<div>
  <p>这是气泡内容</p>
</div>

Kod CSS:

.bubble-container {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #00BFFF;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.bubble-container:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #00BFFF transparent;
}

Dengan kod di atas, kita boleh mencapai kesan gelembung mudah, seperti yang ditunjukkan di bawah:

Kesimpulan

Melalui pengenalan artikel ini, saya percaya anda telah memahami cara menggunakan HTML dan CSS untuk mencapai kesan gelembung mudah. Sudah tentu, sebagai tambahan kepada bentuk segi empat tepat bulat dan segi tiga asas, anda juga boleh menggunakan lebih banyak teknik CSS untuk mencipta lebih banyak kesan gelembung berwarna-warni untuk menjadikan halaman lebih jelas dan menarik.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan gelembung mudah dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!