@happyfans 2015-09-07T16:54:00.000000Z 字数 9987 阅读 1543

CSS3特效

css3

2D、3D转换

项目地址
CSS3的转换操作指的是对元素进行移动、缩放、旋转或者倾斜。转换是使元素改变形状、尺寸、位置的一种效果，我们可以使用2D、3D来转换元素。
2D-3D转换的默认基准点是元素的中心点，我们可以使用transform-origin来改变元素的默认基准点。

其中2D转换方法有：

translate(x,y)：2D转换，即移动（右移x像素，下移y像素）
rotate(angle)：2D旋转特定角度（deg）或者弧度（rad）
scale(x,)：2D缩放（宽度原来x倍，高度原来y倍）
skew(x-angle,)：沿着 X 和 Y 轴的 2D 倾斜转换。
matrix(n,n,n,n,n,n)：矩阵变换

3D转换方法有：

rotateX()
rotateY()

以下是对一个元素进行使用多种变换的示例代码：

div{
    width: 300px;
    background-color: #f0f;
    text-align: center;
    transform:translate(50px,100px) rotate(30deg) scale(0.5,1.5);
}

注意哦：CSS属性的顺序不同，最终的效果也不同（因为在变换的时候基准点变了）。

面向对象的CSS

OO CSS将页面的可重用元素抽象成一个类，用Class加以描述，而与之对应的html则可以看做是此类的一个实例。

OO CSS的优势

代码复用，便于维护；
减小CSS体积，提高渲染速度；
组件库思想、栅格布局可共用、减少选择器、方便拓展。

OO CSS注意事项

OO CSS实战

OO CSS官网下载对应的库，我们可以根据这个库来书写我们自己的CSS.
另附几个常用的CSS库：

Less

Less是基于javascript的一门 CSS 预处理语言，它扩充了 CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
LESS 既可以在客户端上运行 (支持IE 6+, Webkit,Firefox)，也可以借助Node.js或者Rhino在服务端运行。

教程参见bootstrap中文网less教程

SASS

SASS是基于Ruby的CSS预处理语言，比Less略强。
W3CPlus SASS教程

在ie中使用@import命令在CSS文件中导入另一个CSS的时候是阻塞加载，不建议使用。

CSS3选择器

CSS3属性选择器

CSS3中增加了3个属性选择器，分别是[attr*=val]、[attr^=val]、[attr$=val]使得CSS的选择器具有的通配符的概念。

<style>
    [id*=div]{
        color: red;
    }
</style>
<div id="div1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="mydiv">示例文本4</div>
<div id="box">示例文本5</div>

以上代码中所有id**包含**div字符的div文字的颜色都是红色（示例文本1~示例文本4）

<style>
    [id^=div]{
        color: red;
    }
</style>
<div id="div1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="mydiv">示例文本4</div>
<div id="box">示例文本5</div>

示例文本1、2、4变为红色（^匹配首字母）

<style>
    [id$=div]{
        color: red;
    }
</style>
<div id="div1">示例文本1</div>
<div id="div2">示例文本2</div>
<div id="div3">示例文本3</div>
<div id="mydiv">示例文本4</div>
<div id="box">示例文本5</div>

示例文本4匹配（$符号匹配结束字符）

CSS3结构性伪类选择器

first-line
first-letter
before
after

<style>
    /* first-line匹配第一行 */ 
    p:first-line{
        background-color: #ff0;
    }
    /* first-letter匹配第一个字符（你） */
    div:first-letter{
        background-color: #f00;
    }
    /* before用于在元素前面插入（如下代码将会在每个列表前面插入^） */
    li:before{
        content: '^';
    }
    /* 和before类似 */
    li:after{
        content: ' 列表解释';
        color: grey;
    }
</style>
<body>
    <p>第一行<br />第二行</p>
    <div>你好么</div>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
</body>

CSS3伪类选择器

结构性伪类选择器的特性是允许开发者根据文档中的结构来指定元素的样式。

