HTML5和CSS3提高

视频播放

<!-- 自动播放，控件，静音，宽，高，循环播放，图片 -->
    <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

HTML5和CSS3提高