CSS3、html5(前端一)

Day11

1.H5新增多媒体标签

音频标签

属性： autoplay=“autoplay” 音频自动在打开网页后播放

controls=“controls”向用户显示控件（如播放按钮）

loop=“loop” 当音频结束后继续重新播放

视频标签 特性同上音频标签（可用height\weight设置大小）

2.H5新增表单标签

type=“email/data/url/time/month/week/number/tel/search/color”

require="required"表单属性不能为空

autofocus="autofocus"页面加载完之后自动聚焦到指定表单

autocomplete=“off/on” 搜索框是否加载提交过的痕迹

mutiple=“multiple” 多选文件提交

placeholder=""表单提示信息

3.类，属性、伪类选择器

①属性选择器

E[attr]{} 选择具有att属性的E元素

E[att=“val”]{} …att属性值等于val的E元素

E[att^=“val”]{} …从val开头…

E[att$=“val”]{} …以val结尾…

E[att*=“val”]{} …含有val的E元素…

②结构伪类选择器

E:nth-child(n) 匹配父类中的第n个子元素E

E:nth-of-type(n)指定类型e的第N个

③伪元素选择器

::before/after 在元素前边/后边插入内容

附练习代码：

Day12

1.2D转换

①移动盒子位置

transform:translate(x,x);(要添加百分比则对应盒子宽高并非浏览器)

②旋转

transform:rotate(xxdeg)//deg表示度数

③放大

transform:scale(1.1)//放大1.1倍

2.CSS动画

定义动画@keyframs 名字 {

from xx%{坐标} to 100%{坐标}

}

动画实现: animation-name:名字;

animation-duration: xxs;持续时间

…-iteration-count:infinite;无限循环次数 (默认为1次)

…-direction:alternate;动画反方向运动

…-file-mode:forwards;动画结束的地方不再返回到初始位置

…-file-play-state:pasued;动画停止

动画特性连写：

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

（不可省略） liner(匀速) 0s马上 默认1次 默认否

3.CSS动画补充

white-scope:nowrap;强制文字一行显示

animation-timing-function 规定动画频率(ease(默认)先快后慢liner匀速steps步数来定)附练习代码：

我是超人

我是超人

我是超人

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 我是张煜，我就是高富帅
  Day13 1.3D转换 z轴：往外是正，往里是副 transfrom:translated3d( xxpx, xxpx, xxpx)//注意不能省略，要省略写0 2.透视（写在被观察元素，父盒子上） 原理：近大远小 parspective:xxpx//xx越小物体越大，xx越大物体越小 3.旋转 transform:rotateX( xxpx )//x正值往后倒，y正值往右转，Z正值顺时针转 给父级parspective增强立体感 3D旋转：transform:rotate3d( x, y, z, deg)//deg表度数 4.3D呈现 transform-style:perserve-3d;子元素开启立体空间 写给父亲，在子元素启用 要移动的话必须先移动后旋转 5.！CSS3新增（总结点） ①新增选择器： 属性选择器，伪元素选择器，结构伪类选择器 ②转换transform 2D:translate( X , Y )------>移动 rotate(xxdeg)------>旋转度数 scale( )------缩放or扩大 3D:translated3d() rotateX/Y/Z() ③动画animation ④浏览器私有前缀 -webkit- ie firefox chorme safari ........