CSS3简介

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强新增 了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。

CSS3的现状

关于私有前缀:

在标准还未确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性

目前已有很多私有前缀可以不写了,但为了兼容老版本的浏览器,可以仍沿用私有前缀和标准方法,逐渐过渡。

一般来说,移动端更新迭代很快,对CSS3支持良好, 因此我们在移动端没必要写太多的前缀,因为移动端的ios和Android的浏览器都是webkit内核。

谷歌、苹果浏览器:-webkit-
火狐浏览器:-moz-
IE浏览器:-ms-
欧朋浏览器:-o-
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;

    /*谷歌浏览器和safari浏览器的前缀 -webkit-*/
    -webkit-transform: rotate(45deg);
    /*火狐浏览器的前缀 -moz-*/
    -moz-transform: rotate(45deg);
    /*ie浏览器的前缀 -ms-*/
    -ms-transform: rotate(45deg);
    /*opera浏览器的前缀 -o-*/
    -o-transform: rotate(45deg);
    /*规范化后的写法*/
    transform: rotate(45deg);
}

【css3初体验】

CSS3选择器

关系选择器

img

属性选择器

img

伪类选择器

伪类选择器的语法:都带有一个 冒号 :

child系列(重点)

img

思考:

1. 第一列变成红色
2. 最后一列变成红色
3. 倒数第二列变成红色

其他伪类选择器

:of-type系列,  用法与child系列很像,但是找的是子元素中对应类型的下标(了解,用的不多)
:focus    查找获取到焦点的文本框
:checked 获得选中的checkbox
:disabled 获得不可用的框
:enabled 获得可用的框
:not(selector)选择不匹配selector的那些元素
:target  获取当前活跃的锚链接

伪元素选择器

before和after

注意事项:
//1.    必须指定content属性,可以在content属性中写入文本内容,但是通常为空字符串。
//2.    默认是行内元素,无法设置宽高,需要指定display:block或者position:absolute
E::before :在元素子节点的最前面添加一个内容。
E::after  :在元素子节点的最后面添加一个内容。

关于单冒号和双冒号问题:

关于:before与::before的区别
:before是css2中伪元素的写法,但是呢,在css3中严格规定,伪类采用单冒号,伪元素需要使用双冒号。为了兼容旧的代码,当浏览器碰到了:before之后,会自动的转换成::before。
如果需要兼容老的浏览器,比如IE678,推荐使用:before
如果不需要兼容老的浏览器,比如移动端,推荐使用::before

其他伪元素选择器

::first-letter  :获取元素的第一个字符
::first-line   :获取元素的第一行
::selection   :获取选中的元素

CSS3阴影

如何查看css3文档

学会使用工具,可以让我们事半功倍。

[]        表示全部可选项
||        表示或者
|        表示多选一
?       表示0个或者1个
*        表示0个或者多个
{2,3}        表示范围

文字阴影

text-shadow:文字阴影

语法: text-shadow:水平偏移 垂直偏移 羽化大小 颜色

边框阴影

box-shadow:边框阴影

none: 无阴影 
<length>:第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
<length>:第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
<length>:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
<length>:如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
<color>:设置对象的阴影的颜色。 
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

CSS3背景

在css2中已经有background属性了,用于设置盒子的背景相关的一些样式,在CSS3中新增加了几个背景相关的几个属性。

background-size

用户设置背景图片的尺寸大小

//注意:这两种设置方式会导致图片失真。
/*background-size:设置背景图片的大小*/
background-size: 600px 400px;

/* 百分比是相对于盒子自身的宽度和高度 */
background-size: 100% 100%;

不失真的设置方式(等比例缩放)

/*containe保证等比例缩放,但是会出现留白*/
background-size: contain;

/*cover保证等比例缩放,并且不会留白,但是出现有一部分图片不显示*/
background-size: cover;

【演示:01-background-size的使用.html】

【案例:02-全屏背景.html】

background-clip

设置背景区域的大小

/*盒子的背景区域是整个盒子,包括边框和padding*/
/*默认值,设置背景区域包括了边框*/
background-clip: border-box;

