css-doodle实现深海大鱼游动动画效果代码-html代码-BFW代码库

css-doodle实现深海大鱼游动动画效果代码

代码语言：html

所属分类：动画

代码描述：css-doodle实现深海大鱼游动动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Deep sea (Chrome only)</title>
    <style>
        html, body {   width: 100%;  height: 100%;   background: #011627;   margin: 0;   display: flex;   align-items: center;   justify-content: center;  overflow: hidden;}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <style>
        css-doodle {    --color: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C);    --color-fade: var(--color)@repeat2(@p([0-9a-b]));    --bg: @svg(      <svg viewBox="0 0 1000 1000">    @repeat240(          <circle cx="@r(20, 980)" cy="@r(20, 980)" r="@r(.01, 10)"            fill=`var(--color-fade)`          />    )        @repeat100(<path          d="M @r(1000) @r(1000) l @r(-30, 30) @r(-200, 500)"          stroke=`var(--color)`          stroke-width="@r(.01, .6)"          stroke-dasharray="5 @ri(5, 20)"        />)        @repeat20(<path          d="M @r(1000) @r(1000) l @r(-30, 30) @r(-20, 50)"          stroke=`var(--color-fade)`          stroke-width="@r(8, 15)"          stroke-dasharray="5 @ri(5, 20)"        />)      </svg>);    --noise: @svg-filter(<svg><filter><feTurbulence type="fractalNoise" baseFrequency=".016" numOctaves="1" seed="@r(1000)" /><feDisplacementMap in="SourceGraphic" scale="10" /></filter></svg>);    --rul.........完整代码请登录后点击上方下载按钮下载查看