cqfill使用容器查询拖动改变胡须长度颜色效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：cqfill使用容器查询拖动改变胡须长度颜色效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        * {
            box-sizing: border-box;
        }
        body {
            min-height: 100vh;
            overflow: hidden;
            background: #e6e6e6;
        }
        .resizable-container {
            min-height: 220px;
            max-height: 450px;
            min-width: 200px;
            max-width: 400px;
            width: 200px;
            resize: both;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100px);
            contain: layout size;
            --css-contain: layout size;
        }
        .resizable-container:active .arrow {
            display: none;
        }
        .arrow {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 26px;
            transform: translate(-50%, 0) rotate(-45deg) scale(0.75);
            -webkit-animation: bounce 0.5s infinite linear;
            animation: bounce 0.5s infinite linear;
        }
        .arrow > path {
            fill: #df4020;
            stroke: #000;
            stroke-width: 20px;
        }
        .beardy {
            width: 200px;
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translate(-50%, 0%);
            overflow: visible !important;
        }
        .beardy__grow {
            height: var(--length,32px);
            transition: height 0.25s, fill 0s;
        }
        .beardy__beard {
            fill: hsl(30, 50%, calc(var(--lightness, 15) * 1%));
        }
        .beardy__eye {
            transform-origin: 50% 110px;
            -webkit-animation: blink 8s infinite linear;
            animation: blink 8s infinite linear;
        }
        .beardy__brow {
            opacity: var(--brow,0);
            stroke-width: 4px;
        }
@container (min-height: 250px) {
            .beardy {
                --length: 50px;
            }
        }
@container (min-height: 300px) {
            .beardy {
                --length: 100px;
            }
        }
@container (min-height: 350px) {
            .beardy {
                --length: 150px;
            }
        }
@container (min-height: 400px) {
            .beardy {
                --length: 200px;
                --brow: 1;
            }
        }
@container (min-height: 450px) {
            .beardy {
                --length: 250px;
                --brow: 1;
            }
        }
@container (min-width: 250px) {
            .beardy {
                --lightness: 25;
            }
        }
@container (min-width: 300px) {
            .beardy {
                --lightness: 45;
            }
        }
@container (min-width: 350px) {
            .beardy {
                --lightness: 65;
            }
        }
@container (min-width: 400px) {
            .beardy {
                --lightness: 85;
            }
        }
@media --css-container and (min-width: 250px) {
            .beardy {
                --lightness: 25;
            }
        }
@media --css-container and (min-width: 300px) {
            .beardy {
                --lightness: 45;
            }
        }
@media --css-container and (min-width: 350px) {
            .beardy {
                --lightness: 65;
            }
        }
@media --css-container and (min-width: 400px) {
            .beardy {
                --lightness: 85;
            }
        }
@media --css-container and (min-height: 250px) {
            .beardy {
                --length: 50px;
            }
        }
@media --css-container and (min-height: 300px) {
            .beardy {
                --length: 100px;
            }
        }
@media --css-container and (min-height: 350px) {
            .beardy {
                --length: 150px;
            }
        }
@media --css-container and (min-height: 400px) {
            .beardy {
                --length: 200px;
                --brow: 1;
            }
        }
@media --css-container and (min-height: 450px) {
            .beardy {
                --length: 250px;
                --brow: 1;
            }
        }
@-webkit-keyframes blink {
            0%, 49%, 51%, 53%, 100% {
                transform: scaleY(1);
            }
            50%, 52% {
                transform: scaleY(0.1);
            }
        }
@keyframes blink {
            0%, 49%, 51%, 53%, 100% {
                transform: scaleY(1);
            }
            50%, 52% {
                transform: scaleY(0.1);
            }
        }
@-webkit-keyframes bounce {
            50% {
                transform: translate(-50%, 0) rotate(-45deg) scale(0.75) translate(0, 15%);
            }
        }
@keyframes bounce {
            50% {
                transform: translate(-50%, 0) rotate(-45deg) scale(0.75) translate(0, 15%);
            }
        }
    </style>


</head>

<body>
    <div class="resizable-container">
        <svg class="beardy" viewBox="0 0 218 187" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M48 94.052h1v-11c0-25.957 21.043-47 47-47h74c25.957 0 47 21.043 47 47v54c0 25.958-21.043 47-47 47H96c-25.957 0-47-21.042-47-47v-11h-1c-8.837 0-16-7.163-16-16 0-8.836 7.163-16 16-16z" fill="#FFF0F0" stroke="#000" stroke-width="2" />
            <path d="M94 36.052c-26.51 0-39 21.49-39 48v10c-9.389 0-17 7.611-17 17s7.611 17.5 17 17.5l-6.5-3c0 26.51 18.99 60.5 45.5 60.5h74c26.51 0 48-21.49 48-48v-54c0-26.51-21.49-48-48-48H94z" fill="#F3D7D7" />
            <path d="M48 94.052h1v-11c0-25.957 21.043-47 47-47h74c25.957 0 47 21.043 47 47v54c0 25.958-21.043 47-47 47H96c-25.957 0-47-21.042-47-47v-11h-1c-8.837 0-16-7.163-16-16 0-8.836 7.163-16 16-16z" stroke="#000" stroke-width="2" />
            <path fill="#7C4526" d="M86 46.052h112v20H86z" />
            <path fill="#F72A2A" stroke="#000" stroke-width="2" d="M104 65.052h80v12h-80z" />
            <path d="M105.374 70.484c.503.321.603.52.622.568-.019.048-.119.247-.622.569-.601.384-1.553.792-2.874 1.2-2.627.813-6.479 1.559-11.3 2.19-9.626 1.26-22.956 2.041-37.7 2.041-14.782 0-28.128-.034-37.777-.549-4.832-.257-8.68.........完整代码请登录后点击上方下载按钮下载查看