元素的变形-transform属性
1. 旋转
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
2. 缩放和翻转
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
3. 移动
-webkit-transform:translate(10px,5px);
-moz-transform:translate(10px,5px);
-o-transform:translate(10px,5px);
-ms-transform:translate(10px,5px);
transform:translate(10px,5px);
4. 倾斜
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
-ms-transform:skew(-30deg);
transform:skew(-30deg);
5. 矩阵变形
-webkit-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-moz-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-o-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
-ms-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
transform:matrix(0.866,0.5,0.5,-0.866,10,10);
6. 同时使用多个变形函数
-webkit-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-moz-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-o-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
-ms-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
transform:translate(10px,10px) rotate(30deg) scale(1,-1);
7. 定义变形原点--transform-origin属性
li a {
display:block;
padding:5px 10px;
color:#333;
text-decoration:none;
/* 变形原点：自定义*/
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
li:hover a {
background-color:#f90;
color:#fff;
/* 变形方式： 旋转*/
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform:rotate(30deg);
}
css3 过渡效果--transition
实现过渡效果--transition属性
transition: transition-property || transition-duration || transition-timing-function || transition-delay
1. transition-property:none | all |
// none 表示没有任何css 属性有过渡效果
// all 为默认值，表示所有的css属性都有过渡效果
// property 指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果
/*设置过渡属性*/
-webkit-transition-property:-webkit-transoform;
-moz-transition-property:-webkit-transoform;
-o-transition-property:-webkit-transoform;
transition-property:-webkit-transoform;
2. transition-duration:
/* 设置多个过渡属性*/
-webkit-transition-duration:4s, 1s;
-moz-transition-duration:4s, 1s;
-o-transition-duration:4s, 1s;
transition-duration:4s, 1s;
3. transition-delay:
/*设置延迟时间*/
-webkit-transition-delay:500ms;
-moz-transition-delay:500ms;
-o-transition-delay:500ms;
transition-delay:500ms;
4. transition-timing-function: ease | linear | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
linear: 表示过渡一直是一个速度
ease: 表示过渡的速度先慢，再快，最后非常慢。
ease-in: 表示过渡的速度先慢，后越来越快，直至结束。
ease-out:表示过渡的速度先快，后越来越慢，直至结束。
ease-in-out:表示过渡的速度在开始和结束时，都很慢。
cubic-bezier(n,n,n,n):自定义贝塞尔曲线效果，其中的4个参数为0到1的数字。
过渡效果实例：
div {
margin:100px auto;
width:200px;
height:100px;
background-color:#00f;
/*设置过渡效果*/
-webkit-transition:all 1000ms linear 500ms;
-moz-transition:all 1000ms linear 500ms;
-o-transition:all 1000ms linear 500ms;
transition:all 1000ms linear 500ms;
}
div:hover {
background-color:#f90;
/*设置变形：旋转240deg*/
-webkit-transform:rotate(240deg);
-moz-transform:rotate(240deg);
-o-transform:rotate(240deg);
transform:rotate(240deg);
}
css3动画设计--animation
div {
position:absolute;
-moz-animation:mymove 5s infinite;
-webkit-animation: mymove 5s infinite;
}
@-moz-keyframes mymove{
0% {top:0px;}
25% {top:200px; left:200px;}
75% {top:50px; left:10px;}
100% {top:100px; left:60px;}
}
@-webkit-keyframes mymove{
0% {top:0px;}
25% {top:200px; left:200px;}
75% {top:50px; left:10px;}
100% {top:100px; left:60px;}
}
动画的实现--animation属性
animation: <name><duration><timing-function><delay><iteration-count><direction>
1. animation-name:<keyframename>| none
2. animation-duration:<time> // 定义动画播放的周期时间
3. animation-timimg-function: ease | linear | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
linear: 表示过渡一直是一个速度
ease: 表示过渡的速度先慢，再快，最后非常慢。
ease-in: 表示过渡的速度先慢，后越来越快，直至结束。
ease-out:表示过渡的速度先快，后越来越慢，直至结束。
ease-in-out:表示过渡的速度在开始和结束时，都很慢。
cubic-bezier(n,n,n,n):自定义贝塞尔曲线效果，其中的4个参数为0到1的数字。
4. animation-delay: <time>指定播放动画的时间长度
5. animation-iteration-coumt:infinite | <n> // 定义动画循环播放的次数。
6. animation-direction:normal | alternate
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>effect</title>
<style type="text/css">
.img {
width: 510px;
height: 318px;
-webkit-transform-origin:42 90;
-moz-transform-origin:42 90;
-o-transform-origin:42 90;
-ms-transform-origin:42 90;
transform-origin:42 90;
-moz-animation:mymove 5s ease-out 1;
-webkit-animation: mymove 5s ease-out 1;
}
@-moz-keyframes mymove {
25% {-moz-transform:scale(1.5);}
50% {-moz-transform:scale(2);}
100% {-moz-transform:scale(2.5);}
}
@-webkit-keyframes mymove {
25% {-webkit-transform:scale(1.5);}
50% {-webkit-transform:scale(2);}
100% {-webkit-transform:scale(2.5);}
}
</style>
</head>
<body>
<img src="img/1.jpeg" width="510" height="318" class="img" />
</body>
</html>
