HTML5和CSS3动画效果知识点总结

1.响应式布局；
响应式布局有两种方法：1. 流式布局：百分比布局（宽，高，定位置） 所谓百分比，尺寸的百分比：基于父级的百分比。
流式布局需要在head里面写上这句话：<meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
使用流式布局是需要注意几点：margin，padding 设置这两个数值时， 需要根据屏幕宽度变化而改变数值（并不是高度）即：margin数值/屏幕宽度（父级宽度）= 百分比，left,top,right,bottom 需要根据各自的方向而计算百分比。 top/父级的高度 = 百分比 left/父级的宽度 = 百分比
2. 媒体查询： @media only screen and (max-width: 00px) and (min-width: 00px){ ... }
外部引用样式时的媒体查询添加方法是：<link rel=stylesheet href=c.css media=screen and (max-width: 00px) and (min-width: 00px)>
这个，适用于，整个页面变化较大的情况
3. H5的新标签 语义标签：<article>定义文章 ，<aside>定义文章侧边栏，<figure>定义一组媒体对象及文字 / <figcaption> 标题，<nav>导航条，<header>头部，<section>分区，<footer>尾部。表单input的新属性值：
<form action=>
<!-- 邮件 -->
email: <input type=email name=em>
<!-- 网址，一定要加协议 -->
url: <input type=url name=url>
<!-- 数字，还有e 自然常数e（约为2.71828 -->
<!-- required 必须填写的项目 -->
number: <input type=number name=number required>
<!-- 范围 range 默认范围大小是0-100之间变换 -->
range: <input type=range name=rg min=0 max=5>
</form>
视频标签：<video src=></video>,(格式：H.264 MP4/autoplay 自动播放/controls 是否允许控制/preload 提前加载，如果遇到autoplay就忽略该属性/loop 自动循环播放) 音频标签：<audio src=></audio>, iframe框架: <iframe src= frameborder= style=></iframe>,标注，标记<mark>，画布<canvas>
4.css3选择器，兄弟选择器：“+” 同级兄弟选择器 + 相邻元素，而且必须要在下面 / “~” 兄弟选择器，下面所有的标签 都能选中。
子选择器：“>” 只选择子辈，不去选再下一辈 /  ~ 平级。
子元素选择器：nth-child(n) ，nth-last-child(n)，first-child，last-child（括号中，可以填表达式，数字，n / n是从0开始取）
first-of-type , last-of-type , nth-of-type , nth-last-of-type
5. 动画效果：transform2d / transform3d 以及 transition
transtion: 过渡属性，让一个元素从一个效果过度到一个效果。
延迟 几秒出现效果： -webkit-transition-delay: 0s;
过度某个元素的某个属性 property： -webkit-transition-property:  ;
定义过渡效果花费的时间： -webkit-transition-duration: 0s;
规定过渡效果的时间曲线： -webkit-transition-timing-function:  ease; 也可以使用贝塞尔曲线
/ ease 慢 快 慢;  ease-in 先慢后快;  ease-out 先快再慢； linear 匀速 /
transform2d：
1. 父级里设置 -webkit-transition: all 1s;
2. 在父级里 设置/* 原点，基准点  */
/* 数值，left center right bottom top */
/* 可以影响 倾斜 旋转 缩放 */
-webkit-transform-origin: right top;
2D 转换方法：
3./* transform 运动，做何种运动，需要后面规定 */
/*-webkit-transform: translate(50px, 50px);
/*-webkit-transform: translateX(300px);
/*-webkit-transform: translateY(300px);
/* scale(x,y) 缩放 */
/*-webkit-transform: scale(2, 2);
/* scaleX 沿着X轴变换比例 */
-webkit-transform: scaleX(3);
/* scaleY 沿着Y轴变换比例 */
-webkit-transform: scaleY(3);
/* rotate 旋转 也可以单独设置 X Y轴*/
/*-webkit-transform: rotate(180deg);
* skew 倾斜(x, y) 也可以单独设置 X Y轴*/
/*-webkit-transform: skew(30deg, 30deg);
transform3d：
/* 透视点 */
/* 设置一个位置观察运动 */
/* 放在父级 最好放在body里 */
perspective: 1000px;
/* 开启3D模式 给父级加开启 */
-webkit-transform-style: preserve-3d;
/* 透视原点 */
-webkit-perspective-origin: center center;
/* 背面是否可见 */
-webkit-backface-visibility: visible;
3D 转换方法：
translate3d(x,y,z) 定义 3D 转化。
/* 沿Z轴平移 */
/*-webkit-transform: translateZ(999px);
rotate3d(x,y,z,angle) 定义 3D 旋转。
/* 沿Z轴旋转 */
-webkit-transform: rotateZ(360deg);
/* 两个运动共同执行，中间用空格隔开 */
/* 运动是有先后顺序的 */
scale3d(x,y,z) 定义 3D 缩放转换。
/* scaleZ 沿着Z轴变换比例 */
-webkit-transform: scaleZ(3);
径向渐变：/* css3 中的渐变就是生成了一张图片 */
/*  可以在颜色前面 设置 数值 百分比 英文 */
background-image: -webkit-radial-gradient(50% 50%, yellow, red, green, blue);
线性渐变：/* linear-gradient 线性渐变 颜色前面可以加位置 top left right bottom */
background-image: -webkit-linear-gradient(top, red 10%, yellow 50%, green 90%);
1234/5678
border-radius: 10px 20px 30px 70px / 20px 20px 30px 40px;
<style>
body{
perspective: 1000px;


-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* 动画声明和定义 */
/* move 动画的名称 */
/* from 0% to 100% */
@-webkit-keyframes move {
from {
-webkit-transform: translateX(0px);
}


50%{
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
}


to {
-webkit-transform: translateX(200px);
-ms-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}


div{
/* animation 动画*/
/* animn */
-webkit-animation-name: "move";

/* andur 设置动画的运动时间 */
-webkit-animation-duration: 1s;


/* 设置动画的运动次数 */
/* aici */
/* infinite 无线次数 */
-webkit-animation-iteration-count: 2;


/* 运动效果 */
/* anit */
/* linear匀速 */
/* ease liner*/
-webkit-animation-timing-function: liner;


/* 运动方向和轨迹 */
/* andi */
/* normal 正常方向*/
/* alternate 往返运动 当设置往返运动时 返回时的运动占用运动次数 */
/* reverse 相反方向 */
-webkit-animation-direction: normal；


/* 动画运动状态 */
/* running 运动 */
/* paused 暂停 */
-webkit-animation-play-state: running;


/* 运动停留状态 */
/* both */
/* forwards 动画最后停留在结束的位置 */
/* backwards 返回到初始位置 */
-webkit-animation-fill-mode: forwards;


/* 延迟 */
/* delay */
/* and */
/*-webkit-animation-delay: 1s;


/* 复合写法 */
/* 名称 运动时间 运动方式 运动次数 延迟 */
/* -webkit-animation: name duration timing-function delay iteration-count direction fill-mode; */
/*-webkit-animation: move 1s ease 1s;
-o-animation: move 1s ease 1s;
animation: move 1s ease 1s;*/


}
css倒影：
/* 上 above */
/* 下 below */
/* 左 右 left right*/
/* 第一个值 倒影的方向 第二个值 倒影与内容的距离 第三个值 渐变 */
-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 233, 123, 0) 10%, rgba(0, 0, 0, 0.6));
/* box-shadow: x y size blur inset; */
/* 可以设置多个值用逗号间隔 */
CSS3 文本阴影
text-shadow: 0px 0px 5px pink, 0px 0px 10px pink, 0px 0px 15px purple, 0px 0px 20px pink, 0px 0px 25px pink,2px 2px 30px purple;