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的]  纯字幕：查看  复制代码

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的]  纯字幕：查看  复制代码

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的]  纯字幕：查看  复制代码

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的]  纯字幕：查看  复制代码

人物走路动画

-------------------- CSS3浏览器兼容前缀--------------------
　　-ms-兼容IE浏览器
　　-moz-兼容firefox
　　-o- opera
　　-webkit-铬和safari

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

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 }