css时光机,CSS3时光机（蜡笔 | 彩笔）风格的照片滤镜特效

CSS

语言：

CSSSCSS

确定

.colored-pencil-effect {

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

background-size: cover;

background-position: 50%

}

@supports ((-webkit-filter: invert(1)) or (filter: invert(1))) and (mix-blend-mode: color) {

.colored-pencil-effect {

position: relative

}

.colored-pencil-effect:after,

.colored-pencil-effect:before {

display: block;

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-size: cover;

box-shadow: inset 0 0 0 1px #000

}

.colored-pencil-effect:before {

background-image: url(/uploads/161101/happy.jpg), url(/uploads/161101/happy.jpg);

background-blend-mode: difference;

background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);

-webkit-filter: brightness(2) invert(1) grayscale(1);

filter: brightness(2) invert(1) grayscale(1)

}

.colored-pencil-effect:after {

background: inherit;

mix-blend-mode: color

}

}

img {

width: 600px;

}

body {

margin: 0;

}