/*背景区域只包含padding和content*/
background-clip: padding-box;

/*背景区域只包含content*/
background-clip: content-box;

【演示:03-background-clip.html】

background-origin

设置背景图片的原点的位置,默认是padding的地方开始

background-image: url(images/bg.jpg);
/*设置原点从border开始*/
background-origin: border-box;

/*设置原点从padding开始,默认值*/
background-origin: padding-box;

/*设置原点从content开始*/
background-origin: content-box;

【演示:04-background-origin.html】

多重背景

background设置背景的时候,可以设置多个背景图片,使用逗号隔开。注意颜色只能设置一次,并且通常来说,颜色都是在最后面进行设置。

background是一个合写的属性,如果在background之前设置了background相关的样式,会被覆盖掉。

background: url(images/mn1.jpg) no-repeat top left, url("images/mn2.jpg") no-repeat right bottom, pink;

【多重背景-语法.html】

【多重背景-小泡泡.html】

【多重背景的应用.html】

CSS3渐变

线性渐变

linear-gradient指沿着某条直线朝一个方向产生的渐变效果。

//注意:渐变实际上相当与一张图片,因为需要加给background-image才会生效
//渐变的两个要求:有区间,有颜色变化。
//最简单的渐变
background-image: linear-gradient(red, green);
//设定渐变的方向
background-image: linear-gradient(to right, red, green);
//也可以设定渐变的角度
background-image: linear-gradient(45deg, red, green);
//设定渐变的范围
background-image: linear-gradient(to right, red 20%, green 80%)
//每一个区间表示渐变颜色的范围
background-image: linear-gradient(to right, red 20%, green 20%)

【演示:01-渐变-线性渐变.html】

【演示:02-导航按钮.html】

【案例:03-渐变-案例-发廊效果.html】

径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果

/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);

/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);

/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);

/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);

CSS3盒子模型

CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况:

渐变

线性渐变

linear-gradient指沿着某条直线朝一个方向产生的渐变效果。

线性渐变的核心:

/* 注意:渐变实际上相当与一张图片,因为需要加给background-image才会生效 */
/* 渐变的核心:渐变方向,渐变颜色, 渐变范围 */
/* background-image: linear-gradient( 方向, 颜色 范围, 颜色 范围, 颜色 范围 ); */

/* 最简单的渐变 */
background-image: linear-gradient(red, green);
/* 设定渐变的方向  */
background-image: linear-gradient(to right, red, green);
/* 也可以设定渐变的角度  */
background-image: linear-gradient(45deg, red, green);
/* 设定渐变的范围  */
background-image: linear-gradient(to right, red 20%, green 80%)
/* 每一个区间表示渐变颜色的范围  */
background-image: linear-gradient(to right, red 20%, green 20%)

【演示:渐变-线性渐变.html】

【演示:导航按钮.html】

【案例:渐变-案例-发廊效果.html】

径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果

径向渐变的核心:

/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);

/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);

/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);

/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);

【演示:径向渐变-语法.html】

【案例:径向渐变-立体小球.html】

过渡

过渡的属性

  1. 如果两个状态发生改变,没有过渡,效果是瞬间变化的
  2. 如果加上了过渡,那么这个过程就会有动画的效果。
  3. 整个状态变化的过程是由浏览器来完成的,我们只需要关注开始状态与结束状态即可。
/*transition-property:设置过渡属性
/*也可以是width,height*/
transition-property:all;

/*transition-duration:设置过渡时间*/
transition-duration:1s;

/*transition-delay:设置过渡延时*/
transition-delay:2s;

/*transition-timing-function:设置过渡的速度*/
/*linear,ease,ease-in,ease-out,ease-in-out, steps(10)*/
transition-timing-function:linear;

【演示:过渡基本语法】

属性合写

/* 属性 时间 延时 速度 */
transition: width 1s 3s linear;

过渡的注意点:

【案例:手风琴效果】

2D转换

transform: 转换,是CSS3最具颠覆性的几个特性之一,既可以用于2D转换,也可以用于3D转换。

