CSS通过设置filter实现元素交融效果

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		width: 100vw;
		height: 100vh;
	}
	.parent{
		position: relative;
		filter: contrast(24);
		position: relative;
		background-color: #000;
		width: 100vw;
		height: 100vh;
	}
	.a{
		width: 100px;
		height: 100px;
		filter: blur(12px);
		background-color: #fff;
		position: absolute;
		top: 100px;
		left: 50%;
		animation: animationA 0.8s ease-in-out infinite alternate;
	}
	.b{
		width: 100px;
		height: 100px;
		filter: blur(12px);
		background-color: #fff;
		position: absolute;
		top: 100px;
		left: calc(50% + 100px);
		animation: animationB 0.8s ease-in-out infinite alternate;
	}
	@keyframes animationA {
		0%{
			transform: rotate(45deg) translateX(-50px);
		}
		100%{
			transform: rotate(-45deg) translateX(50px);
		}
	}
	@keyframes animationB {
		0%{
			transform: rotate(-45deg) translateX(50px);
		}
		100%{
			transform: rotate(45deg) translateX(-50px);
		}
	}
style>
<body>
	<div class="parent">
		<div class="a">div>
		<div class="b">div>
	div>
body>
html>

你可能感兴趣的:(JavaScript,css,前端,css3)