：root将样式绑定到文档的根元素（html）
：not当对父级设定了一个样式，如果需要排除特定的子元素不设定任何样式可以使用not。
：empty指定元素空白时使用的样式。
:target为页面中某个属性为target的元素指定样式，该样式仅在用户点击链接并跳转到指定链接时生效。

<style>
    /* :root 匹配整个文档（整个文档的背景为蓝色） */
    :root{
        background-color: blue;
    }
    /* 注意：当没有:root存在的时候body匹配真个文档，当有:root存在的时候body匹配内容区域 */
/*  body{
        background-color: yellow;
    }
*/
    /* :not 排除特定子元素（div下的h1和p都是红色,h2被排除） */
    div *:not(h2){
        color: red;
    }
    /* :empty将内容为空的元素设置样式; */
    :empty{
        background-color: green;
    }
    /* :target 适用于页面中属性为target的元素，并在target激活时生效 */
    :target{
        background-color: yellow;
    }
</style>
<body>
    <div>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <p>段落</p>
    </div>
    <lengend>
        姓名：<input type="text"><br />
        年龄：<input type="datetime" placeholder="请输入年龄">
    </lengend>
    <a href="#c1">菜单1</a>|
    <a href="#c2">菜单2</a>|
    <a href="#c3">菜单3</a>|
    <a href="#c4">菜单4</a>|
    <div id="c1">内容1</div>
    <div id="c2">内容2</div>
    <div id="c3">内容3</div>
    <div id="c4">内容4</div>
</body>

CSS3 结构性伪类选择器

:first-child、:last-child、:nth-child、:nth-last-child分别对应父级第一个子元素、最后一个子元素、指定序号的子元素甚至是偶数（或者奇数）个子元素的样式的设定。

<style>
    /* :first-child */
    li:first-child{
        color: yellow;
    }
    /* :last-child */
    li:last-child{
        font-weight: bold;
    }
    /* :nth-child(position) */
    li:nth-child(3){
        background-color: green;
    }
    /* :nth-last-child(positon) */
    li:nth-last-child(2){
        font-style: italic;
    }
</style>
<body>
    <h2>列表</h2>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
        <li>项目5</li>
        <li>项目6</li>
    </ul>
</body>

CSS3选择器2
其中:nth-child()和:nth-last-child()选择器还可以传入odd或even用来选择奇数行或者偶数行。——实现隔行变色。

<style>
    li:nth-child(odd){
        background-color: green;
    }
    li:nth-child(even){
        background-color: yellow;
    }
</style>
<h2>列表</h2>
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
    <li>项目5</li>
    <li>项目6</li>
</ul>

以下有3组列表，我们希望后两组列表的样式和第一组列表的样式完全一样：
可以在使用nth-child(an+b)的形式传入参数。

<style>
    li:nth-child(3n+1){
        background-color: red;
    }
    li:nth-child(3n+2){
        background-color: green;
    }
    li:nth-child(3n+3){
        background-color: blue;
    }
</style>
<ul>
    <li>项目1-1</li>
    <li>项目1-2</li>
    <li>项目1-3</li>
    <br />
    <li>项目2-1</li>
    <li>项目2-2</li>
    <li>项目2-3</li>
    <br />
    <li>项目3-1</li>
    <li>项目3-2</li>
    <li>项目3-3</li>
</ul>

使用CSS3选择器使得每一组内的样式完全相同

:nth-of-type()和:nth-last-of-type()可以避免:nth-child()出现的类型问题。
例如：在以下的demo中我们希望每个奇数的h2是黄色的背景，假设我们使用nth-child()选择器：

<style>
    h2:nth-child(odd){
        background-color: yellow;
    }
</style>
<h2>文章标题1</h2>
<p>文章内容1</p>
<h2>文章标题2</h2>
<p>文章内容2</p>
<h2>文章标题3</h2>
<p>文章内容3</p>

错误的选择器

上面的结果很明显不符合我们的预期（第二个h2被匹配了！）如果我们采用:nth-of-type()选择器就只会匹配同类型的元素（nth-child()匹配父元素的子元素，所以各个p标签也被算在内）从而得到正确的结果。

h2:nth-of-type(odd){
    background-color: yellow;
}

正确的选择器

