Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Adakah animasi css3 perisian?
Adakah animasi css3 perisian?
- WBOYasal
- 2022-06-23 16:02:031718semak imbas
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.
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 dc6dce4a544fdca2df29d5ac0ea9906b Animasi akan bertahan selama 4 saat sambil menukar secara beransur-ansur warna latar belakang elemen dc6dce4a544fdca2df29d5ac0ea9906b 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>Output:
(Mempelajari perkongsian video: csstutorial 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!