过渡效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了过渡效果相关的知识，希望对你有一定的参考价值。
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡。我们可以在不使用 Flash 动画或 javascript 的情况下，在元素从一种样式变换为另一种样式时为元素添加效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。以下是 transition 属性的浏览器支持、语法和示例。
语法：
transition 属性主要包含四个属性值：
transition-property -- 规定应用过渡的 CSS 属性的名称；
transition-duration -- 定义过渡效果花费的时间，默认是 0；
transition-timing-function -- 规定过渡效果的时间曲线。默认是 "ease"；
transition-delay -- 规定过渡效果何时开始，默认是 0。
transition -- 简写属性，用于在一个属性中设置四个过渡属性。如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>过渡多项改变</title> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s ease, height 2s ease, -webkit-transform 2s ease; transition: width 2s ease-in-out, height 2s ease-in-out, transform 2s ease-in-out; } div:hover { width: 200px; height: 200px; -webkit-transform: rotate(360deg); transform: rotate(360deg); } </style> </head> <body> <div>鼠标移动到 div 元素上，查看过渡效果。</div> </body> </html>
以上是关于过渡效果的主要内容，如果未能解决你的问题，请参考以下文章