我们也可以使用:only-child()选择器在某种程度上（仅一个子元素）代替:nth-child()选择器的实现方法。

<style>
    /*  匹配所有的第一个子元素（1-1、2-1、3）
    li:nth-child(1){
        background-color: blue;
    }
    */
    /* 只匹配3 */
    li:only-child{
        background-color: green;
    }
</style>
<ul>
    <li>1-1</li>
    <li>1-2</li>
    <li>1-3</li>    
</ul>
<ul>
    <li>2-1</li>
    <li>2-2</li>
</ul>
<ul>
    <li>3（仅有一个子元素）</li>
</ul>

CSS3 only-child选择器

UI元素状态伪类选择器

指定的样式只有当元素处于某种状态下时才生效。
17种UI元素状态选择器

<style>
/* 悬浮 */
input[type='text']:hover{
    background-color: #f0f;
}
/* 获取焦点 */
input[type='number']:focus{
    background-color: #f00;
}
/* 按下不放开 */
input[type='date']:active{
    background-color: #00f;
}
/* 选中 */
input[type='checkbox']:checked{
    outline: 5px solid red;
}
/* 不可用 */
button:disabled{
    background-color: #fff;
}
</style>
<input type="text" name="uname"><br />
<input type="number" name="age"><br />
<input type="date" name="date">
<hr />
<input type="checkbox" checked="true">阅读
<input type="checkbox" >上网
<input type="checkbox" >听音乐
<input type="checkbox" >旅游
<hr />
<input type="radio" name="dream" value="" id="dis">不可用
<input type="radio" name="dream" value="" id="en">可用
<button id="btn">确定</button>
<script>
var disRadio = document.getElementById('dis'),
    enRadio = document.getElementById('en'),
    oButton = document.getElementById('btn');
disRadio.onclick = function () {
    oButton.disabled = 'disabled';
}
enRadio.onclick = function(){
    oButton.disabled = '';
}
</script>

CSS3UI状态选择器

通用兄弟元素选择器

用来指定位于同一父元素中的某个元素之后的所有其他某个种类的兄弟元素使用的样式。

<style>
    /* 选择与div同级（兄弟）的p元素 */
    div ~ p{
        background-color: gold;
    }
</style>
<div>
    <div>
        <p>p元素为<b>内层</b>div的子元素</p>
        <p>p元素为<b>内层</b>div的子元素</p>
    </div>
    <p>p元素为<b>外层</b>div的子元素</p>
    <p>p元素为<b>外层</b>div的子元素</p>
    <p>p元素为<b>外层</b>div的子元素</p>
</div>

通用兄弟选择器

CSS3文字和字体相关样式

给文字添加阴影

text-shadow: h-shadow v-shadow blur color;属性(第三个参数是模糊程度，第四个参数是模糊的颜色,其中后两个参数是可选的)。我们可以为元素设置多个阴影。

<style>
    div{
        color: red;
        font-weight: bold;
        font-size: 30px;
        text-shadow: -5px 5px 5px blue,
                     20px 20px 2px green,
                     50px 60px 3px magenta; 
    }
</style>
<div>你好</div>

CSS3文字阴影

使用服务端字体

在CSS3之前，字体必须在本地才可以正常显示，但是在CSS3中我们可以通过@font-face引用服务端字体。

/* 客户端没有Arial则引用http://xxx.ttf; */
@font-face{
    font-family: WebFont;
    /* ttf-truetype otf-opentype */
    src:local('Arial'),
        url('http://xxx.ttf') format('truetype');
    font-weight: normal;
}
div{
    font-family: WebFont;
}

修改字体种类而保持字体大小不变

font-size-adjust属性（我们可以自己在浏览器中微调aspect值）。

<style>
#div1{
        font-family: Menlo;
        font-size: 16px;
        font-size-adjust: 0.57;
    }
    #div2{
        font-family: cursive;
        font-size: 16px;
        font-size-adjust: 0.6;
    }
    #div3{
        font-family: '微软雅黑';
        font-size: 16px;
        font-size-adjust: 0.6;
    }
