CSS3过渡transition
SS3的transition属性详解:
本章节介绍一下transition属性的用法，它也是与动画相关的一个属性。
一.基本知识:
transition翻译成汉语具有"过渡"的意思，也就是说可以让一个元素的css属性值在一定时间段内进行平滑的过渡。
此属性和border、background等属性一样是复合属性。
语法结构:
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
参数解释:
1.transition-property:设置或者检索参与过渡的属性。
2.transition-duration: 检索或设置对象过渡的持续时间。
3.transition-timing-function:检索或设置对象中过渡的动画类型。
4.transition-delay:检索或设置对象延迟过渡的时间。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码演示如何在两秒内将div的宽度以动画的效果从100px设置为500px。
既然是复合属性，那么自然就可以将属性分开分别设置
neue Datei
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>
Vorschau
Clear
- Kursempfehlungen
- Kursunterlagen herunterladen
Frei
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)