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