A.css3的动画属性
1、animation-name属性
animation-name属性:定义动画名称,用于指定由规则定义的动画的一个或多个名称。
animation-name属性必须与规则@keyframes(关键帧)配合使用,因为动画名称是由@keyframes(关键帧)定义声明的,如果提供多个属性值用逗号隔开。
2、animation-duration属性
animation-duration属性用于指定执行一个周期动画应该花多长时间。
3、animation-timing-function属性
animation-timing-function属性是用来设置播放方式的(匀速、加速度、减速度、贝塞尔曲线)。
4、animation-delay属性是用做于动画的延迟效果。
5、animation-iteration-count
表示动画运动的次数(默认情况下运动一次) infinite(无限循环)。
6、animation-direction属性表示运动的方向
属性值:
reverse:反方向运行(让关键帧从后往前执行)
alternate:动画效果先正常运行再反方向运行,并且交替运行。
alternate-recerse:动画效果先反方向运行再正常运行,并且交替运行。
7、animation-play-state属性:
属性值:paused:暂停;
running:运动。
B.css3 3d旋转图片立方体特效代码
1、css3旋转:transform:rotate(deg) (deg表示旋转角度);
rotate(deg):效果表示整体向一个方向旋转,若deg为正值,则顺时针旋转,若为负值则按逆时针旋转。
rotateX(deg):效果表示按横向的X轴旋转。
rotateY(deg):效果表示按纵向的Y轴旋转。
rotateZ(deg):效果与rotate(deg)相同,rotateZ(deg)为旋转默认值。
2、css3位移: transform:translate(px); 位移值用px 百分比都可以;
translate(px):默认值,跟随X轴位移。
translateX(px):跟随X轴位移;
translateY(px):跟随Y轴位移;
translateZ(px):跟随Z轴位移;
C.H5新特性之语义化标签:
section:类似于div,section更偏向于划分区域,代表某一个区域,分区,页面或者文档的一部分区域。
article:更偏向于内容的展示,可以是文章、blog、帖子、短文或者回复、评论;
aside:在一边、一旁的,侧边;
header:表示内容的头部,网页的头部,头部区域;
footer:表示内容的底部,网页的底部,底部区域;
nav:导航区域;
figure:图像区域:可以包含多个图片或者一个figcaption,figcation用来表示图片标题;
figcaption:figure的标题(一般放在figure的第一位或者最后一位);
main:主体内容(IE不兼容);
hgroup:专门用来包含标题h标签的分组;
mark:高亮显示,背景默认黄色(可以更改背景,内联元素);
time:顾名思义,用来放时间的;
dialog:类似微信对话框(默认display:none 默认定位、边框);
D.css3选择器:
1、动态伪类:
E :link 链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过,常用于链接锚点上。
E:visited 链接伪类选择器
选择匹配的E元素,而且元素被定义了超链接并已被访问过,常用于链接锚点上。
E:active 用户行为选择器
选择匹配的E元素,且匹配元素被激活,常用于链接锚点和按钮上。
E:hover 用户行为选择器
选择匹配的E元素,且用户鼠标停留在E元素上,IE6及以下浏览器仅支持a:hover。
E:focus 用户行为选择器
选择匹配的E元素,而且匹配元素获取焦点。
2、状态伪类:
E:enabled:
匹配所有用户界面(form表单)中处于可用状态的E元素。
E:disabled:
匹配所有用户面(form表单)中处于不可用状态的E元素。
E:checked:
匹配所有用户界面(form表单)中处于选中(单选、多选)状态下的元素E。
E::selection:
匹配E元素中被用户选中或处于高亮状态的部分。
3、结构性伪类:
如果子集标签类型一致(类名)的情况下,采用 child
1:选择符:first-child{ }。
2:选择符:last-child{ }。
3:选择符:nth-child(val){ }
val:可以是某个数值,表示第几个
2n或者even表示偶数
2n+1或者odd表示奇数。
4:选择符:nth-last-child( ) { }表示倒数第几个。
5:选择符:only-child{ }但前子集只有一个元素的时候才会被选择。
如果子集标签类型不一致(类名)的情况下,采用 of-type of-type先确定类型,把不同类型的先剔除,剩下同类进行选择。
1:选择符:first-of-type{ }。
2:选择符:last-of-type{ }。
3:选择符:nth-of-type(val){ }
val:可以是某个数值,表示第几个
2n或者even表示偶数
2n+1或者odd表示奇数。
4:选择符:nth-last-of-type( ) { }表示倒数第几个。
5:选择符:only-of-type{ }但前子集只有一个元素的时候才会被选择。