css基础知识
变形:
/*位移*/
transform: translate(50px,50px);
/*沿Z轴旋转360度*/
transform: rotate(360deg);deg是度的意思
/*缩放*/
transform: scale(0.5,0.2);x和y轴缩放比例
/*斜切*/\
transfrom:skew(0,45deg)x,y轴缩放的角度
元素旋转
旋转方向的判断;
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
默认从z轴旋转
transform: rotate(45deg);
变形中心点:
语法:transform-origin
默认值是盒子中心点,
还可以设置方位例如:transform-origin: left center;
还可以设置例如九宫格的方式:transform-origin: left top;
还可以自己定义位置:transform-origin: 50px 50px;
背面可见
背面是否可见:backface-visibility: hidden;
图片翻转：
演示图片和文字层重叠的效果
transform-style: preserve-3d;
transform: perspective(800px) rotateY(45deg);初始旋转45度
animation动画：
语法：animation
属性：nfinite不限制次数
alternate动画结束后返回，返回也算次数
animation-fill-mode 动画前后的状态
forwards动画完成保持在最后一帧
backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
例子：animation: moving 1s ease 1s 5 alternate both;
动画暂停：animation-play-state: paused
动画运行：animation-play-state: runnin
定义动画名称及形式框架代码：
/*定义一个动画，名称为moving*/
@keyframes moving{
/*初始状态*/
from{
width: 200px;
}
/*结束状态*/
to{
width: 500px;
}
animation:name duration timing-function delay iteration-count direction;同时设置多个属性
举例(人物走动)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人物走路动画</title>
<style type="text/css">
.box{
width: 120px;
height: 182px;
/*border: 1px solid black;*/
margin: 50px auto 0;
overflow: hidden;
position: relative;
animation: moving 2s linear infinite;
}
.box img{
position: absolute;
left: 0;
top: 0;
/*steps动画步数，图片有8帧，所以设置为8步*/
animation: walking 2s steps(16) infinite;
}
@keyframes moving{
0%{
transform: translate(0px,0px);/*位移*/
}
50%{
transform: translate(200px,0px);
}
100%{
transform: translate(0px,0px);
}
}
@keyframes walking{
from{
left: 0px;
}
to{
left: -1920px;
}
}
</style>
</head>
<body>
<div class="box">
<img src="img/walking1.png" alt="人物走路">
</div>
</body>
</html>
css游览器样式前缀
为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如(以下代码可以兼容所有游览器)
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
网友评论