<div class="halftone">
<img src="https://cloud-static.com/gallery/1001/3.jpg">
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
.halftone {
position: absolute;
width: 20vw;
height: 20vw;
background: white;
top: 50%;
left: 50%;
filter: contrast(100000%);
transform: translate(-50%, -50%);
overflow: hidden; // 电脑性能好的，关掉这个属性
}
.halftone > img {
width: 100%;
height: 100%;
filter: brightness(0.5) blur(4px);
animation: 3s animation-filter infinite alternate;
}
.halftone::after {
content: "";
position: absolute;
top: -100%;
left: -100%;
right: -100%;
bottom: -100%;
background-blend-mode: multiply;
background: radial-gradient(8px 8px, cyan, white),
radial-gradient(8px 8px, magenta, white),
radial-gradient(8px 8px, yellow, white);
background-size: 8px 8px;
background-position: 0 -3px, -2px 0, 2px 0;
mix-blend-mode: saturation;
pointer-events: none;
transform: rotate(11.25deg);
transition: 1s ease-in-out transform;
z-index: 1;
animation: 3s animation-overlay infinite alternate;
}
@keyframes animation-overlay {
0% {
transform: rotate(450deg) scale(15);
}
100% {
transform: rotate(-90deg);
}
}
@keyframes animation-filter {
0% {
filter: brightness(0.5) blur(40px);
}
100% {
filter: brightness(0.5) blur(4px);
}
}
JS
格式化