表情变化动画

创作时间:

作者:

@小白创作中心

表情变化动画

引用

CSDN

https://blog.csdn.net/Dyanfee/article/details/138190842

本文将介绍如何使用CSS3实现一个从愤怒到满意的表情变化动画。通过clip-path、box-shadow等属性，结合动画效果，可以创建出有趣且交互性强的视觉效果。

实现效果

拉动滑动条，表情由愤怒到满意，并且颜色也由红色逐渐变更成绿色。

实现思路

利用clip-path实现多边形蒙版对眼睛部分进行绘制

.eye {
    position: absolute;
    top: 45px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
}

利用 box-shadow 的 insert 属性可以绘制内部阴影的特性，对圆形绘制内阴影形成嘴部表情

.mouse {
    height: 60px;
    width: 70px;
    position: absolute;
    left: calc(50% - 35px);
    top: 86px;
    border-radius: 50%;
    box-shadow: inset 0 6px 0 #fff;
    clip-path: inset(0% 0% 0% 0%);
    transform: translateY(30px);
    animation: mouse 1s linear var(--delay) 1 forwards paused;
}

对滑动条样式修改，动态计算滑过的部分，并设置渐变条

#rangeInput {
    -webkit-appearance: none;
    margin-top: 40px;
    height: 24px;
    width: 180px;
    border-radius: 12px;
    box-shadow: 0px 0px 8px 0px rgb(125, 125, 125);
    animation: face 1s linear var(--delay) 1 forwards paused;
    background-size: var(--slide) 100%;
    background-repeat: no-repeat;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表情变化动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            --delay: 0;
            --slide: 0%;
        }
        #rangeInput {
            -webkit-appearance: none;
            margin-top: 40px;
            height: 24px;
            width: 180px;
            border-radius: 12px;
            box-shadow: 0px 0px 8px 0px rgb(125, 125, 125);
            animation: face 1s linear var(--delay) 1 forwards paused;
            background-size: var(--slide) 100%;
            background-repeat: no-repeat;
        }
        /*拖动块的样式*/
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 24px;
            width: 24px;
            background: #fff;
            border-radius: 50%;
            border: solid 1px #ddd;
        }
        .container {
            margin-top: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .face {
            position: relative;
            background-color: red;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            animation: face 1s linear var(--delay) 1 forwards paused;
        }
        .eye {
            position: absolute;
            top: 45px;
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
        }
        .left {
            left: 36px;
            animation: leftEye 1s linear var(--delay) 1 forwards paused;
        }
        .right {
            right: 36px;
            animation: rightEye 1s linear var(--delay) 1 forwards paused;
        }
        .mouse {
            height: 60px;
            width: 70px;
            position: absolute;
            left: calc(50% - 35px);
            top: 86px;
            border-radius: 50%;
            box-shadow: inset 0 6px 0 #fff;
            clip-path: inset(0% 0% 0% 0%);
            transform: translateY(30px);
            animation: mouse 1s linear var(--delay) 1 forwards paused;
        }
        @keyframes face {
            0% {
                background-image: linear-gradient(to left top, #ff0000, #f36400);
            }
            20% {
                background-image: linear-gradient(to left top, #f36400, #dd9200);
            }
            40% {
                background-image: linear-gradient(to left top, #dd9200, #c1b700);
            }
            60% {
                background-image: linear-gradient(to left top, #c1b700, #d5a700);
            }
            80% {
                background-image: linear-gradient(to left top, #d5a700, #9fd600);
            }
            100% {
                background-image: linear-gradient(
                    to left top,
                    #9fd600,
                    #8fe000,
                    #7aea00,
                    #5af50a,
                    #00ff21
                );
            }
        }
        @keyframes mouse {
            50% {
                height: 6px;
                box-shadow: inset 0 6px 0 #fff;
                clip-path: inset(0% 0% 0% 0%);
                transform: translateY(40px);
            }
            50.1% {
                height: 6px;
                box-shadow: inset 0 -6px 0 #fff;
                clip-path: inset(50% 0% 0% 0%);
                transform: translateY(40px);
            }
            100% {
                height: 60px;
                box-shadow: inset 0 -40px 0 #fff;
                clip-path: inset(50% 0% 0% 0%);
                transform: translateY(0);
            }
        }
        @keyframes leftEye {
            from {
                clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
            }
            to {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
        @keyframes rightEye {
            from {
                clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 100%);
            }
            to {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="face">
            <span class="left eye"></span>
            <span class="right eye"></span>
            <span class="mouse"></span>
        </div>
        <input type="range" id="rangeInput" min="0" max="1" step="0.01" />
    </div>
    <script>
        const input = document.querySelector("#rangeInput");
        const move = () => {
            document.body.style.setProperty("--delay", `-${input.value}s`);
            document.body.style.setProperty(
                "--slide",
                `${input.value * 156 + 12}px`
            );
        };
        move();
        input.oninput = move;
    </script>
</body>
</html>

热门推荐

林青霞以形传神，茅威涛以声传情，共塑东方不败