过滤器css器,CSS3 过滤器（filter）实验

CSS

语言：

CSSSCSS

确定

html, body {

height: 100%;

overflow: hidden; }

input {

position: absolute;

z-index: 10;

margin: 1em; }

body {

position: relative; }

.scene {

height: 100%;

background-color: #555; }

input:checked + .scene {

-webkit-filter: contrast(100) invert(0); }

@-webkit-keyframes opacity {

50% {

opacity: 0.5; } }

@keyframes opacity {

50% {

opacity: 0.5; } }

.water {

position: absolute;

top: 0%;

left: 0;

right: 0;

bottom: 0;

background: #36c;

background-color: #556;

background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(300deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(300deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);

background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);

background-size: 80px 140px;

background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;

opacity: 0;

-webkit-animation: opacity 4s ease-in-out infinite alternate;

animation: opacity 4s ease-in-out infinite alternate; }

@-webkit-keyframes move {

50% {

left: 60%; } }

@keyframes move {

50% {

left: 60%; } }

.drop {

-webkit-filter: blur(60px);

background-color: #ffa6b6;

position: absolute;

top: 0;

left: -60%;

right: 0;

bottom: 0;

width: 15%;

height: 0;

padding-bottom: 15%;

border-radius: 50%;

margin: auto;

-webkit-animation: move 8s ease-in-out infinite alternate;

animation: move 8s ease-in-out infinite alternate; }