社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
HTML5的新特性主要针对以前的不足,增加了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本都是IE9以上版本才支持,如果不考虑兼容性问题,才可以使用这些新特性。
以前布局,基本都是用div来做。但是div对于搜索引擎来说,是没有语义的。
注意:
<audio> 元素常见属性:
src:媒体的来源
controls:增加控制工具栏
autoplay:自动播放,但是存在兼容性问题
muted:静音
loop:循环播放
<video>元素常见属性:
controls: controls 增加控制工具栏(加上controls属性,视频才会播放)
autoplay: autoplay 自动播放(谷歌浏览器禁用了自动播放功能,加了muted属性就可以自动播放了)
muted: muted 静音,增加后静音并且自动播放会生效
loop: loop 循环播放
preload: auto(预加载) none(不预加载) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
src: url() 视频url地址
poster: imgurl() 加载等待的画面图片
width: px 设置播放器宽度
height: px 设置播放器高度
<video src="movies.mp4"
controls
autoplay
muted
loop>
</video>
<source>元素:
如果存在兼容性问题,可以将多个视频格式的数据源放到source元素中
<video controls>
<source src="... .mp4">
<source src="... .avi">
<source src="... .webm"
</video>
HTML5 新增的表单属性
对于input的type值也有很多扩展
CSS3新增了选择器, 可以更加便捷,更加自由的选择目标元素
属性选择器可以根据元素特定的属性来选择元素。这样就不用借助于类或者id选择器。
input[value]
input[type=text]
E[att^="cal"]
匹配具有att属性且值以val开头的 E 元素
E[att$="val"]
匹配具有att属性且值以val结尾的 E 元素
E[att*="val"]
匹配具有att属性且值中含有val的 E 元素
注意:类选择器 属性选择器 伪类选择器 权重都为10
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择里面的子元素
E:first-child
匹配 父 元素中的第一个子元素 E
E:last-child
匹配 E 元素中的最后一个子元素
E:nth-child(n)
匹配 E 元素中的第n个子元素
ul li:first-child {...} /*选择ul里面的第一个li*/
ul li:last-child {...} /*选择ul里面的最后一个li*/
ul li:nth-child(n) {}/*选择ul里面的第n个li n可以是:
1. 数字 1,2,3...
2. 关键字(even偶数,odd奇数)
3. 公式:
n:选择所有
-n+5:选择前5个
*/
E:first-of-type
指定类型 E 第一个元素
E:last-of-type
指定类型 E 最后一个元素
E:nth-of-type(n)
指定类型 E 元素中的第n个
<style>
section div:nth-child(1) {...}/*谁都选不出 原因:nth-child会把所有的孩子都排列序号 本段代码执行的时候先找到第一个孩子p 但是p不是我们要找的div 所以选不出我们要找的元素*/
section div:nth-of-type(1){...}/*选出熊大 执行过程:先找到div然后选出第一个div*/
</style>
<body>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
::before
在元素内部的前面插入内容
::after
在元素内部的后面插入内容
注意:
div::before {
content:'你好';/*content必须要写*/
width:14px;
heith:20px;
}
伪元素使用场景:
.clearfix:after {
content:""; /* 伪元素必须写的属性 */
display: block; /* 插入的元素必须是块级 */
height:0; /* 不要看见这个元素 */
clear:both; /* 核心代码清除浮动 */
visibility:hidden; /* 不要看见这个元素 */
}
过渡(transition) 是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash动画或JavaScript的情况下,当元素从一种样式变化为另一种样式时为元素添加效果。
过渡动画:是从一个状态 渐渐的过渡到另外一个状态
可以让我们的页面更好看,更动感十足,虽然低版本浏览器不支持(ie9一下版本) 但是不会影响页面布局。
经常和 :hover 一起搭配使用。
transition:要过渡的属性 花费时间 运动曲线 何时开始
div {
width:200px;
height:100px;
background-color:pink;
/* transition:要过渡的属性 花费时间 运动曲线 何时开始*/
/*如果想写多个属性,利用逗号分割*/
/*如果想变化多个属性,可以使用 all*/
transtion:width 1s ease 1s,height .5s;
}
div:hover {
width:400px;
height:200px;
}
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
2D转换是改变标签在二维平面上的位置和形状的一种技术。
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
语法:
transform:translate(x,y);或者分开写:
transform:translateX(n);
transform:transateY(n);
div {
width:200px;
height:200px;
background-color:pink;
/* x就是x轴移动位置 y就是y轴移动位置 */
/* transform:translate(x,y) */
transform:translate(100px,100px);
/*1. 如果只移动x坐标*/
transform:translate(100px,0);/*y坐标不可省略*/
transform:translateX(100px);
/*2. 如果只移动y坐标*/
transform:translate(0,100px);/x坐标不可省略*/
transform:translateY(100px);
}
重点:
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转。
语法:
transform:rotate(度数)
重点
设置元素转换的中心点
语法
transform-origin: x y;
重点
transform-origin: left bottom;/*转换点为左下角*/
只要给元素添加上了这个属性就能控制它放大还是缩小
语法:
transform:scale(x,y);
注意:
注意:
动画(animation)是css3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常用来实现复杂动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果
制作动画分为两步
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
定义动画
动画序列:
例:
div {
width: 200px;
height:200px;
background-color: pink;
margin: 100px auto;
/* 调用动画 */
animation-name:动画名称;
/* 持续时间 */
animation-duration:持续时间;
}
@keyframes move {
0% {
transform:translate(0,0);
}
100% {
transform: translate(1000px,0);
}
}
div {
width:100px;
height:100px;
background-color:pink;
/* 动画名称(必写) */
animation-name:move;
/* 持续时间 (必写)*/
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function:ease;
/* 何时开始 */
animation-delay:1s;
/* 动画重复次数 默认为1 , infinite 无限循环 */
animation-iteration-count:infinite;
/* 是否反方向播放 默认normal alternate 反方向播放*/
animation-direction:alternate;
/* 动画结束后的状态 默认backwards 回到起始状态, 停在结束状态 forwards*/
animation-fill-mode:forwards;
}
div:hover {
/*鼠标经过div 动画停止 鼠标离开 继续动画*/
animation-play-state:paused
}
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
div {
width:0;
height:30px;
background-color:pink;
/*steps 就是分几步来完成动画 有了steps 就不要写ease了*/
animation: w 4s steps(5) forwards;
}
@keyframes w {
0% {
width:0;
}
100% {
width:200px;
}
}
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
transform:translateX(100px);仅在x轴上移动
transform:translateY(100px);仅在y轴上移动
transform:translateZ(100px);仅在z轴上移动(注意:一般用px作为单位)
transform:translate3d(x,y,z);其中x,y,z分别指在x,y,z轴上移动的距离,不可省略,如果没有就写0
注意:z轴上的效果需要借助接下来的透视才能看到
透视写在被观察元素的父盒子上面
body {
perspective: 500px;
}
div {
width:200px;
height:200px;
background-color:pink;
transform:translate3d(100px,100px,100px)
}
3D旋转可以让元素在三维平面内沿着x轴,y轴,z轴 或者自定义轴进行旋转。
对于元素旋转的方向,借助左手准则
左手准则:
CSS3中可以通过box-sizing 来指定盒子模型,有2个值:即可指定为content-box 、 border-box
计算盒子大小的方式
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter:函数(); 例如:filter:blur(5px)
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。
width:calc(100% - 80px);可以让子盒子的宽度永远比父盒子少80px
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!