filter10條實現10種濾鏡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: 100vh;
}
.filter{
float: left;
width: 45vw;
height: 40vh;
background: #fff;
margin: 0.5vh 1.5vw;
cursor: pointer;
border-radius: 5px;
border: 1vw solid #272727;
transition: .5s all;
background: url(http://www.zmdd95.com/images/dome.jpg) no-repeat center center;
}
.filter h3{
font: bold 45px/36vh "微軟雅黑";
text-align: center;
color: #fff;
}
.blur:hover{
filter: blur(4px);
}
.brightness:hover{
filter: brightness(0.30);
}
.contrast:hover{
filter: contrast(180%);
}
.grayscale:hover{
filter: grayscale(100%);
}
.invert:hover{
filter: invert(100%);
}
.opacity:hover{
filter: opacity(50%);
}
.saturate:hover{
filter: saturate(7);
}
.sepia:hover{
filter: sepia(100%);
}
.shadow:hover{
filter: drop-shadow(8px 8px 10px #f25);
}
.hue-rotate:hover{
filter: hue-rotate(200deg);
}
</style>
</head>
<body>
<div class="container">
<div class="filter blur">
<h3>blur(高斯模糊)</h3>
</div>
<div class="filter brightness">
<h3>brightness(亮度)</h3>
</div>
<div class="filter contrast">
<h3>contrast(對比度)</h3>
</div>
<div class="filter grayscale">
<h3>grayscale(灰度圖像)</h3>
</div>
<div class="filter invert">
<h3>invert(反轉輸入圖像)</h3>
</div>
<div class="filter opacity">
<h3>opacity(透明度)</h3>
</div>
<div class="filter saturate">
<h3>saturate(飽和度)</h3>
</div>
<div class="filter sepia">
<h3>sepia(深褐色)</h3>
</div>
<div class="filter shadow">
<h3>shadow(陰影)</h3>
</div>
<div class="filter hue-rotate">
<h3>hue-rotate(色相反轉)</h3>
</div>
</div>
</body>
</html>
