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步数来定)附练习代码: