Bagaimana untuk mencapai kesan putaran bulat dalam css3-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk mencapai kesan putaran bulat dalam css3

WBOY

Lepaskan： 2022-03-22 12:17:19

asal

3016 orang telah melayarinya

Kaedah: 1. Gunakan "border-radius:100%" untuk menetapkan elemen menjadi bulat; 2. Gunakan "@keyframes name {100%{transform:rotate(360deg);}}" untuk menetapkan animasi; 3. , gunakan "animasi: nama masa" untuk mengikat kesan animasi kepada elemen.

Bagaimana untuk mencapai kesan putaran bulat dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara mencapai kesan putaran bulat dalam css3

jejari sempadan membolehkan anda menetapkan bucu bulat sempadan luar sesuatu elemen. Menentukan bulatan apabila menggunakan satu jejari dan elips apabila menggunakan dua jejari. Persilangan bulatan (bujur) ini dan sempadan menghasilkan kesan sudut bulat.

Menggunakan peraturan @keyframes anda boleh mencipta animasi.

Cipta animasi dengan menukar secara beransur-ansur daripada satu tetapan gaya CSS kepada yang lain.

Anda boleh menukar tetapan gaya CSS beberapa kali semasa animasi.

Nyatakan apabila perubahan berlaku menggunakan %, atau kata kunci "dari" dan "kepada", yang sama dengan 0% hingga 100%.

0% ialah apabila animasi bermula, 100% ialah apabila animasi selesai.

Untuk sokongan penyemak imbas terbaik anda harus sentiasa menentukan pemilih untuk 0% dan 100%.

Sintaksnya ialah:

@keyframes animationname {keyframes-selector {css-styles;}}

Salin selepas log masuk

Sintaks atribut animasi ialah:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Salin selepas log masuk

nama-animasi menentukan kunci untuk diikat pemilih Nama bingkai
tempoh-animasi Menentukan berapa saat atau milisaat yang akan diambil oleh animasi untuk menyelesaikan
masa-animasi- fungsi Menetapkan cara animasi akan melengkapkan kitaran
tunda-animasi menetapkan selang kelewatan sebelum animasi bermula.
kiraan lelaran-animasi mentakrifkan bilangan kali animasi dimainkan.
arah animasi menentukan sama ada animasi perlu dimainkan secara terbalik mengikut giliran.
mod isian-animasi menentukan gaya yang akan digunakan pada elemen apabila animasi tidak dimainkan (apabila animasi selesai atau apabila animasi mengalami kelewatan sebelum mula dimainkan) .
animation-play-state Menentukan sama ada animasi sedang berjalan atau dijeda.

Contohnya adalah seperti berikut:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
#example1
{
background:#dddddd;
width:100px;
height:100px;
border-radius:100%;
text-align:center;
animation:fadenum 5s;
}
@keyframes fadenum{
   100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="example1">
  这是一个圆
</div>
<br><br>
</body>
</html>

Salin selepas log masuk

Hasil output:

(Perkongsian video pembelajaran: tutorial video css)

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