css-doodle实现背景动画-html代码-BFW代码库

css-doodle实现背景动画

代码语言：html

所属分类：背景

代码描述：css-doodle实现背景动画

代码标签：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
    width: 100vmax;
    height: 100vmax;
    background-color: black;
    overflow: hidden;
    padding:0;
    margin:0;
  }
</style>

</head>
<body translate="no">
<css-doodle id="grid">
</css-doodle>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/css-doodle.0.7.7.js"></script>
<script>
var grid = document.querySelector("#grid");
function getSource() {
  let dood = `:doodle {
  @grid: 11 / 100%;
  background-color:hsl(@rand(360), @r(50%,100%), @r(100%));
  }
  :container {
    --one: hsl(@r(360), @r(0%,100%),  @r(0%,100%));
    --two: hsl(@r(360), @r(0%,100%),  @r(0%, 100%));
    --three: hsl(@r(360), @r(0%,100%),  @r(0%, 100%));
    --size:@r(120%,200%);
    --mixBlend:@p(difference, difference, difference, multiply);
    --backBlend:@p(difference, hue, color, overlay, hard-light, soft-light, saturation, lighten, darken, exclusion, screen, multiply);
    --borderWidth:@r(1px,50px);
.........完整代码请登录后点击上方下载按钮下载查看