CSS3渐变、过渡、转换、动画

CSS3渐变

什么是渐变？

CSS3渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3渐变的分类
线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向
径向渐变（radial-gradient）-由它们的中心定义

1、从上到下

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

#grad{background-image:linear-gradient(#e66465,#9198e5);}

2.对角
下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢
过渡到蓝色：
#grad{
height:200px;background-image:linear-gradient(tobo
ttomright,red,yellow);
}

3.使用透明度（transparent）

CSS3渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用rgba()函数来定义颜色结点。rgba()函数中的最后
一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表
示完全不透明。
从左到右的线性渐变，带有透明度：
#grad{background-image:linear-gradient(toright,rgba(255,0,
0,0),rgba(255,0,0,1));}

、CSS3径向渐变

径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要
呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、
大小。默认情况下，渐变的中心是center（表示在中心点），渐变的形状是ellipse
（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角落）。

.CSS3过渡

 过渡是元素从一种样式逐渐改变为另一种的效果。

1、指定要添加效果的CSS属性
2、指定效果的持续时间。
div{
   transition:width2s;-webkit-transition:width2s;/*Safari
*/}

如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户
鼠标放在一个元素上时：
div:hover{width:300px;}
要添加多个样式的变换效果，添加的属性由逗号分隔：
 

div{transition:width2s,height2s,transform2s;
-webkit-transition:width2s,height2s,-webkit-trans
form2s;}

 CSS3  2D转换

什么是CSS3转换

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。
转换的效果是让某个元素改变形状，大小和位置。

transform：translate(x，y)平移
transform：rotate(30deg)旋转   顺时针
transform：scale(2)缩放
transform：skew(330deg)倾斜 逆时针

动画
1.@keyframes规则
要创建CSS3动画，你需要了解@keyframes规则。
@keyframes规则是创建动画。
@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新
的样式。
(4)、CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
当在@keyframes创建动画，把它绑定到一个选择器（动画的名称），否则动
画不会有任何效果。
规定动画的名称，规定动画的时长
请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%
和100%。
0%是动画的开始，100%是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器。
把"myfirst"动画捆绑到div元素，时长：5秒：
当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：

 创建动画

@keyframesmyfirst{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}

使用动画

div{
animation:myfirst5slinear2sinfinitealternate;/*Safari与C
hrome:*/
-webkit-animation:myfirst5slinear2sinfinitealternate;
}

CSS3多列布局

本章节我们将学习以下几个CSS3的多列属性:
属性描述
column-count  指定元素应该被分割的列数。
column-fill  指定如何填充列
column-gap  指定列与列之间的间隙
column-rule  所有column-rule-*属性的简写
column-rule-color  指定两列间边框的颜色
column-rule-style  指定两列间边框的样式
column-rule-width  指定两列间边框的厚度
column-span   指定元素要跨越多少列
column-width  指定列的宽度，尽量不要与column-count同时使用
columns  设置column-width和column-count的简写

创建多列

column-count属性指定了需要分割的列数。

创建列与列间的间隙

column-gap属性指定了列与列间的间隙。

列边框
column-rule-style属性指定了列与列间的边框样式

CSS3分页
(1)、它是如何工作？
如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用HTML和CSS来创建分页：
ul.pagination{
display:inline-block;
padding:0;
margin:0;
}
ul.paginationli{display:inline;}
ul.paginationlia{
color:black;
float:left;
padding:8px16px;
text-decoration:none;
}
(2)、点击及鼠标悬停分页样式
如果点击当前页，可以使用.active来设置当前页样式，鼠标悬停可以使
用:hover选择器来修改样式：
ul.paginationlia.active{
background-color:#4CAF50;
color:white;
}
ul.paginationlia:hover:not(.active){background-color:#ddd;}
圆角样式
可以使用border-radius属性为选中的页码来添加圆角样式:
ul.paginationlia{
border-radius:5px;
}
ul.paginationlia.active{
border-radius:5px;
}
鼠标悬停过渡效果
我们可以通过添加transition属性来为鼠标移动到页码上时添加过渡效果:
ul.paginationlia{
transition:background-color.3s;
}
(3)、带边框分页
我们可以使用border属性来添加带边框分页:
ul.paginationlia{
border:1pxsolid#ddd;/*Gray*/
}
圆角边框
提示:在第一个分页链接和最后一个分页链接添加圆角：
.paginationli:first-childa{
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.paginationli:last-childa{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
分页间隔
提示:你可以使用margin属性来为每个页码直接添加空格：
ul.paginationlia{
margin:04px;/*0对应的是头部与底部，可以修改它看看效果*/
}
(4)、分页字体大小
我们可以使用font-size属性来设置分页的字体大小:
ul.paginationlia{
font-size:22px;
}
(5)、居中分页
如果要让分页居中，可以在容器元素上(如<div>)添加text-align:center样式：
div.center{
text-align:center;
}