<!DOCTYPE html><html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: blue;
transition: opacity 2s;
opacity: 0.1;
}
div:hover {
/* width: 300px; */
opacity: 1;
}
</style>
</head>
<body>
<div></div>
<p>請把滑鼠指標移動到藍色的 div 元素上,就可以看到過渡效果。</p>
<p><b>註釋:</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>複製程式碼
CSS3 Transition
相關文章
- css3整理--transitionCSSS3
- Css3中的TransitionCSSS3
- CSS3 transition-delayCSSS3
- CSS3 transition-durationCSSS3
- CSS3 transition-propertyCSSS3
- CSS3 transition 屬性CSSS3
- css3 動畫(一) transitionCSSS3動畫
- CSS3——過渡(transition)CSSS3
- CSS3 Transition介紹CSSS3
- CSS3 之 transform & transition & animationCSSS3ORM
- CSS3 transition-timing-functionCSSS3Function
- css3中transition屬性詳解CSSS3
- CSS3 transition規範的實際使用經驗CSSS3
- PlayMaker的Transition和Global Transition
- 結合 CSS3 transition transform 實現簡單的跑馬燈效果CSSS3ORM
- CSS transitionCSS
- transition & transformORM
- 內容loading載入後高度變化CSS3 transition體驗優化CSSS3優化
- 【Vue】transition動畫Vue動畫
- react-transition-group原始碼淺析(一):Transition.mdReact原始碼
- Android Transition NoteAndroid
- 當transition遇上display
- Simple state transition 3
- 細談 vue - transition 篇Vue
- animation與transition 區別
- animation、transition、transform的區別ORM
- CSS transition-timing-functionCSSFunction
- css transition 實現滑入滑出CSS
- CSS動畫:animation、transition、transform、translateCSS動畫ORM
- transition、transform、animate的區別?ORM
- 756-Pyramid Transition Matrix
- 細談 vue - transition-group 篇Vue
- Vue 常用 transition 動畫效果記錄Vue動畫
- 照片牆(transform/transition/z-index)ORMIndex
- css transition屬性用法介紹CSS
- transform,transition,animation的混合使用——初探ORM
- Bootstrap原始碼分析之transition、affixboot原始碼
- Simple one-hot state transition 3