Adakah animasi css3 perisian?-Soal Jawab bahagian hadapan-php.cn

Adakah animasi css3 perisian?

WBOY

Lepaskan： 2022-06-23 16:02:03

asal

1715 orang telah melayarinya

Animasi CSS3 bukan perisian animasi CSS adalah untuk menukar elemen secara beransur-ansur dari satu gaya ke gaya yang lain, yang dicapai melalui CSS dan bahasa HTML ialah sifat animasi boleh berubah secara beransur-ansur dari satu gaya kepada yang lain. Apabila nilai berubah kepada nilai lain, atribut animasi boleh digunakan bersama dengan atribut animasi untuk mencapai kesan animasi CSS.

Adakah animasi css3 perisian?

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

animasi css3 bukan perisian

CSS boleh menghidupkan elemen HTML tanpa menggunakan JavaScript atau Flash! .

Apakah animasi css

Animasi membuat elemen berubah secara beransur-ansur dari satu gaya ke gaya yang lain.

Anda boleh menukar seberapa banyak sifat CSS yang anda suka.

Untuk menggunakan animasi CSS, anda mesti menetapkan beberapa bingkai utama pada animasi itu dahulu.

Bingkai kekunci mengandungi gaya yang dimiliki oleh sesuatu elemen pada masa tertentu.

Sesetengah sifat CSS boleh dianimasikan, bermakna ia boleh digunakan untuk animasi dan peralihan.

Sifat animasi boleh berubah secara beransur-ansur daripada satu nilai ke nilai lain, seperti saiz, kuantiti, peratusan dan warna.

@keyframes rules

Jika anda menentukan gaya CSS dalam peraturan @keyframes, animasi akan berubah secara beransur-ansur daripada gaya semasa kepada gaya baharu pada masa tertentu .

Untuk animasi berkuat kuasa, animasi mesti terikat pada elemen.

Contoh berikut mengikat animasi "contoh" kepada elemen

Animasi akan bertahan selama 4 saat sambil menukar secara beransur-ansur warna latar belakang elemen

daripada "merah" kepada "kuning":

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
</body>
</html>

Salin selepas log masuk

Output:

(Mempelajari perkongsian video: css tutorial video, tutorial video html)

Atas ialah kandungan terperinci Adakah animasi css3 perisian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css3

sumber：php.cn

Artikel sebelumnya：Adakah pautan peraturan gaya baharu dalam css3? Artikel seterusnya：Adakah css3 menyokong atribut sempadan?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang