前端之CSS3知识整理2

1. 3D转换

transform:不仅可以2D转换，还可以进行3D转换

1.1 坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的

1.2 perspective透视

电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。

说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。

注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

需要添加透视：perspective

1.)添加给父盒子, 让子盒子拥有近大远小的透视效果

2. )1000px 指的是观察者到盒子的距离

1.3 rotate旋转

左手定则:

伸出左手握拳, 心中自有三根轴,

大拇指指向轴的正方向, 手指头卷曲的方向, 就是旋转的正方向

transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度

1.4 translate平移

/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Z轴的正方向移动45px*/
transform: translateZ(45px);

1.5 transform-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

flat:默认值，2d显示
preserve-3d: 3d显示

transform-style与perspective的区别 ：

/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/
/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */

//一个3d元素可以没有perspective，但是不能没有transform-style

/立方体效果/



  
  
  



  

  

  

  

  

  

2.动画

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

动画与过渡的区别：

1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

使用一个动画的基本步骤：

//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素

2.1 animation详解

animation是一个复合属性，一共有8个参数

animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动：alternate(from,to,to,from)、normal(from,to)
animation-fill-mode：设置动画时间之外的状态:forwards(让动画停留在最终的位置)
animattion-play-state:设置动画的状态：paused(让动画停止)

2.2动画库的使用

https://daneden.github.io/animate.css/

3. 字体图标

我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置，但是这个需要引入图片，并且图片大小改变之后如果失真。在CSS3中可以使用字体图片，即使用图标跟使用文字一样。

优点：

1)将所有图标打包成字体库，减少请求；

2)具有矢量性，可保证清晰度；

3)使用灵活，便于维护；

阿里巴巴矢量图标：（可以自己定制） http://www.iconfont.cn/plus/collections/index?type=1

Font Awesome 使用 http://fontawesome.dashgame.com/

4. 弹性布局(伸缩布局)

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

display: 设置元素的显示模式

1) none 隐藏                                        2) block 块级, 独占一整行, 可设宽高

3)inline-block 行内块, 一行可以显示多个, 可设宽高

4)inline: 行内, 一行可以显示多个, 宽高内容撑开, 不可设宽高

5)flex 让盒子变成一个伸缩盒子

当给一个盒子设置了display：flex之后，这个盒子就有了主轴 和侧轴 的概念。主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的 。

方向：默认主轴从左向右 ，默认侧轴从上到下。

4.1 给容器设置的样式

4.1.1 flex-direction

flex-diretion主要是用来调整主轴的方向的，默认是水平方向

了解即可，一般来说，很少调整主轴的方向。

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

4.1.2 justify-content(重点)

justify-content主要用来设置主轴方向的对齐方式 ，可选的值有：

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

4.1.3 align-items(重点)

align-items用于调整侧轴的对其方式 ，可选的值有:

flex-start： 元素在侧轴的起始位置对其。 
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。

4.1.4 align-content

align-content用来设置多行的flex容器的排列方式

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。 
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。

align-items与align-content的区别 :

align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。

4.1.5 flex-wrap

flex-wrap属性控制flex容器是单行或者多行,默认不换行

nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。

      /* 只要给盒子指定 display: flex; 这个盒子就成为了伸缩盒子
         就拥有了主轴和侧轴的概念,
         默认主轴水平往右, 侧轴垂直往下, 盒子在主轴方向从左往右进行排布

         1. flex-direction: 控制主轴方向
            row 主轴水平往右  默认值
            column 主轴垂直往下

         2. justify-content: 主轴方向对齐方式
              flex-start: 往主轴开始位置对齐 (左对齐)
              flex-end: 往主轴结束位置对齐 (右对齐)
              center: 居中对齐
              space-around: 让盒子让主轴方向平均分布
              space-between: 让盒子进行平均分布, 只不过两端不留间隙

         3. align-items: 侧轴方向对齐方式
              flex-start: 往侧轴开始位置对齐, 默认值
              flex-end: 往侧轴结束位置对齐
              center: 在侧轴方向, 垂直居中
              stretch: 在侧轴方向上拉伸, 盒子不能设高
      */

      参数整理
      1. 控制主轴方向: flex-direction:row/column
      2. 控制主轴对齐方式: justify-content: flex-start/flex-end/center/space-between/space-around
      3. 控制侧轴对齐方式:
         (1) 控制单行对齐方式
             align-items: flex-start/flex-end/center/stretch
         (2) 控制多行侧轴对齐方式
             align-content: flex-start/flex-end/center/space-between/space-around/stretch
      4. 换行: 默认nowrap不换行, flex-wrap: wrap; 进行换行
    

4.2 给子元素设置的样式

上述给容器设置的样式，都是用于对子元素进行排列的

下列的属性更多的是用于设置子元素自身的样式。

4.2.1 flex属性

flex属性与用于子元素分配主轴的空间。

flex:1;

4.2.2 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order:1;

4.2.3 align-self

用于设置在侧轴的位置，但是align-self给子元素设置，优先级比align-items的优先级高。

取值与align-items的取值一样。

  给子元素设置的属性
      1. flex: 可以按份数分配主轴的剩余空间, 在排布完设置了宽度的盒子之后, 再分配空间
      2. order: 控制子元素的排布顺序, 数值越小, 越靠前
      3. align-self: 控制自己在侧轴的对齐方式
         属性值和 align-items 一样, 区别就在于, 这个是给子元素设置的
         (1) flex-start
         (2) flex-end
         (3) center
         (4) stretch

5.img标签留白问题

6.监听鼠标滚轮的滚动

7.360浏览器——fullpage的使用

fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

参考文档 http://www.dowebok.com/77.html

下载地址 https://github.com/alvarotrigo/fullPage.js

基本使用

1. 引入jQuery文件，因为fullpage是jquery插件

2. 引入fullpage的js文件

3. 页面结构

4. 编写js代码

    
    
我是内容1
    
我是内容2
    
我是内容3
    
我是内容4

//编写js代码
$(function () {
    $("#box").fullpage();
});

常用参数

属性名称	描述
sectionsColor	设置每一个section的背景颜色
verticalCentered	设定每一个section的内容是否垂直居中，默认true，
scrollingSpeed	设置滚动的速度，默认700毫秒
easing	设置动画的方式，一般不修改, 默认是easeInOutCubic, 如果想要修改此参数，需要引入jquery.easing.js
css3	是否使用css3 transform来实现滚动效果，默认true，不用修改，CSS3的动画效率比较js高。
loopTop	滚动到顶部后是否连续滚动到底部，默认false
loopBottom	滚动到底部后是否连续滚动到顶部，默认false
continuousVertical	是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，不会出现loopTop与loopBottom那样的跳动。
autoScrolling	是否使用插件的滚动方式，默认true，如果选择false，会出现浏览器子代的滚动条，将不会按页滚动，按照滚动进行滚动。
scrollBar	是否包含滚动条，默认false，如果设置为true，那么浏览器自定的滚动条会出现，这个时候，页面滚动还是按页滚动，但是浏览器也能滚动。不建议开启，不然会不同步。
paddingTop/paddingBottom	给每一个section设置一个paddingTop或者paddingBottom,默认值为0，如果需要给页面设置一个固定定位的头部菜单或者底部菜单的时候，可以使用这两个选项。
keyboardScrolling	是否可以使用键盘方向键导航，默认true
navigation	是否显示导航，默认为false，设置为true，会显示小圆点，作为导航
navigationPositon	导航小圆点的位置，设置left或者right，默认是right
navigationTooltips	小圆点的提示信息，鼠标一上去能看到提示信息
showActiveTooltip	是否显示当前页面的导航的tooltip信息，默认是false
slidesNavigation	是否显示横向幻灯片的导航，默认为false
slidesNavPosition	设置横向幻灯片的位置，top或者bottom，默认bottom
sectionSelector	section的选择器，默认是.section
slideSelector	slide的选择器，默认是.slide

常用回调函数

方法名	描述
afterLoad(anchorLink, index)	滚动到某一个section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算
onLeave(index,nextIndex,diretion)	当我们离开一个section时，会触发这个函数，index是离开的页面的序号，从1开始计算。 nextIndex是滚动到的页面的序号，direction是往上还是往下滚动，值是up或者down. return false可以取消滚动
afterResize()	窗口大小发生改变后会触发的回调函数
afterSlideLoad(anchor,index, slideAnchor,slideIndex)	页面滚动到某一个幻灯片的时候会触发这个回调函数
afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex)	当离开某一个幻灯片的时候会触发一次这个回调函数。

 

  
  
  
  




  

    

    

      
      
      
      
      
      
      
      
    
    

  
  
2
  
3
  
4
  
5