一起学习CSS3的绚丽特效

随着互联网时代到来，为统计网络社交，小编最近在做一个大学生疏离感与网络社交关系的问卷调查，望广大粉丝认真填写，复制下面链接浏览器打开即可填写。

https://www./m/21704493.aspx

      CSS3是CSS2的升级版本，它在CSS2的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

     

1

css3的圆角和阴影

        用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序。

        border-radius：属性比较多可以用百分比也可以用px，不能用负数，一般设置两个值（一个值四个方向都相同，两个值分别为左上右下相等，右上和左下相等）。

       box-shadow：水平偏移（可取正负值）、垂直偏移（同上）、阴影模糊值、阴影颜色。例如 box-shadow:2px 2px 2px #FF0000;颜色也可以用rgba的形式。

div{
     height: 100px;
     width: 300px;
     border-radius: 10px;
     box-shadow: 10px 10px 5px #ccc;
     background-color: pink;
   }

2

css3的渐变

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

       以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义。

div {
       width: 200px;
       height: 200px;
       /*兼容问题一般都要写四个。。。*/
       background: -webkit-linear-gradient(red, blue);
       /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient(red, blue);
       /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(red, blue);
       /* Firefox 3.6 - 15 */
       background: linear-gradient(red, blue);
       /* 标准的语法 */
   }

3

css3的过渡

        通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

div {
       width: 100px;
       height: 100px;
       background: yellow;
       transition: width 2s;
       -moz-transition: width 2s;
       /* Firefox 4 */
       -webkit-transition: width 2s;
       /* Safari 和 Chrome */
       -o-transition: width 2s;
       /* Opera */
   }
   div:hover {
       width: 200px;
   }

4

css3的动画

     要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

       通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

div{
 width:100px;
 height:100px;
 background:red;
 animation:myfirst 5s;
 -moz-animation:myfirst 5s; /* Firefox */
 -webkit-animation:myfirst 5s; /* Safari and Chrome */
 -o-animation:myfirst 5s; /* Opera */
}

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

@-moz-keyframes myfirst /* Firefox */{
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
}

@-o-keyframes myfirst /* Opera */{
 0%   {background:red;}
 25%  {background:yellow;}
 50%  {background:blue;}
 100% {background:green;}
}