body {
font-family: sans-serif;
}
p {
column-fill: balance;
column-count: 2;
}
.box {
width: 100px;
height: 100px;
background-color: red;
filter: blur(5px);
z-index: -1;
animation: move 15s linear infinite;
}
.box2 {
position: relative;
width: 100vw;
height: 100vh;
}
.box2::before {
content: " ";
position: absolute;
top: -0px;
left: -0px;
bottom: -0px;
right: -0px;
background-image: conic-gradient(
from 36deg at 20% 80%,
#a100ffff 0% 25%,
#000000 25% 30%,
#119cfdff 30% 50%
);
filter: blur(500px);
z-index: -1;
animation: move 15s linear infinite;
}
@keyframes move {
from {
transform: rotate(180deg);
}
to {
transform: rotate(540deg);
}
}<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
<link rel="stylesheet" type="text/css" href="src/styles.css" />
<div>
<div class="box">1<br />12</div>
<div class="box2">1<br />12</div>
</div>
</body>
</html>它应该看起来像最左边的Firefox，但最近，它显示奇怪的线框.是的，不久前还不是这样.
我把代码和盒子放在一起来复制这个效果
它应该看起来像最左边的Firefox