CSS
语言:
CSSSCSS
确定
html {
overflow: hidden;
}
html,
html:before,
html:after {
height: 100vh;
width: 100vw;
background-image: url(/uploads/150101/coolgirl.jpg);
background-size: cover;
background-position: 50% 0;
}
html:before,
html:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
}
html:before {
-webkit-filter: contrast(5) blur(5px);
filter: contrast(5) blur(5px);
mix-blend-mode: difference;
}
html:after {
-webkit-filter: contrast(3) blur(5px) saturate(0.3);
filter: contrast(3) blur(5px) saturate(0.3);
mix-blend-mode: difference;
background-image: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.1) 50%, #000 50%), url(/assets/coolgirl.jpg);
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 50%, #000 50%), url(/assets/coolgirl.jpg);
background-blend-mode: screen;
background-size: 3vw, cover;
-webkit-animation: acid 0.6s infinite ease-in-out;
animation: acid 0.6s infinite ease-in-out;
}
@-webkit-keyframes acid {
0%, 100% {
-webkit-filter: contrast(5) blur(5px) saturate(0.3);
filter: contrast(5) blur(5px) saturate(0.3);
background-size: 3vw, cover;
}
10% {
-webkit-filter: contrast(2) blur(4px) saturate(0.3);
filter: contrast(2) blur(4px) saturate(0.3);
background-size: 2.5vw, cover;
}
50% {
-webkit-filter: contrast(5) blur(9px) saturate(0.3);
filter: contrast(5) blur(9px) saturate(0.3);
background-size: 9vw, cover;
}
70% {
-webkit-filter: contrast(5) blur(7px) saturate(0.3);
filter: contrast(5) blur(7px) saturate(0.3);
background-size: 2.5vw, cover;
}
}
@keyframes acid {
0%, 100% {
-webkit-filter: contrast(5) blur(5px) saturate(0.3);
filter: contrast(5) blur(5px) saturate(0.3);
background-size: 3vw, cover;
}
10% {
-webkit-filter: contrast(2) blur(4px) saturate(0.3);
filter: contrast(2) blur(4px) saturate(0.3);
background-size: 2.5vw, cover;
}
50% {
-webkit-filter: contrast(5) blur(9px) saturate(0.3);
filter: contrast(5) blur(9px) saturate(0.3);
background-size: 9vw, cover;
}
70% {
-webkit-filter: contrast(5) blur(7px) saturate(0.3);
filter: contrast(5) blur(7px) saturate(0.3);
background-size: 2.5vw, cover;
}
}