CSS附加
1、2D转换
转换(transform)是css3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
移动:translate
旋转:rotate
缩放:scale
1.1二维坐标系
1.2 2D转换之移动translate
语法
transform:translate(x,y);或者分开写
transform:translateX(n);
transform:translateY(n);
重点
定义2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点:不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
1.3 2D转换之旋转rotate
语法
transform:rotate(度数);
重点
rotate里面跟度数,单位是deg,比如rotate(45deg)
角度为正时,顺时针,负时,为逆时针
默认旋转的中心是元素的中心点
1. 4 2D转换中心点transform-origin
语法
transform-origin:x y;
重点
参数x与y用空格隔开
x y默认转换的中心点是元素的中心点(50% 50%)
还可以给x y设置像素 或者 方位名词(top bottom left right center)
1. 5 2D转换之缩放scale
语法
transform:scale(x,y);
重点
其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍,相当于没有放大
transform:scale(2,2):宽和高都放大了两倍
transform:scale(2):只写一个参数,第二个参数和第一个参数一样,相当于scale(2,2)
transform:scale(0.5,0.5):缩小
scale缩放最大的优势,可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
1. 6 2D转换综合写法
注意:
同时使用多个转换,其格式为:transform:translate(),rotate(),scale()...等
顺序会影响转换的效果(先旋转会改变坐标轴方向)
当我们有位移和其他属性的时候,将位移放在最前
1. 7 2D转换总结
转换transform简单理解就是变形有2D和3D之分
2D移动translate(x, y),优势是不影响其他盒子,参数用%,是相对于自身宽度和高度来计算的
可以分开写比如translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素,度数的单位是deg
2D缩放scale(x,y)里面参数是数字,不跟单位,可以是小数,优势是不影响其他盒子
设置转换中心点transform-origin:x y;参数可以是百分比、像素或者是方位名词
当我们进行综合写法,同时有位移和其他属性的时候,要将位移放到最前
2、动画
2. 1动画的基本使用
先定义动画
再使用(调用)动画
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列
0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间,或用关键词“from”和“to”,等同于0%和100%
元素使用动画
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
2. 2动画常用属性
![](https://i-blog.csdnimg.cn/blog_migrate/4620f3af976f14b1f89c8a3e48eb53d1.png)
2. 3动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
animation:myfirst 5s linear 2s infinite alternate;
简写属性里不包含animation-play-state
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来,而不是跳回来:animation-direction:alternate
盒子动画结束后,停在结束位置:animation-fill-mode:dorwards
2. 4速度曲线细节
animation-timing-function:规定动画的速度曲线,默认是“ease”
值 | 描述 |
linear | 匀速 |
ease | 默认,低速开始,然后加快,在结束前变慢 |
ease-in | 以低速开始 |
ease-out | 以低速结束 |
ease-in-out | 以低速开始和结束 |
steps() | 制定了时间函数中的间隔数量(步长) |
3、3D转换
3. 1三维坐标系
x轴:水平向右
y轴:水平向下
z轴:垂直屏幕
3. 2 3D移动translate3d
transform:translateX(100px):仅仅是在x轴上移动
transform:translateY(100px):仅仅是在y轴上移动
transform:translateZ(100px):仅仅是在z轴上移动(单位一般用px)
transform:translate3d(x,y,z)
3. 3 透视perspective
想要网页产生3D效果需要透视
透视又称为视距
单位是像素
透视写在被观察元素的父盒子上
d:就是视距
z:就是z轴,物体距离屏幕的距离,z轴越大(正值)看到的物体就越大
3. 4 translateZ
translateZ(100px):仅仅是在Z轴上移动,有了透视,就能看到translateZ的变化
3. 5 3D旋转之rotate3d
transform:rotateX(45deg):沿着x轴正方向旋转45度
transform:rotateY(45deg):沿着y轴正方向旋转45度
transform:rotateZ(45deg):沿着z轴正方向旋转45度
transform:rotate3d(x,y,a,45deg):沿着自定义轴旋转45度(了解即可)
左手准则:
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
3. 6 3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3d立体空间,默认
transform-style:preserve-3d;子元素开启立体空间
代码写给父级,但是影响的是子盒子
4、浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加
4. 1 私有前缀
-moz-:代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safari、chrome私有属性
-o-:代表Opera私有属性
4. 2 提倡写法
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;