纯css绘制河豚呼吸效果-html代码-BFW代码库

纯css绘制河豚呼吸效果

代码语言：html

所属分类：动画

代码描述：纯css绘制河豚呼吸效果

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


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

<style>
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');

:root {
            /* color */
            --background-color-1            :   #ffa5f0;
            --background-color-2            :   #ffbb00;
            --pufferfish-outline-color      :   #2a1f17;
            --pufferfish-body-color-1       :   #f7d8c5;
            --pufferfish-body-color-2       :   #8f552a;
            --pufferfish-body-color-3       :   #bc9267;
            --pufferfish-fin-pectoral-color :   var(--pufferfish-body-color-3);
            --pufferfish-lips-color         :   var(--pufferfish-body-color-3);
            --pufferfish-tail-color         :   var(--pufferfish-body-color-3);
            --pufferfish-spike-color        :   var(--pufferfish-body-color-3);

            /* size */
            --pufferfish-width              :   200px;
            --pufferfish-height             :   200px;
            --pufferfish-lips-width         :   20px;
            --pufferfish-lips-height        :   10px;
            --pufferfish-eye-size           :   25px;
            --pufferfish-fin-pectoral-size  :   25px;
            --pufferfish-tail-size          :   50px;
            --pufferfish-spike-size         :   10px;

            /* misc */
            --thick-border                  :   5px solid var(--pufferfish-outline-color);
            --thin-border                   :   3px solid var(--pufferfish-outline-color);
            --pufferfish-b.........完整代码请登录后点击上方下载按钮下载查看