cari

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

Apakah kegunaan peralihan dalam css3

WBOY
WBOYasal
2021-12-21 16:56:292515semak imbas

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;

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>

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!

html5 css css3 Property function transition
Kenyataan：
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 sebelumnya：Penjelasan terperinci yang paling mudah difahami tentang atribut apungan CSS (gambar dan teks terperinci)Artikel seterusnya：Penjelasan terperinci yang paling mudah difahami tentang atribut apungan CSS (gambar dan teks terperinci)

Artikel berkaitan

Lihat lagi