</style>
<div id="div1">Test sample</div>
<div id="div2">Test sample</div>
<div id="div3">Test sample</div>

CSS font-size-adjust

CSS3盒子相关样式

盒子模型大致可以分为inline和block两种类型。模型为inline的元素不能设置宽度和高度，只能被内容撑开。所以inline-block模型的出现是即希望盒子的显示可以是一排显示而又可以设置宽高。

display属性为list-item的元素会显示成列表的样式。例如：

<style>
div{
        display: list-item;
        list-style: circle;
        margin: 10px;
    }
</style>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>

display的list-item属性用于将元素显示成列表

overflow一共有5个属性，其中visible属性和不写overflow是一样的。scroll和auto会出现滚动条，hidden表示超出的部分会被修剪，而inherit则代表继承父容器。CSS3中增加了overflow-x和overflow-y属性。

对盒子使用阴影

类似于对文本使用阴影，对盒子使用阴影可以使用box-shadow属性。

div{
    width: 100px;
    height: 100px;
    background-color: #ff0;
    box-shadow: 10px -10px 5px red;
}

box-sizing属性用于指定盒子的大小是由宽高决定还是内容决定例如同样width和height均为100px的div1和div2的大小不同：

<style>
#div1{
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: #ff0;
    box-sizing:content-box; /* 元素的内容决定盒子 */
}
#div2{
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: #f0f;
    box-sizing:border-box; /* 元素的宽高决定盒子 */
}
</style>
<div id="div1">120*120</div>
<div id="div2">100*100</div>

盒子的大小

CSS3背景与图片相关样式

与背景相关的新属性

background-clip属性规定了背景的绘制区域：

<style>
    div{
        background-color: black;
        border: dashed 15px green;
        padding: 20px;
        color: white;
        font-size: 20px;
        font-weight: bold;
    }
    /* 边框、padding和内容区填充黑色 */
    #div1{
        background-clip: border-box;
    }
    /* padding和内容区填充背景色 */
    #div2{
        background-clip: padding-box;
    }
    /* 仅内容区填充背景色 */
    #div3{
        background-clip: content-box;
    }
</style>
<div id="div1">demo1</div><br />
<div id="div2">demo2</div><br />
<div id="div3">demo3</div>

CSS3 background-clip
同理，有background-origin规定背景图片从什么时候开始绘制（3个属性border-box、border-box、content-box）

在一个元素中显示多个背景图片

<style>
div{
        background: url('icon.jpg'),url('bg.jpg');
        background-repeat: repeat-x,no-repeat;
        background-position: 100%;
        width: 400px;
        height: 400px;
    }
</style>
<body>
<div></div>

CSS3 background-position

图片边框

类似于android图像处理中的九宫格布局。

九宫格布局中只有中间区域的图像被拉伸了，周围的8个格子是原状！九宫格布局中第一个和第三个参数对应的是5的高度，而第二个和第四个参数对应的是5的宽度。

div{
    border-image: url('bg.png') 10 10 10 20;
}

CSS3中的动画效果

transitions功能

transition可以实现平滑的过渡动画
transition: property duration timing-function delay;

div{
    width: 50px;
    background-color: #f0f;
    font-size: 16px;
    transition:background-color 1s linear,font-size 1s linear,width 1s linear,transform 1s linear;
}
div:hover{
    width: 120px;
    background-color: #ff0;
    font-size: 20px;
    transform:rotate(360deg);
}

CSS3 transition动画

animation功能

与transition功能相通，但是可以实现更加复杂的动画（可以定义关键帧以及每个关键帧中元素的属性值）。
项目地址
CSS3 animation

CSS3布局属性

弹性盒模型

弹性盒模型（Flexible Box或者FlexBox）是CSS3新增的布局模块（CSS Flexible Box Layout Module），用于实现容器中项目的对齐、方向、排序。弹性盒模型的最大特性在于可以动态修改子元素的高度和宽度以满足在不同尺寸屏幕下的恰当布局。

caniuse网站提供了弹性盒模型的兼容性测试
这个网站提供了弹性盒模型的各个属性的演示地址。

