热腾腾的咖啡效果
代码语言: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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0