Bagaimana untuk melaksanakan bulatan menggunakan CSS3

Dalam reka bentuk web, bulatan selalunya diperlukan untuk mencapai beberapa kesan tertentu. Pada masa lalu, kita mungkin perlu menggunakan imej atau JS untuk mencapai kesan cincin, tetapi kini, dengan kuasa CSS3, kita boleh mencapai kesan cincin dengan mudah. Artikel ini akan memperkenalkan cara menggunakan CSS3 untuk melaksanakan bulatan, serta beberapa contoh aplikasi praktikal.

Pengetahuan asas

Sebelum memperkenalkan cara menggunakan CSS3 untuk melaksanakan bulatan, kita perlu menguasai beberapa pengetahuan asas:

1. Model kotak

Model kotak ialah salah satu konsep paling asas dalam CSS, yang mentakrifkan dimensi, sempadan dan pelapik elemen seperti yang dipaparkan pada halaman. Terdapat dua jenis model kotak: model standard dan model IE Perbezaan di antaranya terletak pada kandungan yang disertakan semasa mengira lebar dan tinggi. Dalam artikel ini, kami menggunakan model standard.

2. Sempadan

Sempadan dalam CSS boleh digunakan untuk menambah sempadan luar pada elemen dan sifatnya termasuk lebar, gaya dan warna. Kita boleh mentakrifkan gaya sempadan elemen melalui kod berikut:

border: 1px solid #000;

Kod ini boleh mentakrifkan sempadan pepejal hitam lebar 1 piksel.

3. jejari sempadan

jejari sempadan ialah sifat yang sangat berguna dalam CSS3, yang boleh digunakan untuk menentukan sudut bulat bagi sesuatu elemen. Kita boleh menetapkan bucu bulat untuk elemen melalui kod berikut:

border-radius: 50%;

Kod ini boleh menjadikan keempat-empat penjuru elemen menjadi bucu bulat, dengan jejari 50% daripada lebar elemen.

Melaksanakan cincin

Setelah memahami pengetahuan asas di atas, kita boleh mula memperkenalkan cara menggunakan CSS3 untuk merealisasikan cincin. Pertama, kita perlu menentukan elemen div yang akan berfungsi sebagai bekas donat kita. Kami boleh mentakrifkan elemen ini melalui kod berikut:

<div class="circle"></div>

.circle {
    width: 100px;
    height: 100px;
    border: 10px solid #000;
    border-radius: 50%;
}

Dalam kod ini, kami menetapkan lebar dan ketinggian elemen kepada 100 piksel, lebar sempadan kepada 10 piksel dan gaya sempadan kepada pepejal hitam garis, bulatan Jejari sudut ialah 50% daripada lebar elemen.

Seterusnya, kita perlu menggunakan putaran CSS3 dan fungsi elemen pseudo untuk mencapai kesan gelang. Kita boleh mentakrifkan gelang melalui kod berikut:

.circle::before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

Dalam kod ini, kita mentakrifkan elemen pseudo sebelum dan menetapkan lebar, tinggi, lebar sempadan, gaya sempadan dan jejari sudut untuknya . Untuk menyimpannya di dalam gelanggang, kami menggunakan margin negatif untuk melaraskan kedudukannya. Akhir sekali, kami menggunakan sifat transformasi untuk memutarkan elemen 45 darjah supaya ia kelihatan seperti cincin.

Contoh aplikasi

Melalui kaedah di atas, kita boleh mencapai kesan cincin dengan mudah. Seterusnya, kami akan memperkenalkan beberapa contoh aplikasi praktikal.

1. Kesan Lencana

Kita boleh menggunakan cincin untuk mencapai kesan lencana, memberikannya ruang paparan tertentu dalam reka bentuk web. Berikut ialah contoh pelaksanaan kesan lencana:

<div class="badge">
    <span>NEW</span>
</div>

.badge {
    display: inline-block;
    border: 10px solid #000;
    border-radius: 50%;
    position: relative;
    margin-right: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 34px;
    text-align: center;
    width: 34px;
    height: 34px;
}

.badge::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: -11px -11px 0 -11px;
    border: 10px solid #fff;
    border-radius: 50%;
    transform: rotate(45deg);
    z-index: -1;
}

.badge span {
    display: block;
    position: relative;
    z-index: 2;
}

Dalam kod ini, kami mentakrifkan kesan lencana dengan teg BAHARU. Dengan menetapkan sifat cincin dan menambah unsur pseudo sebelum, kami telah mencapai lencana yang cantik.

2. Kesan bar kemajuan

Kita boleh menggunakan bulatan untuk mencapai kesan bar kemajuan, supaya ia mempunyai imej dan kesan paparan intuitif semasa operasi pengguna. Berikut ialah contoh melaksanakan kesan bar kemajuan:

<div class="progress-bar">
    <div class="inner-bar" data-value="70"></div>
</div>

.progress-bar {
    position: relative;
    margin: 50px auto;
    width: 120px;
    height: 120px;
    border: 10px solid #f7f7f7;
    border-radius: 50%;
}

.inner-bar {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border: 10px solid #3498db;
    border-radius: 50%;
    clip: rect(0, 60px, 120px, 60px);
    transform: rotate(45deg);
    z-index: -1;
}

[data-value]:before {
    content: attr(data-value) "%";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 120px;
    text-align: center;
}

Dalam kod ini, kami mentakrifkan kesan bar kemajuan dengan kemajuan 70%. Dengan menetapkan sifat gelang
, menambahkan elemen bar dalam untuk mengendalikan panjang paparan bar kemajuan
, dan menggunakan elemen pseudo sebelum untuk menambah nilai kemajuan, kami mencapai kemajuan yang mudah dan cantik kesan bar.

Ringkasan

CSS3 ialah cara mudah dan praktikal untuk melaksanakan kesan deringan, yang boleh mencapai pelbagai kesan dalam reka bentuk web, seperti lencana, bar kemajuan, dsb. Dengan menguasai pengetahuan asas dan menggunakan atribut, unsur pseudo, putaran dan fungsi lain cincin, kita boleh mencapai kesan cincin dengan mudah. Pada masa yang sama, kami juga boleh terus menggunakan kuasa kesan cincin dalam aplikasi praktikal untuk meningkatkan kualiti dan pengalaman pengguna keseluruhan reka bentuk web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bulatan menggunakan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!