纯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-bloat-duration     :   10s;
        }
        @keyframes bgColorAnimate {
            0%, 5%, 95%, 100% { background: var(--background-color-1) }
            40%, 60% { background: var(--background-color-2) }
        }
        @keyframes bloatAnim {
            0%, 5%, 95%, 100% { transform: var(--transform-1) }
            40%, 60% { transform: var(--transform-2) }
        }
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            overflow: hidden;
            font-family: 'Balsamiq Sans', cursive;
            animation: bgColorAnimate var(--pufferfish-bloat-duration) linear infinite;
        }
        main {
            display: flex;
            flex-direction: column;
        }
        .pufferfish {
            height: var(--pufferfish-height);
            width: var(--pufferfish-width);
        }
        .pufferfish > * {
            position: absolute;
        }
        .pufferfish__body {
            background: linear-gradient(to bottom, var(--pufferfish-body-color-2) 0%,
                var(--pufferfish-body-color-2) 60%,
                var(--pufferfish-body-color-1) 0%);
            height: var(--pufferfish-height);
            width: var(--pufferfish-width);
            border-radius: 50%;
            border: var(--thick-border);
            --transform-1: rotateX(70deg);
            --transform-2: rotateX(0deg);
        }
        .pufferfish__body, .pufferfish__eye, .pufferfish__fin-pectoral, 
        .pufferfish__tail, .pufferfish__lips {
            transform: var(--transform-1);
            --custom-animation: bloatAnim;
            animation-name: var(--custom-animation);
            animation-duration: var(--pufferfish-bloat-duration);
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        } 
        .pufferfish__eye {
            border-radius: 50%;
            height: var(--pufferfish-eye-size);
            width: var(--pufferfish-eye-size);
            background: var(--pufferfish-outline-color);
            border: var(--thin-border);
            box-shadow: inset -6px -2px 0 5px white;
            --transform-1: translate(10px, 90px);
            --transform-2: translate(10px, 70px);
        }
        @keyframes finPectoralAnim {
            40%, 41%, 50%, 60% { transform: var(--transform-2) rotate(0deg) }
            42%, 46% { transform: var(--transform-2) rotate(20deg) }
            44%, 48% { transform: var(--transform-2) rotate(-20deg) }
            0%, 5%, 95%, 100% { transform: var(--transform-1) }
        }
        .pufferfish__fin-pectoral {
            background: var(--pufferfish-fin-pectoral-color);
            width: var(--pufferfish-fin-pectoral-size);
            height: var(--pufferfish-fin-pectoral-size);
            border-radius: 80% 20% 20% 80% / 50%;
            border: var(--thin-border);
            transform-origin: center left;
            --transform-1: translate(50px, 90px);
            --transform-2: translate(50px, 80px);
            --custom-animation: finPectoralAnim;
        }
        @keyframes tailAnim {
            0%, .........完整代码请登录后点击上方下载按钮下载查看