css实现随机波纹效果,点击可更新

代码语言:html

所属分类:粒子

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

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

    <title> CSS random wave lines #2  (click to update)</title>
    <style>
        html {
            overflow: hidden;
            display: grid;
            height: 100%;
            margin: 0;
            background: #0b253a;
            align-items: center;
        }
        css-doodle {
            margin: auto;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
    </style>

</head>
<body translate="no">
    <css-doodle click-to-update>
        :doodle {
        --rspeed: @r(28s, 35s);
        --angle: @r(1.2deg, 5deg);
        --delay: @r(-120ms, -10ms);
        --cycle: @r(2s, 6s);
        --da: @r(8vmin, 12vmin);
        --db: @r(8vmin, 12vmin);
        --bg: hsl(@r(360), 80%, 80%);
        @grid: 1x480 / 61.8.........完整代码请登录后点击上方下载按钮下载查看

网友评论0