div+css布局实现带时钟咖啡葡萄酒切换动画效果代码-html代码-BFW代码库

div+css布局实现带时钟咖啡葡萄酒切换动画效果代码

代码语言：html

代码描述：div+css布局实现带时钟咖啡葡萄酒切换动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">




  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe&family=Alumni+Sans:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");

:root {
	--max-size: 150px;
	--rotateX: -115deg;
	--rotateY: 0deg;
	--translateX: -50%;
	--translateY: -50%;
	--translateZ: calc(var(--max-size) * -1);
	--glass-color: rgba(83 188 206 / 0.225);
	--wine-color: rgba(123 3 35 / 0.6);
	--cup-color: rgba(50 50 50 / 0.225);
	--coffee-color: rgba(50 10 1 / 0.5);
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	font-family: sans-serif;
	overflow: hidden;
	background: linear-gradient(74deg, #222 0%, #4f4c43 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	transition: background-position 0.5s ease-in-out;
	font-family: "Alumni Sans", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	&:after {
		content: "";
		position: absolute;
		inset: 50% 0 0 0;
		background: rgba(0 0 0 / 0.1);
		box-shadow: 0 10px 20px 0 rgba(255 255 255 / 0.05) inset;
		z-index: -1;
	}
}

fieldset {
	position: absolute;
	inset: 50px auto auto 50px;
	padding: 0;
	margin: 0;
	width: 160px;
	height: 160px;
	border-radius: 100%;
	border: 10px solid;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	color: white;
	gap: 50px;
	z-index: 2;

	@media screen and (max-width: 767px) {
		width: 80px;
		height: 80px;
		border: 20px solid;
		inset: auto auto 14px 12px;
	}
}

/* arrow */
fieldset:after {
	content: "";
	position: absolute;
	display: block;
	z-index: -1;
	border-top: 0px solid transparent;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 3.6rem solid #fff;
	top: 50%;
	left: 50%;
	border-radius: 4px;
	transform: translate(-4px, -100%) rotate(42deg);
	transform-origin: center bottom;
	filter: drop-shadow(1px 2px 2px rgba(0 0 0 / 0.22));
	pointer-events: none;
	z-index: 30;
	transition: transform 0.4s cubic-bezier(0.29, 0.3, 0.5, 1.3),
		filter 0.4s cubic-bezier(0.29, 0.3, 0.5, 1.3);

	@media screen and (max-width: 767px) {
		border-bottom: 2.6rem solid #000;
		transform: translate(-4px, -100%) rotate(52deg);
	}
}

legend {
	display: block;
	position: absolute;
	inset: -45px;
	padding: 0;
	mix-blend-mode: exclusion;

	@media screen.........完整代码请登录后点击上方下载按钮下载查看