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-.........完整代码请登录后点击上方下载按钮下载查看