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)
图片[1]-css特效(一些好玩的css特效代码)-小白之家,一些好玩的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*/

}

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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论