志在指尖
用双手敲打未来

css特效(一些好玩的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

一些好玩的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*/
}
把鼠标放上该区域,来查看过渡作用。

未经允许不得转载:IT技术网站 » css特效(一些好玩的css特效代码)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载