如何使用CSS3制作进度条的简单示例代码
这篇文章主要介绍了使用CSS3制作一个简单的进度条(demo)的相关资料,需要的朋友可以参考下
这里只是一个小demo,一个用CSS3写的进度条。
如图所示：
具体代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
width:100px;
display:inline-block;
*zoom:1;
}
.pb-wrapper
{
border:1px solid #cfd0d2;
position:relative;
background:#cfd0d2;
border-radius: 8px;
}
.pb-container
{
height:12px;
position:relative;
left:-1px;
margin-right:-2px;
font:1px/0 arial;
padding:1px;
}
.pb-highlight
{
position:absolute;
left:0;
top:0;
_top:1px;
width:100%;
opacity:0.6;
filter:alpha(opacity=60);
height:6px;
background:white;
font-size:1px;
line-height:0;
z-index:1
}
.pb-text
{
width:100%;
position:absolute;
left:0;
top:0;
text-align:center;
font:10px/12px arial;
color:black;
font:10px/12px arial
}
</style>
</head>
<body>
<p class="process-bar skin-green">
<p class="pb-wrapper">
<p class="pb-highlight"></p>
<p class="pb-container">
<p class="pb-text">50%</p>
<p class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></p>
</p>
</p>
</p>
</body>
</html>Atas ialah kandungan terperinci 如何使用CSS3制作进度条的简单示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menetapkan warna bar kemajuan menggunakan HTML dan CSS?
Sep 19, 2023 pm 08:25 PM
Dalam pembangunan laman web, bar kemajuan adalah bahagian penting laman web. Bar kemajuan menunjukkan kemajuan proses. Dengan bantuannya, pengguna boleh melihat status kerja yang dilakukan di tapak web, termasuk masa muat, muat naik fail, muat turun fail dan tugas lain yang serupa. Secara lalai, ia berwarna kelabu. Walau bagaimanapun, untuk menjadikan bar kemajuan menonjol dan menarik secara visual, anda boleh menggunakan HTML dan CSS untuk menukar warnanya. Apakah bar kemajuan? Bar kemajuan digunakan untuk menunjukkan kemajuan tugas. Ia adalah elemen antara muka pengguna grafik. Ia pada asasnya terdiri daripada bar mendatar yang diisi secara beransur-ansur semasa tugas berjalan, disertai dengan nilai peratusan atau penunjuk penyiapan lain. Bar kemajuan digunakan dalam aplikasi web untuk memberikan pengguna maklumat tentang melengkapkan proses seperti muat naik fail, muat turun fail atau pemasangan perisian.
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Bagaimana untuk melaksanakan fungsi bar kemajuan pemuatan halaman dalam JavaScript?
Oct 27, 2023 am 08:57 AM
Bagaimanakah JavaScript melaksanakan fungsi bar kemajuan memuatkan halaman? Dalam aplikasi Internet moden, kelajuan memuatkan halaman adalah salah satu faktor utama pengalaman pengguna. Untuk menunjukkan kepada pengguna proses pemuatan, banyak tapak web dan aplikasi menggunakan bar kemajuan pemuatan. JavaScript menyediakan cara yang mudah dan berkesan untuk melaksanakan fungsi bar kemajuan memuatkan halaman. Proses pelaksanaan khusus adalah seperti berikut: Buat struktur HTML Mula-mula, buat struktur HTML bar kemajuan di lokasi yang sesuai pada halaman adalah perkara biasa untuk meletakkan bar kemajuan
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan
Sep 19, 2023 am 09:22 AM
Cara menggunakan Vue untuk melaksanakan kesan bar kemajuan Bar kemajuan ialah elemen antara muka biasa yang boleh digunakan untuk memaparkan penyelesaian tugas atau operasi. Dalam rangka kerja Vue, kita boleh melaksanakan kesan khas bar kemajuan melalui beberapa kod mudah. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan bar kemajuan dan memberikan contoh kod khusus. Cipta komponen Vue Pertama, kita perlu mencipta komponen Vue untuk melaksanakan fungsi bar kemajuan. Dalam Vue, komponen boleh diguna semula dan boleh digunakan di beberapa tempat. Buat fail bernama Pro
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
