css特效(一些好玩的css特效代码)

1.1调色滤镜

通过滤镜可以给元素应用一种或许多种特效，其中一部分滤镜与颜色有关，可用于调亮度，对比度，和饱和度

grayscale灰度值为0-1之间的小数

sepia褐色值为0-1之间的小数

saturate饱和度值为num

hue-rotate色相旋转值为angle

invert反色值为0-1之间的小数

opacity透明度值为0-1之间的小数

brightness亮度值为0-1之间的小数

contrast对比度值为num

blur含糊值为length

drop-shadow暗影

grayscale灰度

假如使用该作用参数里没值的话将会以100%来烘托，取值0-1之间为不同的灰度-webkit-filter:grayscale(1);

sepia

褐色，便是美图秀秀里有个怀旧功能的那种作用，取值也是0-1，-webkit-filter:sepia(1);

saturate饱和度

该特点改动图片的饱和度，取值规模为数字即可，默认值100%，-webkit-saturate(6);

hue-rotate色相旋转

hue-rotate用来改动图片的色相，默认值为0deg，取值为angle，示例：-webkit-filter:hue-rotate(180deg)

invert反色

invert的作用就和相片底片有点类似

opacity透明度

-webkit-filter:opacity(0.3)与opacity特点区别在于，前者的实际作用会取决于它在滤镜链条中的位置，opacity特点则总是在所有的滤镜应用完之后才起作用

brightness亮度

改动图片的亮度，默认值为100%，示例：-webkit-filter:brightness(0.5)

contrast对比度

这个特点取值和饱和度saturate类似

blur含糊

这个特点改动图片的清晰度，默认值为0

drop-shadow暗影

这个类似于box-shadow，给图片加暗影,与box-shadow和text-shadow特点很像，但也有限制和不同的把戏

div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的特点只能添加到盒模型外面，因而内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把选中的所有的非透明区域都做了暗影作用，就相当于一种真正的投影，这儿为了看得更清楚特意把边框弄成虚线，所以能看到凡是边框显示出来的部分，都有drop-shadow特点，但是在严格意义上讲，drop-shadow更应该说是投影

上面是box-shadow，下面是

drop-shadow

多个特点示例：

-webkit-filter:saturate(10)hue-rotate(500deg)grayscale(0.3)
,一些好玩的css特效代码,css3刚推出不久，尽管大多数的css3特点在许多盛行的浏览器中不支撑，但我个人觉得还是要尽量开端慢慢的去了解并运用css3(还有html5)，由于我觉得这是一种趋势，它是一种已经被制定的标准。我并不是专门在做前端的，仅仅有时不得不自己去写这些东西，有时喜爱研讨研讨这些，所有以上仅仅我的个人观点。

1、在之前我想在页面做出一个边框为圆角框，形似需要写挺多css代码的(可能我没了解到更好的方法)，在css3里有一个特点创立圆角是非常简单的，设置好角度也能够创立一个圆

border-radius：

126769cf0fc3cad7daf0e3f07bf0b6d7.png

css代码：

仿制代码代码如下:

#test

{

text-align:center;

padding:10px40px;

background:gray;

width:350px;

border-radius:10px;

-moz-border-radius:10px;/*为了让老的Firefox版本支撑*/

}

html代码：

仿制代码代码如下:

border-radius做圆角的例子。

2、CSS3边框阴影，之前我都是直接使用图片做背景实现的作用，用css3中的box-shadow特点也能够做到

box-shadow：

a703f230a2a996ee64941e46e12499bd.png

css代码：

仿制代码代码如下:

#test1

{

box-shadow:10px10px5px#A5A5A5;

width:300px;

height:100px;

}

html代码：

仿制代码代码如下:

3、css3支撑背景图片能够用多张图片

CSS3多重背景图片

7d6dd42abe289266af70bb668b08b38a.png

代码如下:

.box

{

width:464px;

height:300px;

background:url(test1.jpg)00no-repeat,url(test2.jpg)100%0no-repeat;

}

4、text-overflow特点规定当文本溢出包含元素时产生的工作。

此特点支撑堵截容器中的文本，当文本溢出能够给出了一个省略号的特性。

5ba3f1c13b8c9e621e8597c6bf0b904f.png

79dc58a514da02efa2e321f9e240f1fa.png

代码如下:

.test3{

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

border:1pxsolidblack;

width:400px;

padding:20px;

cursor:pointer;

}

#test3:hover{

white-space:normal;

color:rgba(0,0,0,1);

background:#e3e3e3;

border:1pxsolid#666;

}

当这里显现的内容溢出是会有省略号，鼠标移到文本上面会显现所有内容

5、过渡作用，经过CSS3，我们能够在不运用Flash动画或JavaScript的情况下，当元素从一种款式变换为另一种款式时为元素增加作用。

作用用贴图比较难体现出来，有兴趣自己运转下面代码：

代码如下:

div

{

width:100px;

height:100px;

background:blue;

transition:width2s,height2s;

-moz-transition:width2s,height2s,-moz-transform2s;/*能够支撑Firefox4*/

-webkit-transition:width2s,height2s,-webkit-transform2s;/*能够支撑SafariandChrome*/

-o-transition:width2s,height2s,-o-transform2s;/*能够支撑Opera*/

}

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

-moz-transform:rotate(180deg);/*能够支撑Firefox4*/

-webkit-transform:rotate(180deg);/*能够支撑SafariandChrome*/

-o-transform:rotate(180deg);/*能够支撑Opera*/

}

把鼠标放上该区域，来查看过渡作用。