3D

3D

关注
发信
关注(28)粉丝(399)

前端—初级阶段2(5-8)

内容介绍

一、CSS选择器

CSS选择器一共有五种:基本、层级、属性、伪类、伪元素 CSS选择器参考手册

1.基本选择器

  • 通配符/全局选择器 *
  • ID选择器 #Id
  • class选择器 .classname
  • 元素选择器 element
  • 群组选择器 element,element

2.层级选择器

  • 后代选择器 selecter selecter
  • 子元素选择器 selcter>selecter 所有子元素 测试
  • 相邻兄弟选择器 selecter+selecter 就下面的一个 测试
  • 通配兄弟选择器 selecter1~selecter2 selecter1之后出现的所有selecter2 测试

3.属性选择器

  • selecter[attr] 包含attr属性的元素 测试
  • selecter[attr=val] arrt属性值是val的元素 测试
  • seldcter[attr^=val] attr属性值是以val开头的元素 测试
  • selecter[attr$=val] attr属性值是以val结束的元素 测试
  • selecter[attr~=val] attr属性值val 或 包含val（两个值以空格隔开，其中一个是val) 测试
  • selecter[attr*=val] attr属性值中包含val的元素,只要有这个字母就可以 测试
  • selecter[attr|=val] attr属性值中带有以val开头的元素,val值必须是整个单词 测试

4.伪类选择器

1) 动态伪类选择器

  • :link 未访问的链接 测试
  • :visited 已访问的链接
  • :hover 鼠标移动到链接上
  • :active 选定的链接
  • :focus 焦点 测试

提示:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。

2) 目标伪类选择器

  • :target 选取当前活动的目标元素测试
    URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)

3) 语言伪类选择器

  • :lang 用于选取带有以指定值开头的 lang 属性的元素 测试

4) UI元素伪类选择器 （大多用在表单元素上）

  • :enabled 匹配已启用的元素测试
  • :diabled 匹配被禁用的元素
  • :checked 匹配已被选中的input元素（只用于单选按钮和复选框）测试

5) 结构伪类选择器

  • :first-child 父元素中第一个子元素 测试
  • :last-child 父元素中最后一个子元素 测试
  • :first-of-type　父元素中第一个类型(等于:nth-of-type(1)) 测试
  • :last-of-type　 父元素中最后一个类型(等于:nth-last-of-type(1) 测试
  • :only-child　父元素中有唯一子元素 测试
  • :only-of-type 父元素中有唯一子类型测试
  • :nth-child(n) 父元素中第n个子元素 测试
  • :nth-last-child(n) 父元素中第n个子元素(从最后一个子元素开始计数) 测试
  • :nth-of-type(n)　父元素中第n个子类型　测试　　　　　　　　
  • :nth-last-of-type(n) 父元素中第n个子类型(从最后一个子类型开始计数)测试　　　　　　　
  • :empty 匹配空的元素(父元素中没有有子元素和内容)测试
  • :root 匹配文档根元素(在HTML中根元素始终是html元素)测试

6) 否定伪类选择器

  • :not(selecter) 匹配非指定元素/选择器的每个元素测试

5.伪元素选择器

  • ::first-letter 选择首字母 测试
  • ::first-line 选择首行 测试
  • ::before 在元素之前添加内容，默认行内元素
  • ::after 在元素之后添加内容，默认行内元素
  • ::selection 匹配被用户选取的内容(应用CSS 属性：color,background,cursor,outline) 测试
  • ::-webkit-input-placeholder 改变表单的默认样式

伪类与伪元素的特性及其区别：

  1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
  2. 伪元素本质上是创建了一个有内容的虚拟容器；
  3. CSS3中伪类和伪元素的语法不同；
  4. 可以同时使用多个伪类，而只能同时使用一个伪元素，并且只能出现在最后；（a:first-child:hover ；p:hover::first-letter ）

6.优先级

  • 内联样式(1000)>id选择器(100)>类选择器，属性选择器，伪类选择器(10)>标签选择器、伪元素选择器(1)
  • 提高优先级的方法：使用!important关键字

二、CSS常用样式属性

css属性参考手册

1.box(盒子)

  • 宽度 width: 长度 | 百分比 | auto;
  • 高度 height: 长度 | 百分比 | auto;
  • 边界 margin: 上 右 下 左 ;
  • 填充 padding: 上 右 下 左 ;
  • 定位 position: absolute | relative | static;
  • 是否可见 visibility: inherit | visible | hidden;(会占据页面上的空间)
  • 类型 display: block| inline| inline-block|flex|none; flex图片
  • 溢出 overflow: visible | hidden | scroll auto;
  • 浮动 float: left | right | none;清除浮动
  • 阴影 box-shadow: h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) inset|outset;阴影测试

2.font（字体）

  • 颜色 color: 数值;
  • 大小 font-size: 数值;
  • 字体 font-family: 宋体,sans-serif;
  • 样式 font-style: italic;(斜体) normal;(正常)
  • 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
  • 变体 font-variant: small-caps;(小型大写字母) normal;(正常)
  • 行高 line-height :数值;
  • 字间距 letter-spacing : 数值;

3.text（文本）

  • 大小写 text-transform: capitalize(首字大写) | uppercase(英文大写) | lowercase(英文小写) | none;
  • 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线)
  • 排列 text-align: justify | left | right | center;
  • 缩进 text-indent: 数值 | inherit;
  • 阴影 text-shadow:数值;

