Css3和H5
css3 基础
1.圆角 border-radius
- 值 百分比 50% 100%
- 值 像素值 根据圆的直径算角的弧度
- 如果是合并角 先写上下 再写左右
border-bottom-left-radius:50px;对
border-left-bottom-radius:50px;错
2.背景渐变
- 线性渐变 background:linear-gradient(red,green);
颜色占比 background:linear-gradient(red 40%,green 30%);
方向改变，默认从上往下 ，从左往右 to right
background:linear-gradient(to right,red 40%,green 30%);
- 径向渐变
background:radial-gradient(red,green);
颜色占比 background:radial-gradient(red 40%,green 30%);
border-image 边框图片
补充内容：
盒子阴影box-shadow
apx bpx cpx dpx e;
a阴影水平的位置，当a的为0 阴影就是水平左右平均
b阴影垂直的位置，当b的为0，阴影就垂直上下都平均
c阴影模糊程度，c值越大模糊程度越大
d阴影的范围，d值越大阴影范围越大
e阴影的颜色 直接写色值或者16进制
文字阴影text-shadow 只有4个值
text-shadow: 0px 1px 7px #293D6B;
第一个值 阴影水平位置 0 就是左右均等，正数往右，负数往左
第二个值 阴影垂直位置 0 上下均等，正数往下，负数往上
第三个值 模糊程度 0 是完全不模糊，值越大模糊程度越大
第四个值 阴影的色值
3.过渡 transition
transition:3s;
transition:all 3s;所有属性都过渡3秒
2d转换只有两个轴X轴和Y轴，3d转换右3个轴 X，Y，Z
4.2d转换 transform
- 位移 translate
transform:translate(100px,200px)第一个值是X轴的坐标，第二个值是Y轴坐标
transform:translateX(100px) 水平位移向右100px，正值往右，负值往左
transform:translateY(100px) 垂直位移向下100px，正值往下，负值往上
- 旋转 rotate 单位是度数 deg
transform:rotate(200deg);正数顺时针，负数逆时针
transform:rotateX(200deg); x轴顺时针旋转200度
transform:rotateY(-200deg);Y轴逆时针旋转200度
- 缩放 scale
0.1-0.9是缩小的倍数，1-无穷大正整数放大的倍数
transform: scale(2,3);X放大两倍，Y轴放大3倍
transform: scaleX(0.5);X缩小0.5倍
transform: scaleY(0.1);Y轴缩小的0.1倍
- 倾斜 skew 单位度数deg
transform:skew(60deg,60deg);X Y轴同时倾斜60deg
transform:skewX(60deg);X轴倾斜60deg
transform:skewY(60deg);Y轴倾斜60deg
- 矩阵 matrix(n,n,n,n,n,n) 定义2d转换用6个值
矩阵是通过算法将上面4个 位移，旋转，缩放，倾斜效果同时写出来
要实现位移，旋转，缩放，倾斜同时的效果写法： transform: translate(600px,100px) rotate(-360deg) scale(2,0.5) skew(60deg,60deg);
3d空间显示的2个必要条件
1.透视 perspective （近大远小，数值大距离远就小，数值小距离近就大）
-透视基点 perspective-origin:left/right/center/top/bottom;
2.transform-style: preserve-3d;让子元素在3d空间显示
3d转换是3个轴 X Y Z 都互相垂直
2d和3d属性相同
5.3d转换 transform
3d转换 transform
- 位移 translate
transform:translate3d(100px,200px,100px)第一个值是X轴的坐标，第二个值是Y轴坐标，第三个值z轴坐标
transform:translateX(100px) 水平位移向右100px，正值往右，负值往左
transform:translateY(100px) 垂直位移向下100px，正值往下，负值往上
transform:translateZ(100px) 前后位移向下100px，正值往前，负值往后
- 旋转 rotate 单位是度数 deg
transform:rotate3d(1,1,1,280deg);正数顺时针，负数逆时针
transform:rotateX(200deg); x轴顺时针旋转200度
transform:rotateY(-200deg);Y轴逆时针旋转200度
transform:rotateZ(-200deg);Z轴逆时针旋转200度
transform:rotate3d(1,1,1,280deg);正数顺时针，负数逆时针
前面三个数分别是X，Y，Z旋转的矢量值，范围0-1
- 缩放 scale
0.1-0.9是缩小的倍数，1-无穷大正整数放大的倍数
transform: scale3d(2,3,0.5);X放大两倍，Y轴放大3倍,z缩小一半
transform: scaleX(0.5);X缩小0.5倍
transform: scaleY(0.1);Y轴缩小的0.1倍
transform: scaleZ(0.5);Z缩小0.5倍
- 倾斜 skew 单位度数deg 3d中的倾斜没有z轴，与2d一样
transform:skew(60deg,60deg);X Y轴同时倾斜60deg
transform:skewX(60deg);X轴倾斜60deg
transform:skewY(60deg);Y轴倾斜60deg
动画
1.关键帧 @keyframes
2个状态
@keyframes name{
from{}
to{}
}
谷歌兼容 谷歌兼容前缀-webkit-
@-webkit-keyframes name{
from{}
to{}
}
@keyframes name{
0%{}
100%{}
}
3个或多个状态
@keyframes name{
0%{}
50%{}
100%{}
}
2.动画属性
- 动画调用
animation动画
infinite 循环播放，放到秒数后
默认linear播放一次
- 动画方向animation-direction
正序 animation-direction: normal;
倒序 animation-direction: reverse;
交替 animation-direction: alternate;
反向交替animation-direction:alternate-reverse;
- 动画延迟animation-delay
animation-delay:秒数;
- 动画填充模式animation-fill-mode
保持最后一帧 animation-fill-mode: forwards;
返回第一帧 animation-fill-mode: backwards;
- 动画播放状态 animation-play-state
播放 animation-play-state: running;
暂停 animation-play-state: paused;
- 动画时间函数animation-timing-function
animation-timing-function: ease;默认
开始慢速，中间匀速，后面快速
animation-timing-function: ease-in;
进入时慢速
animation-timing-function: ease-out;
出去时慢速
animation-timing-function: ease-in-out;
进入和出去时慢速
animation-timing-function: linear;
匀速
H5新增
移动端适配
<meta name="viewport" content="width=device-width,initial-scale=1.0" />等比适配
750px
<meta name="viewport" content="width=750px,initial-scale=0.5" />
rem根据 html根目录设置，整个页面随屏幕变化而变化
H5新增标签
<header></header> 头部信息
<footer></footer> 底部
<nav></nav> 导航
<Section></Section> 区域
<canvas></canvas>画布
canvas是画布，没有绘画能力，仅仅是个绘画容器，使用时需结合js脚本使用。
<progress></progress>进度条
<aside></aside>侧边栏
<figure></figure> 图表
<figure>
<figcaption>2020年GDP总值</figcaption>
<img src="img/timg.jpeg" />
</figure>
figcaption图表标题
<dialog></dialog> 对话框
默认带display：none隐藏属性，如果想显示可以结合js改变display属性display：block；就显示了
<details></details>详细信息列表
<article></article>文章
<video></video>视频
video必须属性src=“视频路径”，
contorls 不写视频不显示播放按钮
autoplay自动播放 当设置完muted就可以自动静音播放
loop循环播放
muted 静音播放
preload=“auto”刷新网页加载视频可加载也可以不加载
preload=“metadata”刷新网页加载视频
preload=“none”刷新网页不加载视频
与audio不同的属性
poster=“图片路径”图片路径不会自动提示，视频封面
<audio></audio>音频
audio必须属性src=“音频路径”。只有写controls属性播放插件才显示。
循环播放loop=“loop”
自动播放autoplay=“autoplay”自动播放现在被限制，可以通过js控制使用
静音播放muted=“muted” 无声音播放
页面刷新是否加载音频
preload="auto" 网速好就先加载，不好就先不加载
preload="metadata" 不管网速好坏都先加载音频
preload="none"不管网速好坏都先不加载音频
px，rem区别
都是单位，px是固定值，rem是相对值。
rem是根据html根目录字体font-size大小倍数
px是相对于屏幕分辨率
