黑马跟学——C3动画效果笔记

C3 2D转换

transform 简单理解为变形

作用

可以实现元素的位移旋转缩放等效果

内容

translate 移动

改变元素在页面中的位置，类似定位

语法

transform: translate(x,y);

移动一个坐标

transform: translateX(100px);

transform: translateY(100px);

相关——移动盒子的位置方式

1.定位

2.盒子的外边距

3.2D translate

特点

1.不会影响其他元素的位置

2.对行内元素没有效果

3.可以用百分号

百分比是移动盒子自身宽度高度的百分之几

4.可以实现盒子的水平垂直居中

应用

实现盒子水平垂直居中

原： 现：

先利用子绝父相实现

用margin负值（设置盒子宽高的一半）——>用transform百分比的性质

rotate 旋转

语法

transform: rotate(45deg);

特点

1.里面跟度数，单位是deg

2.角度为正时，顺时针，负数，逆时针

3.默认旋转的中心是元素的中心点

应用

书写三角

伪元素生成的是行内元素，恰巧要用到定位，无需转化了

鼠标经过div里面的三角旋转

scale 缩放

语法

transform: scale(x,y);

特点

注意：里面写数字不跟单位 倍数的意思 1就是1倍

等比例缩放可以只写一个

小于1就是缩小（0.5 0.5）

优势：不会影响其他盒子，可以设置中心点

转换中心点

语法

transform-origin: left bottom;

特点

！！注意！！x y 中间用空格隔开

2.默认中心点是元素的中心点（50% 50%）

3.还可以给x y 设置 像素 或者 方位名词（top bottom left right center)

默认的是50% 50%=center center

连写

同时使用多个转换

格式

transform:translate()rotate()scale…

用空格隔开

先写位移

总结

translate(x,y)用%

rotate单位是deg

scale(x,y) 数字不跟单位

转换中心点参数可以百分比，像素，方位名词

综合写法位移写在最前面

3D转换

三维坐标系

3D位移

translateZ 后面的单位一般是px

2.translateZ(100px) 向外走100px

3.简写：transform: translate3d(x,y,z);

4.xyz不可以省略，如果没有就写0

3D旋转

rotateX

左手准则

大拇指指向X轴的正方向

四指弯曲方向就是沿X旋转方向

rotateY

同样左手准则

透视

也称视距——人的眼睛到屏幕的距离

单位是像素

作用

产生3D效果，在2D平面产生近大远小视觉立体

语法

写到被观察元素的父盒子上面

3D呈现

transform-style

transform-style: preserve-3d;

控制子元素是否开启三维立体环境

默认flat 不开启

代码写给父级，影响的是子盒子

动画

基本使用

1.定义动画

@keyframes 动画名称（ move） {

​ /* 开始状态 */

​ 0% {

​ transform: translateX(0px);

​ }

​ /* 结束状态 */

​ 100% {

​ transform: translateX(1000px);

​ }

​ }

2.调用动画

动画名称

animation-name: move;

持续时间

animation-duration: 3s;

动画序列

from to 等价于 0% 100%

0% 是动画的开始

100% 是动画的完成

可以做多个状态的变化

百分比要是整数

百分比就是总的时间的划分

动画常用属性

animation-name: move;

animation-duration: 3s;

运动曲线

animation-timing-function: ease;

何时开始

animation-delay: 1s;

重复次数

animation-iteration-count: infinite;

是否反方向播放 默认的是normal

animation-direction: alternate;

动画结束后的状态 回到起始状态 backwards 停留在结束状态 forwards */

animation-fill-mode: backwards;

简写属性

animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态

animation:myfirst 5s linear 2s infinite alternate;

animation: name duration timing-function delay iteration-count direction fill-mode;

animation: move 2s linear 0s 1 alternate forwards;

不包括animation-play-state: paused;

动画走回来而不是跳回来：

animation-direction: alternate;

盒子动画结束后停在结束位置：

animation-fill-mode: backwards;

#疑问？

为什么border-radius: 50%;才会圆形扩散，设置成具体的数字就是方形扩散

速度曲线细节

步长：steps

/* 让文字强制一行内显示 */

​ white-space: nowrap;