视频 播放
<!-- 自动播放，控件，静音，宽，高，循环播放，图片 -->
<video src="" autoplay="autoplay" controls="controls" muted ="muted"
width="" height="" loop="loop" poster="img/"></video>
<!-- 音频 -->
<audio src="" autoplay ="" controls="" loop ="" muted=""></audio>
html5新增input类型
新增表单属性
required required 表单不能为空
placeholder 提示文本 表单提示信息，可以修改字体颜色
autofocus autofocus 自动聚焦到指定表单
autocomplete off/on 现实之前提交成功过的值，必须有name值
multiple multiple 多选文件提交
css3新特性
E[att] 选择有att属性的
E[att = "val"] 选择att属性等于val的
E[att^ = "val"] 选择att属性的值开头是val的
E[att$ = "val"] 选择att属性的值结尾是val的
E[att* = "val"]选择att属性的值中有val 的
E：first-child 匹配父元素中第一个子元素
E：last-child
E：nth-child（n）匹配第n个子元素，n可以是公式
E：nth-child（even）匹配偶数子元素
E：nth-child（odd）匹配奇数子元素
E：first-of-type 指定类型E的第一个
E：last-of-type 指定类型E的最后一个
E：nth-of-type（n） 指定类型E的第n个
伪元素选择器
：：before在元素内部的前面插入内容
：：after在元素内部的后面插入内容
必须加content属性
css3盒子模型
- box-sizing：content-box盒子大小为width+padding+border
- box-sizing：border-box 盒子大小为width
不担心撑大盒子
图片模糊
filter：blur（5px）；
blur是一个函数，数值越大越模糊
calc
width：calc（100% - 30px）
过渡
transition：要过渡的属性 花费时间 运动曲线 何时开始
属性：css属性，宽度高度，内外边距，all
花费时间：秒，0.5s
运动曲线：默认ease
何时开始：单位是秒，默认0s
<style>
.box {
width: 300px;
height: 300px;
background-color: #0f0;
border: 2px solid red;
/* 改变一个属性 */
transition: width 1s ease 1s;
改变多个属性
transition: width 1s ease 1s,height 1s ease 1s;
改变所有属性
transition: all 1s ease 0.5s;
}
.box:hover {
/* 属性变化后的值 */
width: 400;
height: 400px;
background-color: black;
}
</style>
2D转换
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 不会影响其他元素位置
沿着xy轴移动
对行内标签无效
百分比单位针对自身宽高
*/
transform: translate(200px,100px);
transform: translateX(100px);
transform: translateY(100px);
旋转过渡
.xuanzhuan {
content: "";
width: 100px;
height: 100px;
background-color: #0f0;
margin: 100px auto;
transition: all 1s;
}
.xuanzhuan:hover {
transform: rotate(360deg);
}
缩放
div {
width: 200px;
height: 200px;
background-color: #0f0;
margin: 200px auto;
transition: all 1s;
}
div:hover {
/* transform: scale(150%, 30%); */
/* transform: scale(2, 0.5); */
transform: scale(0.5);
}
2D转换综合写法
/* 顺序会影响转换 位移放前面*/
transform: translate(200px, 0)rotate(90deg)scale(2);
动画
/* 定义动画 */
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 调用动画 */
animation-name: move;
animation-duration: 3s;
}
动画属性
div {
width: 100px;
height: 100px;
background-color: #0f0;
/* 动画名称 */
animation-name: move;
/* 动画时间 */
animation-duration: 3s;
/* 运动曲线 */
animation-timing-function: ease-in-out;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 */
/* animation-iteration-count: infinite; */
/*是否反方向播放 */
/* animation-direction: alternate; */
/* 是否回到起始位置 */
animation-fill-mode: forwards;
/* 简写 */
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: move 3s ease 1s infinite alternate;
}
div:hover {
/* 鼠标经过就停止动画 */
animation-play-state: paused;
}
屏幕截图 2021-09-12 125656.png
屏幕截图 2021-09-12 125721.png
屏幕截图 2021-09-17 120251.png
