下面是HTML代码,大家复制即可,由于JS的代码较多,所以链接我给大家放上面了,大家下载就行了,然后就可以打开这个代码开始学习了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>编程特趣</title>
<style>
html, body {
height: 100%;
margin: 0;
background: #270F34;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/css-doodle.min.js"></script>
<style>
css-doodle {
--color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);
--filter: @svg-filter(<svg>
<filter>
<feTurbulence
type="fractalNoise"
baseFrequency=".08"
numOctaves="2"
seed="200"
/>
<feDisplacementMap
in="SourceGraphic"
scale="100"
/>
</filter>
</svg>);
--rule: (
:doodle {
@grid: 30x1 / 18vmin;
}
:container {
perspective: 30vmin;
}
@place-cell: center;
@size: 100%;
:after, :before {
content: '';
@size: 100%;
position: absolute;
border: 2.4vmin solid var(--color);
border-image: radial-gradient(
var(--color), transparent 60%
);
border-image-width: 4;
transform: rotate(@pn(0, 5deg));
}
will-change: transform, opacity;
animation: scale-up 15s linear infinite;
animation-delay: calc(-15s / @size() * @i());
box-shadow: inset 0 0 1em var(--color);
border-radius: 50%;
filter: var(--filter);
@keyframes scale-up {
0%, 100% {
transform: translateZ(0) scale(0) rotate(0);
opacity: 0;
}
50% {
opacity: 1;
}
99% {
transform:
translateZ(30vmin)
scale(1)
rotate(-270deg);
}
}
)
}
</style>
<css-doodle use="var(--rule)"></css-doodle>
</body>
</html>