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;
}