html给img加点特效,HTML5/SVG给图片添加紊流（feTurbulence）滤镜特效

CSS

语言：

CSSSCSS

确定

body {

background: #cfcfcf;

}

#container,

#water {

background-image: url("/uploads/161101/lake.jpg");

background-position: center bottom;

}

#container {

position: absolute;

top: calc(50% - 206px);

left: calc(50% - 275px);

height: 412px;

width: 550px;

overflow: hidden;

box-shadow: 0 4px 20px #4f4f4f;

}

#container #water {

position: absolute;

bottom: 0;

width: 100%;

height: 66%;

-webkit-filter: url("#turbulence");

filter: url("#turbulence");

}

#codepen-link {

position: absolute;

bottom: 30px;

right: 30px;

height: 40px;

width: 40px;

z-index: 10;

border-radius: 50%;

box-sizing: border-box;

background-image: url("http://www.seanalexanderfree.com/codepen/avatar.jpg");

background-position: center center;

background-size: cover;

opacity: 0.5;

-webkit-transition: all 0.25s;

transition: all 0.25s;

}

#codepen-link:hover {

opacity: 0.8;

box-shadow: 0 0 6px #0c0c0c;

}