标签：back spec san 设置 translate ima oat doctype nim
CSS简单动画及二三维常用变换
/*向右移动*/
.moveRight{
background-color:#FFF121;
position:relative;
animation:moveRightFrame 5s;/*infinite 循环*/
animation-delay:3s;/*延时*/
animation-iteration-count:2;/*循环次数*/
animation-direction:alternate;/*是否轮流反向播放 normal或alternate */
}
@keyframes moveRightFrame{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes moveRightFrame{/*谷歌浏览器*/
from {left:0px;}
to {left:200px;}
}
/*指定变化过程*/
@keyframes moveRightFrame1{
0% {left:0px;}
25% {left:100px;}
50% {left:400px;}
100% {left:800px;}
}
@-webkit-keyframes moveRightFrame1{/*谷歌浏览器*/
0% {left:0px;}
25% {left:100px;}
50% {left:400px;}
100% {left:800px;}
}
/*属性变化 直接设置标签的style会覆盖此处属性*/
.propertyChange{
width:100px;
background-color:red;
transition:width 3s, background-color 5s;
-webkit-transition:width 3s, background-color 5s;
}
.propertyChange:hover{
width:300px;
background-color:yellow;
}
/*2D 变换移动 转动 缩放 拉伸*/
/*旋转*/
.roateStyle{
width:100px;
background-color:red;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Internet Explorer */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}
/*移动*/
.translateStyle{
width:100px;
background-color:red;
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
/*缩放*/
.scaleStyle{
width:100px;
background-color:red;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4);/* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}
/*翻转*/
.skewStyle{
width:400px;
/*background-color:red;*/
border:2px solid black;
-webkit-transform-style: preserve-3d;/*内部元素3D*/
-webkit-perspective:580;/*视图距离 透视效果*/
transform: skew(0deg,20deg);
-ms-transform: skew(0deg,20deg); /* IE 9 */
-webkit-transform: skew(0deg,0deg); /* Safari and Chrome */
-o-transform: skew(0deg,20deg); /* Opera */
-moz-transform: skew(0deg,20deg); /* Firefox */
}
/*3D变换*/
.skew3D{
width:100px;
background-color:yellow;
/**-webkit-transform-style: preserve-3d;**/
-webkit-transform: rotateY(130deg);
}
/*旋转动画*/
.roatAnimation{
width:100px;
/*background-color:yellow;*/
animation:roatAnimationFrame 3s;
animation-iteration-count:6;/*循环次数*/
animation-direction:normal;/*是否轮流反向播放 normal或alternate */
}
@keyframes roatAnimationFrame{
from{-webkit-transform: rotateY(0deg)}
to{-webkit-transform: rotateY(360deg)}
}
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cssAnimation.css"/> </head> <body> <div class="skewStyle" style="height:400px;"> <div class="roatAnimation" style="height:100px;"> <font size=10>你好</font> </div> </div> </body> </html>
标签：back spec san 设置 translate ima oat doctype nim
原文地址：http://www.cnblogs.com/tengpan-cn/p/6189720.html
