CSS3学习手记

--------------------CSS3新增选择器--------------------

#E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

#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 可用的表单控件

#E:disabled 失效的表单控件

#E:checked 选中的checkbox

#E:not(s) 不包含某元素

#E:target 对应锚点的样式

#E > F E元素下面第一层子集

#E ~ F E元素后面的兄弟元素

#E + F 紧挨着的兄弟元素

＃属性选择器：

　　1，E [data-attr]含有data-attr属性的元素

　　2，E [data-attr ='ok']含有data-attr属性的元素且它的值为“ok”

　　3，E [data-attr ^ ='ok']含有data-attr属性的元素且它的值的开头含有“ok”

　　4，E [data-attr $ ='ok']含有data-attr属性的元素且它的值的结尾含有“ok”

　　5，E [data-attr * ='ok']含有data-attr属性的元素且它的值中含有“ok”

-------------------- CSS3圆角，阴影，rgba --------------------

＃CSS3圆角：

　　1，设置某个角的圆角，比如设置左上角的圆角：border-top-left-radius：30px 60px; 　　2，同时分别设置四个角：border-radius：30px 60px 120px 150px; 　　3，设置四个圆角相同：border-radius：50％; ＃CSS3阴影：

box-shadow：h-shadow v-shadow blur spread inset;分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影 #rgba（新的颜色值表示法）：

1，盒子透明度表示法：opacity：0.1; filter：alpha（opacity = 10）（兼容IE）;

2，rgba（0,0,0,0.1）前三个数值表示颜色，第四个数值表示颜色的透明度 代码示例： [AppleScript的]  纯字幕：查看  复制代码 ?

1	CSS 3 圆角、阴影、rgba练习

-------------------- CSS3 transition动画--------------------

＃transition-property设置过渡的属性，比如：宽高背景颜色

＃过渡持续时间设置过渡的时间，比如：1秒500毫秒

＃过渡定时功能设置过渡的运动方式

1，线性：匀速

2，易于：开始和结束时慢速

3，易于在：开始时慢速

4，易于出：结束时慢速

5，易于进出：开始和结束时慢速

6，立方贝塞尔（N，N，N，N）：

比如：立方-bezier（0.845，-0.375，0.215，1.335）

曲线设置网站：https：//matthewlein.com/ceaser/＃transition-delay

设置动画的延迟

#transition：属性duration定时 - 函数延迟同时设置四个属性 代码示例：

[AppleScript的]  纯字幕：查看  复制代码 ?

1	CSS 3 对应transition动画练习

-------------------- CSS3 transform变换--------------------

#translate（x，y）设置盒子位移

#scale（x，y）设置盒子缩放

#rotate（deg）设置盒子旋转

#skew（x-angle，y-angle）设置盒子斜切

#perspective设置透视距离

＃transform-style flat | 保存-3D设置盒子是否按3d空间显示

＃translateX，translateY，translateZ设置三维移动

＃rotateX，rotateY，rotateZ设置三维旋转

＃scaleX，scaleY，scaleZ设置三维缩放

# transform -origin设置变形的中心点

＃backface-visibility设置盒子背面是否可见 代码示例： [AppleScript的]  纯字幕：查看  复制代码 ?

1	CSS 3 transform练习 实现翻面效果

-------------------- CSS3 animation动画--------------------

＃@ keyframes定义关键帧动画

＃animation-name动画名称

＃animation-duration动画时间

＃animation-timing-function动画曲线

1，linear匀速

2，缓和开始和结束慢速

3，ease-in开始是慢速

4，ease-out结束时慢速

5，ease-in-out开始和结束时慢速

6，steps动画步数

＃animation-delay动画延迟

＃animation-iteration-count动画播放次数n | infinite

＃animation-direction

1，normal默认动画结束不返回

2 ，Alternate动画结束后返回

＃animation-play-state动画状态

1，暂停停止

2，running运动

＃animation-fill-mode动画前后的状态

1，none不改变默认行为

2，forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）

3，backwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）

4，向前和向后填充模式都被应用

#animation：名称持续时间计时函数延迟迭代计数方向;同时设置多个属性 代码示例：

[AppleScript的]  纯字幕：查看  复制代码 ?

1

人物走路动画

-------------------- CSS3浏览器兼容前缀--------------------

　　-ms-兼容IE浏览器

　　-moz-兼容firefox

　　-o- opera

　　-webkit-铬和safari

[AppleScript的]  纯字幕：查看  复制代码 ?

1 2 3 4 5 6 7 8

1 1 div 2 2 { 3 3 transform : rotate ( 30 deg ) ; 4 4 - ms - transform : rotate ( 30 deg ) ;        / * IE 9 * / 5 5 - webkit - transform : rotate ( 30 deg ) ;    / * Safari and Chrome * / 6 6 - o - transform : rotate ( 30 deg ) ;        / * Opera * / 7 7 - moz - transform : rotate ( 30 deg ) ;        / * Firefox * / 8 8 }