CSS3滤镜详解--兼容器问题解决

最新推荐文章于 2024-04-23 19:06:37 发布

孤独浪人1

最新推荐文章于 2024-04-23 19:06:37 发布

阅读量5.3k

点赞数

分类专栏： HTML5开发文章标签： css3滤镜渲染

本文链接：https://blog.csdn.net/u010782846/article/details/51001285

版权

HTML5开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3中提供滤镜的属性是：filter 他的值有

blur( <length> )：模糊值，默认值为0 越大月模糊

以下默认值为100%

brightness( [ <number（数值）> | <percentage（百分比）> ])：亮度

contrast( [ <number> | <percentage> ] )：对比度

saturate( [ <number> |<percentage> ] )：饱和度

grayscale( [ <number> |<percentage> ] )：灰度

opacity( [ <number> |<percentage> ] )：透明度

hue-rotate( <angle> )：色相旋转默认值为：0deg

以下默认值为0

invert( [ <number> |<percentage> ] )：反色

sepia() = sepia([ <number> | <percentage> ] ):褐色

drop-shadow( <length>{2,3}：阴影默认值为0

实例：

04galleryBegin.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例演示-滤镜使用</title>
<link rel="stylesheet" type="text/css" href="css/clolorChange.css"/>
<link rel="stylesheet" type="text/css" href="css/galleryBegin.css"/>
<script type="text/javascript" src="js/prefixfree.min.js" ></script>
</head>
<body>
<div class="cardfan">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
</div>
<script>
var polyfilter_scriptpath='js/lib/';
</script>

<script type="text/javascript" src="js/lib/contentloaded.js" ></script>
<script type="text/javascript" src="js/lib/css-filters-polyfill.js" ></script>
<script type="text/javascript" src="js/lib/cssParser.js" ></script>
</body>
</html>

galleryBegin.CSS:

/*设置div的宽度外边距位置*/
.cardfan{
width: 30%;
margin: 4em auto;
position: relative;
}

/*设置图片的样式*/
.cardfan img{
position: absolute;
width: 100%;
height: auto;
/*边框*/
border: 10px solid #fff;
/*阴影上右左下*/
box-shadow: 2px 2px 4px 0 rgba(0,0,0,2);
/*旋转图片的基点位置*/
transform-origin: center 600px;
/*transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, and transition-delay。*/
transition: all .5s;
/*一些不同的光标：*/
cursor: pointer;
}
/*第一张图片正常情况下设置*/
.cardfan img:nth-child(1){
transform: rotate(-10deg);
z-index: 3;
/*灰度 0为正常 1位灰色*/
filter: grayscale(1);
}
/*第一张图片触摸情况下设置*/
.cardfan img:nth-child(1):hover{
transform: rotate(-25deg);
filter: grayscale(0);
}
.cardfan img:nth-child(2){
filter:sepia(1);
}
.cardfan img:nth-child(2):hover{
filter:sepia(0);
}
.cardfan img:nth-child(3){
transform: rotate(10deg);
z-index: -1;
filter: blur(3px);
}
.cardfan img:nth-child(3):hover{
transform: rotate(25deg);
filter: blur(0);
}

孤独浪人1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS3滤镜详解--兼容器问题解决

CSS3中提供滤镜的属性是：filter 他的值有 blur( )：模糊值，默认值为0 越大月模糊以下默认值为100%brightness( [ | ])：亮度contrast( [ | ] )：对比度saturate( [ | ] )：饱和度grayscale( [ | ] )：灰度opacity( [ | ] )：透明度
复制链接

扫一扫