【郑州校区】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 color inset;分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

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

代码示例：

[AppleScript] 纯文本查看 复制代码

 CSS3圆角、阴影、rgba练习

--------------------CSS3 transition动画--------------------
#transition-property 设置过渡的属性，比如：width height background-color
#transition-duration 设置过渡的时间，比如：1s 500ms
#transition-timing-function 设置过渡的运动方式
1、linear：匀速
2、ease：开始和结束时慢速
3、ease-in：开始时慢速
4、ease-out：结束时慢速
5、ease-in-out：开始和结束时慢速
6、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 同时设置四个属性

代码示例：

[AppleScript] 纯文本查看 复制代码

CSS3对应transition动画练习

--------------------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 设置盒子背面是否可见

代码示例：

[AppleScript] 纯文本查看 复制代码

 CSS3transform练习 实现翻面效果

--------------------CSS3 animation动画--------------------
#@keyframes 定义关键帧动画
#animation-name 动画名称
#animation-duration 动画时间
#animation-timing-function 动画曲线
1、linear 匀速
2、ease 开始和结束慢速
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、paused 停止
2、running 运动
#animation-fill-mode 动画前后的状态
1、none 不改变默认行为
2、forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
3、backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
4、both 向前和向后填充模式都被应用
#animation:name duration timing-function delay iteration-count direction;同时设置多个属性

代码示例：

[AppleScript] 纯文本查看 复制代码

人物走路动画

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

[AppleScript] 纯文本查看 复制代码

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

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出

【郑州校区】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 color inset;分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

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

代码示例：

[AppleScript] 纯文本查看 复制代码

 CSS3圆角、阴影、rgba练习

--------------------CSS3 transition动画--------------------
#transition-property 设置过渡的属性，比如：width height background-color
#transition-duration 设置过渡的时间，比如：1s 500ms
#transition-timing-function 设置过渡的运动方式
1、linear：匀速
2、ease：开始和结束时慢速
3、ease-in：开始时慢速
4、ease-out：结束时慢速
5、ease-in-out：开始和结束时慢速
6、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 同时设置四个属性

代码示例：

[AppleScript] 纯文本查看 复制代码

CSS3对应transition动画练习

--------------------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 设置盒子背面是否可见

代码示例：

[AppleScript] 纯文本查看 复制代码

 CSS3transform练习 实现翻面效果

--------------------CSS3 animation动画--------------------
#@keyframes 定义关键帧动画
#animation-name 动画名称
#animation-duration 动画时间
#animation-timing-function 动画曲线
1、linear 匀速
2、ease 开始和结束慢速
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、paused 停止
2、running 运动
#animation-fill-mode 动画前后的状态
1、none 不改变默认行为
2、forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
3、backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
4、both 向前和向后填充模式都被应用
#animation:name duration timing-function delay iteration-count direction;同时设置多个属性

代码示例：

[AppleScript] 纯文本查看 复制代码

人物走路动画

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

[AppleScript] 纯文本查看 复制代码

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

传智播客·黑马程序员郑州校区地址

河南省郑州市 高新区长椿路11号大学科技园（西区）东门8号楼三层

联系电话 0371-56061160/61/62

来校路线  地铁一号线梧桐街站A口出