<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#block{
width:400px;
height:400px;
background-color:#69c;
margin:0 auto;
-webkit-transition:background-color 3s;
}
#block:hover{
background-color:red;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
<html>
<head>
<title></title>
<style>
#block{
width:400px;
height:400px;
background-color:#69c;
margin:0 auto;
-webkit-transition:background-color 3s;
}
#block:hover{
background-color:red;
}
</style>
</head>
<body>
<div id="block">
</div>
</body>
</html>
transition:中文意思是:过渡
使用css3.0创建简单的3D场景
-perspective 透视的;perspective-origin origin :开端
transform 改变: translate 转化 调动,rotate旋转
translate 平移 rotae 旋转操作。
transition :从一个属性值平滑过渡到另一个属性值
animation:
transition 调用: transition:<过渡属性名称> <过渡时间>
-webkit-transition 谷歌浏览器 ios 浏览器 指南针浏览器
-moz-transition 火狐浏览器
-o-transition 欧朋浏览器
-webkit-transition:color 1s; 可以分开写
-webkit-transition-property:color;
-webkit-transition-duration:1s;
transition 多个属性的过渡效果
方法一:-webkit-transition :<属性1><时间1>,<属性2><时间2>
方法二:
webkit-transition:<属性1><时间1>
webkit-transition:<属性2><时间3>
transition-timing-function:
ease
linear
ease -in
ease-out
ease-in-out