-webkit-transition--谷歌浏览器可以使用的css3属性

来源：互联网发布：易企秀软件下载编辑：程序博客网时间：2024/06/07 01:10

<!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>

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

0 0