Berapakah jenis sifat peralihan css3 yang terdapat?-Soal Jawab bahagian hadapan-php.cn

Berapakah jenis sifat peralihan css3 yang terdapat?

青灯夜游

Lepaskan： 2022-03-18 16:58:16

asal

3231 orang telah melayarinya

Terdapat 5 jenis sifat peralihan css3: 1. peralihan; 3. tempoh peralihan; 4. fungsi peralihan;

Berapakah jenis sifat peralihan css3 yang terdapat?

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

Peralihan CSS membolehkan anda menukar nilai hartanah dengan lancar dalam tempoh masa tertentu.

Terdapat 5 jenis sifat peralihan css3:

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

Peralihan CSS3 ialah kesan elemen yang berubah secara beransur-ansur dari satu gaya ke gaya yang lain.

Untuk mencapai ini, dua perkara mesti ditentukan:

Nyatakan sifat CSS untuk menambah kesan
Nyatakan tempoh kesan.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:2s;
	/* Safari */
	-webkit-transition-property:width;
	-webkit-transition-duration:1s;
	-webkit-transition-timing-function:linear;
	-webkit-transition-delay:2s;
}

div:hover
{
	width:200px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>

</body>
</html>

Salin selepas log masuk

Berapakah jenis sifat peralihan css3 yang terdapat?

(Belajar perkongsian video: tutorial video css, bahagian hadapan web)

Atas ialah kandungan terperinci Berapakah jenis sifat peralihan css3 yang terdapat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!