关于CSS代码的兼容性问题，我们可以将我们的CSS代码粘贴到codeopen，选择autoprefixer进行编译生成兼容的CSS。

以下是一个利用弹性盒模型实现的响应式菜单
效果图

媒体查询解析

响应式布局的核心是媒体查询。Media Query是获取用户行为和设备环境，然后提供相应的CSS规则的简称。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" href="example.css" media="(max-width:800px)" />
<!-- 样式表中的媒体查询 -->
<style>
    @media (min-width: 600px) {
        .facet_sidebar{
            display: none;
        }
    }
</style>

具体语法：
媒体查询

常用的屏幕尺寸从小到大如下所示：

老智能机: 320px-480px
智能手机： ≥ 480px
平板电脑： ≥ 768px
中等屏幕(桌面显示器)： ≥ 992px
大屏幕(大桌面显示器): ≥1200px
实现过程中，遵循移动优先原则（即小屏幕优先）。

最佳实践

/* 超小屏幕（手机，< 768px） */
/* 没有任何媒体查询相关代码，移动设备优先 */
/* 小屏幕（平板 >= 768px） */
@media (min-width: 768px) {...}
/* 中等屏幕（桌面显示器，>=992px ） */
@media (min-width: 992px) {...}
/* 大屏幕（）大桌面显示器，>=1200px） */
@media (min-width: 1200px) {...}

响应式表格示例代码。

响应式图片

响应式图片指的是用户代理根据输出设备分辨率的不同而加载不同类型的图片，从而避免了带宽的浪费。在改变输出设备的类型或者分辨率的时候可以及时加载对应的图片。项目地址。
实现方式：

img标签的srcset和sizes属性加载不同图片
picture和source media加载不同图片
source type指定多种格式
以上的方式都存在兼容性问题，可以使用超赞的浏览器兼容picturefill.js

在火狐浏览器中我们可以使用Ctrl+Shift+M使用响应式设计视图调试响应式布局。
响应式图片

CSS3中的渲染属性

项目地址

计数器

CSS Counters允许我们对页面中的任意元素进行计数，类似于有序列表，可以实现个性化的计数。计数器需要结合::before和::after使用，可以同时指定多个计数器。
CSS3计数器

形状

CSS3 Shape用于描述几何图形的使用，对于level1（候选标准）来说可以使用形状属性改变旁边内容流布局。

混合模式

CSS3 Blend Modes是CSS新增的一个魔法特性，类似于PS中的图层混合，允许多个背景或者多个图层进行混合。

CSS3特效

2D、3D转换

面向对象的CSS

OO CSS的优势

OO CSS注意事项

OO CSS实战

Less

SASS

CSS3选择器

CSS3属性选择器

CSS3结构性伪类选择器

UI元素状态伪类选择器

通用兄弟元素选择器

CSS3文字和字体相关样式

给文字添加阴影

使用服务端字体

修改字体种类而保持字体大小不变

CSS3盒子相关样式

对盒子使用阴影

CSS3背景与图片相关样式

与背景相关的新属性

在一个元素中显示多个背景图片

图片边框

CSS3中的动画效果

transitions功能

animation功能

CSS3布局属性

弹性盒模型

媒体查询解析

响应式图片

CSS3中的渲染属性

计数器

形状

混合模式

裁剪与遮罩

滤镜

CSS3特效

2D、3D转换

面向对象的CSS

OO CSS的优势

OO CSS注意事项

OO CSS实战

Less

SASS

CSS3选择器

CSS3属性选择器

CSS3结构性伪类选择器

UI元素状态伪类选择器

通用兄弟元素选择器

CSS3文字和字体相关样式

给文字添加阴影

使用服务端字体

修改字体种类而保持字体大小不变

CSS3盒子相关样式

对盒子使用阴影

CSS3背景与图片相关样式

与背景相关的新属性

在一个元素中显示多个背景图片

图片边框

CSS3中的动画效果

transitions功能

animation功能

CSS3布局属性

弹性盒模型

媒体查询解析

响应式图片

CSS3中的渲染属性

计数器

形状

混合模式

裁剪与遮罩

滤镜

内容目录