css实现圆点径向扩散可调节动画背景代码
代码语言:html
所属分类:背景
代码描述:css实现圆点径向扩散可调节动画背景代码
代码标签: css 圆点 径向 扩散 调节 动画 背景 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--text: CanvasText;
--bkg: Canvas;
--pad: 1rem;
--c1: transparent;
--c2: midnightblue;
--c3: darkviolet;
&:has(#colors-2:checked) {
--c2: darkred;
--c3: lightsalmon;
}
&:has(#colors-3:checked) {
--c2: darkolivegreen;
--c3: yellowgreen;
}
--bkg: oklch(from var(--c2) calc(l - .165) c h);
--speed: 10;
--color-stop: 0%;
--play-state: paused;
@media(prefers-reduced-motion: no-preference) {
--play-state: running;
}
&:has(#stop-anim:checked) {
--play-state: paused;
}
color-scheme: dark;
}
@property --color-stop {
syntax: "<percentage>".........完整代码请登录后点击上方下载按钮下载查看















网友评论0