css形变
2D形变
需要用到的属性: transform 缩放
transform.scale(2); 放大两倍旋转
transform:rotate(45deg);/*顺时针旋转45度*/ 平移
transform: translate(100px,300px); x轴平移100px,y轴平移300px 扭曲、倾斜
transform: skew(30deg,30deg); x轴,y轴扭曲30度矩阵
transform:matrix(1,0,0,1,100,100);
matrix() 6个属性的意思的:第一个宽度比例1就是原大小, 第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜 第三个是左右倾斜,数字和第二个一样的意思, 第四个是高度比例1就是原大小, 第五个是X方向的像素位移,X方向就是左右, 第六个是Y方向的像素位移,X方向就是上下
//屏幕适配 当屏幕宽度小于800px时 把所选的内容移动到指定位置
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no ,width=device-width" />
@media only screen and (max-width: 800px) {
.div2 {
position: relative;
width: 600px;
right: 200px;
}
}
//鼠标滑过字体360度旋转 2s完成
.nav h1{
color: red;
transition: all 2s;
}
.nav h1:hover{
transform: rotate(360deg);
}
//图片缩放1.5倍 2s完成
.img1{
animation: run 2s linear;
}
@keyframes run{
from{
transform: scale(1.5);
}
}
//把图片定位到相应位置 运用jQuery的fadeIn,fadeOut实现鼠标滑过图片淡入淡出
.play{
width: 50px;
height: 50px;
position: relative;
left: -190px;
top: -120px;
}
<script src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#play").hide();
$(".div1").hover(function(){
$("#play").fadeIn(1000);
},function(){
$("#play").fadeOut(1000);
})
})
</script>
过渡动画
transition
局限性
transition的优点在于简单易用,但是它有几个很大的局限。
(1) transition需要事件触发,所以没法在网页加载时自动发生。
(2) transition是一次性的,不能重复发生,除非一再触发。
(3) transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4) 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
1.2.2 animation
CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。
ainimation实现动画效果主要由两部分组成:
1) 通过类似Flash动画中的帧来声明一个动画;
2) 在animation属性中调用关键帧声明的动画。 animation动画属性
CSS3的animation制作动画效果主要包括两部分:1. 用关键帧声明一个动画,2.在animation调用关键帧声明的的动画。
1.3 关键帧动画
1.3.1关键帧动画的两种不同写法
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式:
@keyframesIDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀.
css形变
2D形变
需要用到的属性: transform 缩放
transform.scale(2); 放大两倍旋转
transform:rotate(45deg);/*顺时针旋转45度*/ 平移
transform: translate(100px,300px); x轴平移100px,y轴平移300px 扭曲、倾斜
transform: skew(30deg,30deg); x轴,y轴扭曲30度矩阵
transform:matrix(1,0,0,1,100,100);
matrix() 6个属性的意思的:第一个宽度比例1就是原大小, 第二个是上下倾斜1就是2倍,2就是3倍,0就是不倾斜 第三个是左右倾斜,数字和第二个一样的意思, 第四个是高度比例1就是原大小, 第五个是X方向的像素位移,X方向就是左右, 第六个是Y方向的像素位移,X方向就是上下
transition
使用
局限性
transition的优点在于简单易用,但是它有几个很大的局限。
(1) transition需要事件触发,所以没法在网页加载时自动发生。
(2) transition是一次性的,不能重复发生,除非一再触发。
(3) transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4) 一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
CSS Animation就是为了解决这些问题而提出的。
1.2.2 animation
CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。
ainimation实现动画效果主要由两部分组成:
1) 通过类似Flash动画中的帧来声明一个动画;
2) 在animation属性中调用关键帧声明的动画。 animation动画属性
CSS3的animation制作动画效果主要包括两部分:1. 用关键帧声明一个动画,2.在animation调用关键帧声明的的动画。
1.3 关键帧动画
1.3.1关键帧动画的两种不同写法
@keyframes IDENT {
from {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
to {
Properties:Properties value;
}
}
或者全部写成百分比的形式:
@keyframesIDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,Percentage是百分比值,我们可以添加许多个这样的百分比,Properties为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们from和to 分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础上加上-webkit前缀.