WEb开发之H5+CSS篇
CSS2 2D转化
transfrom
-
translate(移动)
---------------------------> x 轴
|
|
| y轴
定义2D转换中的移动,沿着X和Y轴移动元素
不会影响其他元素的位置
百分比单位是相对于自身元素的宽高来对比的
对行内标签没有效果
技巧:盒子水平垂直居中
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
-
rotate (旋转)
rotate里面跟度数,单位是deg
角度为正,顺时针;角度为负,逆时针
默认旋转的中心点是元素的中心点
-
transform-origin(转换中心点)
注意后面参数x y 是用空格隔开的
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给x y 设置像素 或者方位名词(上下左右中间)
-
scale (缩放)
注意其中的x y用逗号隔开,不加单位数字表示倍数。
transform:scale(1,1) 宽和高都放大一倍,相当于没有放大。
transform:scale(2,2) 宽和高都放大了2倍。
transform:scale(2) 只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
transform:scale (0.5,0.5) 缩小
sacle缩放最大的优势:可以设置旋转中心点缩放,默认以中心点缩放的,而且不影响其他盒子
综合写法
transform:translate rotate scale
CSS3 动画
animation,可以通过设置多个节点来精确控制一个或者一组动画,实现复杂的动画效果。
动画序列
- 0%是动画的开始,100%是动画的结束。这样的规则就是动画序列。
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间,或用关键字“form”和“to”,等同于0%和100%。
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
简写:前四个一样,(前两个不能省略)后面的可以不一样。
CSS3 3D转化
3D:近大远小,物体后面遮挡不可见,
三维坐标系。
- X轴:水平向右 X右边是正值,左边是负值
- Y轴:垂直向下 Y下面是正值,上面是负值
- Z轴:垂直屏幕 往外面是正值,往里面是负值
3D位移:translate3D(x,y,z)
3D旋转:rotate3D(x,y,z)
透视:perspectivw(写在观察元素的父盒子上面)
3D呈现:transfrom-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: wheat;
}
.box div:last-child {
background-color: yellowgreen;
transform: rotateX(60deg);
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
浏览器私有前缀
- -moz-:代表Firefox浏览器私有
- -ms-:代表ie浏览器私有
- -webkit:代表safari,chrome私有属性
- -o-:代表Opera私有属性
每日一句
普通人只想到如何度过时间,有才能的人设法利用时间。