热腾腾的咖啡效果-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;
	top: 20vh;
	font-size: 25vmin;
	text-transform: uppercase;
	color: hsl(213, 61%, 54%);
	font-family: 'Passion One', sans-serif;
}

.heading-first {
	color: hsl(324, 72%, 66%);
	transform: translateX(5%);
	isolation: isolate;
}

.heading-second {
	font-size: 15vmin;
	transform: translate(52%, 130%);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}




.link-to-page-cont {
	position: fixed;
	right: 10px;
	top: 10px;
/* 	animation: fade-in .7s 5s backwards; */
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.link-to-page {
	display: block;
	padding: .4em .8em;
	background: hsl(185, 57%, 64%);
	border-radius: 2px;
	color: hsl(30, 50%, 100%);
	font-size: 1rem;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	text-decoration: none;
	transition: .25s;
	opacity: 0.6;
}

.link-to-page:hover,
.link-to-page:focus {
	opacity: 1;
}
</style>

</head>
<body translate="no">
<div class="canvas">
<h1 class="sr-only">Hot Vibes</h1>
<div class="heading heading-first" aria-hidden="true">Hot</div>
<div class="heading heading-second" aria-hidden="true">vibes</div>
<svg class="svg" viewBox="-100 50 852 852">
<defs>
<clipPath id="smoke-clip" clipPathUnits="objectBoundingBox">
<path d="
					M 0.64, 0.99
					c 0, 0 -0.05, 0.01 -0.14, 0.01
					c -0.09, 0 -0.14 -0.01 -0.14 -0.01
					H 0
					V 0
					h 1
					l 0, 0.99
					L 0.64, 0.99
					z" />
</clipPath>
</defs>
<g class="table">
<path fill="#BDA784" d="M10.1,1541.7c0,27.9,99.7,50.5,222.6,50.5s222.6-22.6,222.6-50.5v-41H10.1V1541.7z" />
<ellipse fill="#FDDFB1" cx="232.7" cy="1500.6" rx="222.6" ry="50.5" />
<ellipse style=".........完整代码请登录后点击上方下载按钮下载查看