4.background（背景）

  • 颜色 background-color: 数值;
  • 图片 background-image: url() | none;
  • 重复 background-repeat: no-repeat | repeat | repeat-x | repeat-y;
  • 滚动 background-attachment: fixed | scroll;
  • 尺寸 background-size:length|percentage|cover|contain;
  • 位置 background-position:数值 | top | bottom | left | right | center;
  • 简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
  • 多值 background:url(a.jpg') no-repeat fixed center , url('a.jpg') no-repeat fixed top;
    background-size:300px 300px,100px 100px;

5.border（边框）

  • 样式 border-style: solid;dotted;(点线) dashed;(虚线) double;(双线) ;
  • 宽度 border-width: 数值;
  • 颜色 border-color: top值 right值 bottom值 left值;
  • 简写 border: width style color;

6.list-style（列表样式）

  • 类型 list-style-type: disc(实心圆形) | circle(空心圆形) | square(实心方形) | decimal(数字) |none;
  • 位置 list-style-position: outside | inside;
  • 图像 list-style-image: URL;
  • 简写 list-style:样式类型 | 样式位置 | url;

三、CSS3 过渡、变换、动画

1.变换transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1) 移动translate:将元素从原来的位置移动到指定位置 测试

  • translate(x,y) 2D 转换。
  • translate3d(x,y,z) 3D 转换。
  • translateX(x) 用X轴的值转换。
  • translateY(y) 用Y轴的值转换。
  • translateZ(z) 3D转换只是用Z轴的值。

2) 缩放scale:将元素根据中心原点进行缩放，测试

  • scale(x,y) 2D缩放转换。
  • scale3d(x,y,z) 3D 缩放转换。
  • scaleX(x) 设置X轴的值来缩放转换。测试
  • scaleY(y) 设置Y轴的值来缩放转换。测试
  • scaleZ(z) 设置Z轴的值来3D缩放转换。

3) 旋转rotate：指定需要进行旋转的坐标轴, angle 表示旋转角度

  • rotate(angle) 2D 旋转 测试
  • rotate3d(x,y,z,angle) 3D 旋转。
  • rotateX(angle) 沿着X轴的 3D 旋转。测试
  • rotateY(angle) 沿着Y轴的 3D 旋转。测试
  • rotateZ(angle) 沿着Z轴的 3D 旋转。

4) 倾斜skew(x-angle,y-angle) 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。skew图片说明

  • skew(x-angle,y-angle) 沿着X和Y轴的2D倾斜转换。测试
  • skewX(angle) 沿着X轴的2D倾斜转换。 测试
  • skewY(angle) 沿着Y轴的2D倾斜转换。测试

2.过渡transition

  • 参与属性 transition-property ：none|all| property(多个属性名以逗号分隔)
  • 持续时间 transition-duration：time(秒或毫秒)，默认是0
  • 转速曲线 transition-timing-function 测试
    linear以相同速度开始至结束的过渡效果。
    ease 慢速开始，然后变快，然后慢速结束的过渡效果
    ease-in 以慢速开始的过渡效果
    ease-out 以慢速结束的过渡效果
    ease-in-out以慢速开始和结束的过渡效果
    cubic-bezier(n,n,n,n)定义自己的值。可能的值是 0 至 1 之间的数值。
  • 延迟时间 transition-delay：time(秒或毫秒)，默认是0

简写 transition: property duration timing-function delay;测试

3.动画animation

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.测试

1)必要元素

  • 通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
  • 通过百分比将动画序列分割成多个节点；
  • 在各节点中分别定义各属性
  • 通过animation将动画应用于相应元素；

2)animation样式属性

  • 动画名称 animation-name：move
  • 持续时长 animation-duration : 1s ;默认是 0。
  • 播放速度 animation-timing-function: linear;默认是 "ease" 测试
  • 延时时间 animation-delay: 1s; 默认是 0。注意：animation: move 3s linear 0 2 ;(不执行) =>animation: move 3s linear 0s 2 ;
  • 播放次数 animation-iteration-count: n|infinite; 默认是 1。
  • 播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;测试
  • 播放完的状态 animation-fill-mode: none | forwards(最后一个关键帧) | backwards(第一个关键帧) | both;测试
  • 播放状态 animation-play-state: paused|running;默认是 "running"。测试

animation所有动画属性的简写属性，除了 animation-play-state 属性。
简写animation: name duration timing-function delay iteration-count direction fill-mode; （默认值none 0 ease 0 1 normal none）

四、3D场景搭建与应用

1.属性介绍

perspective: number|none; 3D元素距视图的距离，以像素计
perspective-origin:50% 50% 3D元素所基于的X轴和Y轴。用来改变 3D 元素的底部位置。
当为元素定义 perspective,perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身

transform-style:preserve-3d; 设置3D,调整元素是在一个3维空间下
transform-origin:x(left/center/right/length/%) y(top/center/bottom/length/%) z(length); 调整旋转中心 默认值为(50% 50% 0) 测试 用例-边框设置0.5px
backface-visibility:visible|hidden; 当元素不面向屏幕时是否可见。测试

2.坐标轴的概念

  • 坐标系原点在左上角,x轴的正方向是向右,y轴正方向是向下,z轴正方向是从屏幕到人的眼睛(垂直)

3.应用

CSS3实现3D开门动画效果
图片的旋转木马效果
CSS3 3D transform变换
张鑫旭博客

03-06 00:10
Powered by LMLPHP ©2024 3D 0.062535