前端之html5和css3

设置某一个角的圆角，好比设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;

rgba（新的颜色值表示法）

一、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
二、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

复制代码
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/ box-shadow:10px 10px 5px 2px pink inset; /
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->
复制代码

css3圆角示例

css3圆角示例
透明度rgba示例

透明度rgba示例

transition动画
CSS3 transition动画

一、transition-property 设置过渡的属性，好比：width height background-color
二、transition-duration 设置过渡的时间，好比：1s 500ms
三、transition-timing-function 设置过渡的运动方式

linear 匀速

ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)
好比：cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站：https://matthewlein.com/ceaser/
四、transition-delay 设置动画的延迟
五、transition: property duration timing-function delay 同时设置四个属性

通常用缓冲状态；

鼠标移动到图形上变化动画

鼠标移动到图形上变化动画
鼠标移动图片弹出说明动画

鼠标移动图片弹出说明动画

transform变换
CSS3 transform变换
一、translate(x,y) 设置盒子位移
二、scale(x,y) 设置盒子缩放
三、rotate(deg) 设置盒子旋转
四、skew(x-angle,y-angle) 设置盒子斜切
五、perspective 设置透视距离
六、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
七、translateX、translateY、translateZ 设置三维移动
八、rotateX、rotateY、rotateZ 设置三维旋转
九、scaleX、scaleY、scaleZ 设置三维缩放
十、tranform-origin 设置变形的中心点
十一、backface-visibility 设置盒子背面是否可见

transform是一个静态的效果，不是作动画的；但能够和动画进行配合使用；
其中，旋转用的比较多；

位移，缩放，旋转，斜切示例

位移，缩放，旋转，斜切示例
transform-origin变换中心示例

transform-origin变换中心示例
图片翻转示例

图片翻转示例
翻面动画示例

View Code

animation动画
CSS3 animation动画
一、@keyframes 定义关键帧动画
二、animation-name 动画名称
三、animation-duration 动画时间
四、animation-timing-function 动画曲线

linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
五、animation-delay 动画延迟
六、animation-iteration-count 动画播放次数 n|infinite
七、animation-direction

normal 默认动画结束不返回
alternate 动画结束后返回
八、animation-play-state 动画状态

paused 中止
running 运动
九、animation-fill-mode 动画先后的状态

none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
十、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

animation使用示例

animation使用示例
风车旋转示例

风车旋转示例
风车图片

loading动画的制做

css3新增选择器，不用写过多的class，直接用某某下的某某的第几个便可；

loading动画

loading动画
走路动画
animation步数的应用-走路动画

走路动画示例
走路图片

CSS权重
CSS权重指的是样式的优先级，有两条或多条样式做用于一个元素，权重高的那条样式对元素起做用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级
能够把样式的应用方式分为几个等级，按照等级来计算权重

一、!important，加在样式属性值后，权重值为 10000
二、内联样式，如：style=””，权重值为1000
三、ID选择器，如：#content，权重值为100
四、类，伪类和属性选择器，如： content、:hover 权重值为10
五、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
六、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0；

css权重计算示例

CSS3新增选择器
一、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

复制代码
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<!-- 第2个子元素div匹配 -->
复制代码
二、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
三、E:first-child：匹配元素类型为E且是父元素的第一个子元素
四、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
五、E:only-child：匹配元素类型为E且是父元素中惟一的子元素
六、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
七、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
八、E:first-of-type：匹配父元素的第一个类型为E的子元素
九、E:last-of-type：匹配父元素的最后一个类型为E的子元素
十、E:only-of-type：匹配父元素中惟一子元素是E的子元素
十一、E:empty 选择一个空的元素
十二、E:enabled 可用的表单控件
1三、E:disabled 失效的表单控件
1四、E:checked 选中的checkbox
1五、E:not(s) 不包含某元素

复制代码
<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<!-- 第 三、四、5 子元素div匹配 -->
复制代码
1六、E:target 对应锚点的样式

复制代码
<style type="text/css">
h2:target{
color:red;
}
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>

<!-- 点击连接，h2标题变红 -->
复制代码
1七、E > F E元素下面第一层子集
1八、E ~ F E元素后面的兄弟元素
1九、E + F 紧挨着的兄弟元素

属性选择器：
一、E[data-attr] 含有data-attr属性的元素

复制代码
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>

<!-- 点击连接，h2标题变红 -->
复制代码
二、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
三、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
四、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
五、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”

css新增选择器示例01

css新增选择器01
css新增选择器示例02

css新增选择器示例02
css新增选择器示例03

css新增选择器示例03

CSS3前缀和H5新增标签
CSS浏览器前缀

浏览器样式前缀
为了让CSS3样式兼容，须要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

好比：

复制代码
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
复制代码
自动添加浏览器前缀
目前的情况是，有些CSS3属性须要加前缀，有些不须要加，有些只须要加一部分，这些加前缀的工做能够交给插件来完成，好比安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 经过此工具能够按照最新的前缀使用状况给样式自动加前缀。
在写好的样式处按ctrl+alt+x便可自动添加前缀；

h5新增标签

HTML5新结构标签
h5新增的主要语义化标签以下：

一、header 页面头部、页眉
二、nav 页面导航
三、article 一篇文章
四、section 文章中的章节
五、aside 侧边栏
六、footer 页面底部、页脚

PC端兼容h5的新标签的方法，在页面中引入如下js文件:
<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

h5新增标签示例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="header"></div>

<header></header>

<div class="menu"></div>

<nav></nav>

<div class="footer"></div>

<footer></footer>

</body>
</html>
复制代码

HTML5 音频和视频

html5增长了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签
支持格式：ogg、wav、mp3

对应属性：
一、autoplay 自动播放
二、controls 显示播放器
三、loop 循环播放
四、preload 预加载
五、muted 静音

举例：

复制代码
<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用以下方式： -->

<audio autoplay controls loop preload>
<source src="source/audio.mp3" type="">
<source src="source/audio02.wav" type="">
</audio>
复制代码
source标签的做用是提供多个媒体文件地址，若是一个地址的文件不兼容，就使用下一个地址。

video标签
支持格式：ogg、mp四、webM

属性：
一、width
二、height
三、Poster

可选第三方播放器：
一、cyberplayer
二、tencentPlayer
三、youkuplayer

HTML5 新增表单控件

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

复制代码
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
复制代码

新增经常使用表单控件属性：
一、placeholder 设置文本框默认提示文字
二、autofocus 自动得到焦点
三、autocomplete 联想关键词

h5新增表单控件属性示例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="" placeholder="搜索">

<input type="text" name="" autofocus>

</body></html>