transform:2D转换,元素在平面上实现移动、旋转、缩放、斜切等操作

scale缩放

transform: scaleX(0.5);/*让宽度变化*/
transform: scaleY(0.5);/*让高度变化,注意不能写多个transform,不然会覆盖。*/
transform: scale(0.5);/*让宽度和高度同时变化*/

注意:

translate平移

transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);

注意:

rotate旋转

transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度

注意:

skew斜切(变形)

skew在实际开发中,是用的最少的一个属性。一般来说,x和y只会倾斜其中的一个

/*在水平方向倾斜30deg*/
transform: skewX(30deg);
/*在垂直方向倾斜30deg*/
transform: skewY(30deg);

【案例:扫光效果.html】

transform-origin转换原点

通过transform-origin可以设置转换的中心原点。

transform-origin: center center;
transform-origin: 40px 40px;

转换合写问题

transform:translateX(800px) scale(1.5) rotate(360deg) ;
//1. transform属性只能写一个,如果写了多个会覆盖
//2. transform属性可以连写,但是顺序对效果影响的,因为它会在第一个效果的基础上执行第二个效果,然后执行第三个效果(通常会把rotate放后面)
//3. 如果对transform进行过度效果的时候,初始状态和结束状态一一对应

【案例:盾牌打散与合并效果.html】

3D转换

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

思考:2D与3D的区别?

坐标轴

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

img

perspective透视

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

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

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

perspective:500px;

关于近大远小

img

img

对于我们眼睛来说,离我们越近的房子,我们会感觉到这个房子越大,离我们越远的房子,就会感觉越小,其实房子的大小都是一样的,只是在视觉上的一种不同。

rotate旋转

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

【01-3D转换-旋转.html】

问题:看不出来怎么转的,为什么现实生活中能够看出来?

translate平移

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

【02-3D转换-平移.html】

【立方体.html】

transform-style

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

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

transform-style与perspective的区别

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

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

【3d导航案例.html】

【切割轮播图案例】

【美女相册案例】

动画

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

动画与过渡的区别:

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

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

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

animation详解

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

animation-name:动画名称,由@keyframes定义的
animation-duration:动画的持续时间
animation-timing-function:动画的过渡类型
animation-delay:动画的延迟时间
animation-iteration-count:动画的循环次数
animation-direction:设置动画在循环中是否反向运动
animation-fill-mode:设置动画时间之外的状态
animattion-play-state:设置动画的状态。

动画库的使用

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

字体图标

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

优点:

1、将所有图标打包成字体库,减少请求;

2、具有矢量性,可保证清晰度;

3、使用灵活,便于维护;

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

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

弹性布局(伸缩布局)

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

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

【演示:01-伸缩布局初体验.html】

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

给容器设置的样式

flex-direction

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

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

可选值

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

justify-content(重点)

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

可选值:

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

align-items(重点)

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

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

flex-wrap

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

nowrap: 不换行(默认),会压缩子盒子的宽度。
wrap: 当宽度不够的时候,会换行。

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。

给子元素设置的样式

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

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

flex属性

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

flex:1;

order属性

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

order:1;

align-self

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

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

【案例:骰子】

携程旅行网

flex布局的应用。

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代码
<!-- 页面结构 -->
<div id="box">
    <!--每一个class为section的div都是一屏,section这个类是固定的-->
    <div class="section">我是内容1</div>
    <div class="section">我是内容2</div>
    <div class="section">我是内容3</div>
    <div class="section">我是内容4</div>
</div>
//编写js代码
$(function () {
    $("#box").fullpage();
});

鼠标滚动事件(了解)

  /* 监听鼠标滚轮事件 */
  window.addEventListener("mousewheel", function( e ) {
    // e.wheelDelta 鼠标滚动的量, 大于0向上滚, 小于0向下滚
    if (e.wheelDelta > 0) {
      console.log("往上滚动");
    }
    else {
      console.log("往下滚动");
    }
  });

常用参数

属性名称 描述
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) 当离开某一个幻灯片的时候会触发一次这个回调函数。