CSS
语言:
CSSSCSS
确定
body {
text-align: center;
padding: 0 2em;
font-family: 'Open Sans', 'San Francisco', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
overflow-x: hidden;
}
figure {
display: block;
width: 500px;
height: 500px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
figure:after {
content: '';
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 1;
background: -webkit-radial-gradient(390px 220px, 80px 160px, deeppink 30%, rgba(0, 0, 0, 0)), -webkit-radial-gradient(75px 300px, 55px 100px, deeppink, rgba(0, 0, 0, 0));
background: radial-gradient(80px 160px at 390px 220px, deeppink 30%, rgba(0, 0, 0, 0)), radial-gradient(55px 100px at 75px 300px, deeppink, rgba(0, 0, 0, 0));
mix-blend-mode: hue;
}
figure:hover:before,
figure:hover:after {
opacity: 0;
}
img {
width: 100%;
-webkit-filter: saturate(1.1);
filter: saturate(1.1);
}