目录
01 过渡
02 rotate旋转
03 translate函数
04 真正的3D
05 动画
06 阴影
07 自定义字体库
08 自定义动画库
01 过渡
过渡属性的使用:
transition-property:要过渡的css属性名 多个属性用逗号隔开
过渡所有属性就写all
transition-duration: 过渡的持续时间 s秒 ms毫秒
transition-timing-function: 过滤动画的速率
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。
可能的值是 0 至 1 之间的数值。
transition-delay: s秒 ms毫秒 延迟多久开始过渡
属性连写:
transition:property duration timing-function delay;
02 rotate旋转
透视 perspective: 600px;
通过透视我们可以看到近大远小的效果 有空间感
透视的值越小效果越明显
透视的本质： 设置的是用户的眼睛(虚拟)和屏幕的距离 距离越小效果越明显
rotateX:
transform: rotateX(360deg); 根据X轴旋转360度
rotateY:
transform: rotateY(360deg); 根据Y轴旋转360度
transform-origin: 50px 0; 修改转换属性的圆心:
rotateZ:
transform: rotateZ(360deg); 根据Z轴旋转360度
03 translate函数
transform:translateX(px值) 定义 3D 转化，仅使用用于 X 轴的值
transform:translateY(px值) 定义 3D 转化，仅使用用于 Y 轴的值
transform: translateZ(px值); 定义 3D 转化，仅使用用于 Z 轴的值
04 真正的3D
让盒子保持真正的3D效果
transform-style: preserve-3d;
05 动画
调用：
animation: 动画名称 执行时间 延迟 执行次数 方向 运动方式 结束状态 ；
animation: move 2s 1s infinite alternate forwards;
steps(n) 让动画分n步完成 变成帧动画
动画的播放状态:
running: 运行
paused:暂停
animation-play-state: paused;
在css3中提供了监听动画和过渡结束的事件
animationend 该事件在 CSS 动画结束播放时触发
transitionend 该事件在 CSS 完成过渡后触发
06 阴影
盒子阴影:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow : 必需的。水平阴影的位置。允许负值
v-shadow : 必需的。垂直阴影的位置。允许负值
blur : 可选。模糊距离
spread : 可选。阴影的大小
color : 可选。阴影的颜色
inset : 可选。从外层的阴影（开始时）改变阴影内侧阴影
例: box-shadow: 10px 10px 10px #ccc inset;
文本阴影:
text-shadow: h-shadow v-shadow blur color;
h-shadow : 必需的。水平阴影的位置。允许负值
v-shadow : 必需的。垂直阴影的位置。允许负值
blur : 可选。模糊距离
color : 可选。阴影的颜色
例 : text-shadow: 10px 10px 10px red;
07 自定义字体库
使用@font-face属性引入
@font-face{
font-family:自定义字体名字;
src:url(.ttf字体库文件的路径)
}
08 自定义动画库
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
将动画库中药添加的动画名字 以类名的形式写在标签元素上面就可以使用这个动画了
