热腾腾的咖啡效果-html代码-BFW代码库

热腾腾的咖啡效果

代码语言：html

所属分类：动画

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


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

<style>
@import url('https://fonts.googleapis.com/css?family=Passion+One:700&display=swap');

body {
        margin: 0;
}

.canvas {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: linear-gradient(
                hsl(210, 80%, 55%),
                hsl(190, 80%, 70%)
        );
        background: conic-gradient(
                from -150deg at 45% 50%,
                hsla(55, 100%, 60%, 0.7) 0deg 179.8deg,
                transparent 180deg 360deg
        ),
        linear-gradient(
                hsl(210, 80%, 55%),
                hsl(190, 80%, 70%)
        );
}

.video {
        --height: 852;
        mix-blend-mode: screen;
        height: 100vmin;
        width: auto;
        top: calc(-165 / var(--height) * 100vmin);
        transform: translate(calc(100 / var(--height) * 100vmin), calc(-50 / var(--height) * 100vmin));
        position: relative;
}

.svg {
        position: absolute;
        width: 100vw;
        height: 100vh;
}

.heading {
        position: absolute;
        t.........完整代码请登录后点击上方下载按钮下载查看