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

代码语言：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 and (max-width: 767px) {
		inset: -52px;
	}

	svg {
		position: absolute;
		inset: 0;
		overflow: visible;
		mix-blend-mode: exclusion;
		fill: #fff;
		transform: rotate(90deg);

		@media screen and (max-width: 767px) {
			transform: rotate(92deg);
		}

		text {
			font-size: 0.6666rem;
			text-transform: small-caps;
			font-weight: 300;

			@media screen and (max-width: 767px) {
				font-size: 0.75rem;
			}
		}
	}
}

label {
	position: absolute;
	display: block;
	cursor: pointer;
	padding: 10px 20px;
	border-radius: 0;
	background: #fff;
	color: #000;
	border: none;
	text-transform: small-caps;
	font-weight: 600;
	letter-spacing: 0.5px;
	font-size: 1.2rem;
	z-index: 10;
	box-shadow: 2px 2px 8px 0 rgba(0 0 0 / 0.275);
	transition: 0.2s color ease-in-out, 0.2s background ease-in-out,
		0.2s box-shadow ease-in-out;

	&:hover {
		color: #fff;
		background: #000;
	}

	@media screen and (max-width: 767px) {
		padding: 4px 12px;
		font-size: 1rem;
	}
}

fieldset {
	div:nth-of-type(1) label {
		bottom: 0;
		right: 0;
		transform: translate(50%, 0);

		@media screen and (max-width: 767px) {
			transform: translate(0, 0);
			bottom: 42px;
		}
	}

	div:nth-of-type(2) label {
		top: 0;
		left: 0;
		transform: translate(-50%, 0);

		@media screen and (max-width: 767px) {
			transform: translate(0, 0);
			top: 42px;
		}
	}
}

input {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	&:checked + label {
		color: #fff;
		background: #000;
		z-index: 5;
	}
}

.container {
	perspective: 1000px;
	transform-style: preserve-3d;
	width: var(--max-size);
	height: 240px;
	margin: auto;
	position: relative;
	pointer-events: none;
	transform: translate(0px, -30px) scale3d(1.25, 1.25, 1.25);
	z-index: 3;

	@media screen and (max-width: 479px) {
		margin: auto 0 auto 5px;
		transform: translate(0px, -40px);
	}

	/* sun */
	&:before {
		content: "";
		display: block;
		position: absolute;
		width: 50px;
		height: 50px;
		inset: 50% auto auto 50%;
		transform: translate(0px, 25px) rotate(96deg);
		transform-origin: 200px 50%;
		background: #f79604;
		border-radius: 100%;
		transition: transform 1s ease-in-out, background 1s ease-in-out;

		@media screen and (max-width: 767px) {
			transform: translate(-10px, -15px) rotate(96deg);
		}

		@media screen and (max-width: 479px) {
			transform: translate(-150px, 25px) rotate(96deg);
		}
	}

	/* sticker */
	&:after {
		content: "I Love you!";
		position: absolute;
		top: 55%;
		left: 40%;
		background: linear-gradient(
			60deg,
			#ca1ae8 0%,
			#ca1ae8 50%,
			#fc3 50.001%,
			#c91 60%,
			#c91 85%,
			#fc3 100%
		);
		background-size: 260% 100.........完整代码请登录后点击上方下载按钮下载查看