Rumah > hujung hadapan web > tutorial css > Apakah kegunaan peralihan dalam css3

Apakah kegunaan peralihan dalam css3

WBOY
Lepaskan: 2021-12-21 16:56:29
asal
2507 orang telah melayarinya

Dalam css3, peralihan atribut peralihan digunakan untuk menetapkan kesan peralihan elemen Ia adalah atribut yang disingkatkan dengan sintaks "transition:property duration timing-function delay". , kelajuan dan kelajuan masa tunda elemen.

Apakah kegunaan peralihan dalam css3

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

Apakah penggunaan peralihan dalam css3?

Dalam css, atribut peralihan ialah peralihan, yang digunakan untuk menetapkan kesan peralihan daripada sesuatu unsur.

Atribut peralihan menetapkan elemen sebagai kesan peralihan Empat atribut yang disingkatkan ialah:

  • sifat peralihan

  • tempoh peralihan

  • fungsi pemasaan peralihan

  • penangguhan peralihan

Mereka fenbie untuk elemen tetapan Nama atribut, masa peralihan, lengkung kelajuan peralihan dan masa tunda peralihan kesan peralihan.

Sintaksnya ialah:

transition: property duration timing-function delay;
Salin selepas log masuk

Contohnya adalah seperti berikut:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上,查看过渡效果。</p>
</body>
</html>
Salin selepas log masuk

Hasil keluaran:

 3.gif

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah kegunaan peralihan dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan