gsap+svg实现显示当前时间的倒影时钟指针走动代码-html代码-BFW代码库

gsap+svg实现显示当前时间的倒影时钟指针走动代码

代码语言：html

所属分类：其他

代码描述：gsap+svg实现显示当前时间的倒影时钟指针走动代码

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

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

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

  
  
  
<style>
:root {
	--bodyLg: 135deg;
	--ripTurVal: 50;
	--ripMapVal: 20;
}
* {
	position: relative;
}

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

html,
body {
	font-family: Avenir, sans-serif;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0px;
	overflow: hidden;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #a99ea3;
	background: linear-gradient(
		var(--bodyLg),
		#e6e2df calc(50% - 5px),
		#332f22 calc(50% - 5px),
		#332f22 calc(50% + 5px),
		#a99ea3 calc(50% + 5px)
	);
	background-repeat: no-repeat;
	color: #fff;
}

.gsapWrapper {
	visibility: hidden;
	overflow: visible;

	.wBodyWrapper {
		display: block;
		width: 510px;
		height: 510px;
		position: relative;
		overflow: visible;

		&:not(:first-of-type) {
			margin: 0px;
			margin-top: -510px;
		}

		&:last-of-type {
			&::after {
				display: block;
				content: "";
				position: absolute;
				right: 0px;
				bottom: 0px;
				z-index: 6 !important;
				width: 340px;
				height: 340px;
				opacity: 0.9;
				background-image: linear-gradient(
					-45deg,
					rgb(169, 158, 163) 30%,
					transparent 70%
				);
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}
		}

		.wBody {
			display: block;
			position: absolute;
			width: 340px;
			height: 340px;
			border-radius: 50%;
			left: 10px;
			top: 12px;
			z-index: 8 !important;

			&.br {
				left: unset;
				right: 10px;
				top: unset !important;
				bottom: 0px !important;
				z-index: 5 !important;
				opacity: 0.35;
				filter: -webkit-blur(5px);
				filter: blur(5px);

				svg {
					filter: url(#ripple);
				}
			}
		}

		.spacer {
			position: absolute;
			left: 0px;
			top: 0px;
			right: 0px;
			bottom: 0px;
			border-radius: 50%;
			background-image: url('data:image/svg+xml,<svg width="340" height="340" viewBox="0 0 89.958331 89.958333" version="1.1" id="svg1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs1"><linearGradient id="linearGradient1"><stop style="stop-color:%23e8d593;stop-opacity:1;" offset="0.75697213" id="stop4" /><stop style="stop-color:%23e8d593;stop-opacity:1;" offset="0.94129783" id="stop1" /><stop style="stop-color:%23e8d593;stop-opacity:0.55686277;" offset="0.94309187" id="stop3" /><stop style="stop-color:%23e8d593;stop-opacity:0;" offset="1" id="stop2" /></linearGradient><linearGradient xlink:href="%23linearGradient1" id="linearGradient2" x1="45.134254" y1="16.036873" x2="45.134254" y2="47.874149" gradientUnits="userSpaceOnUse" /></defs><g id="layer1"><rect style="fill:%23332f22;fill-opacity:1;stroke-width:0.529165;stroke-linejoin:round;paint-order:fill markers stroke" id="rect1" width="72.384918" height="2.1166666" x="9.0167274" y="43.920834" /><path id="rect1-8" style="fill:url(%23linearGradient2);stroke-width:0.529166;stroke-linejoin:round;paint-order:fill markers stroke" d="M 9.4032917,38.629167 H 80.051804 l -7.238471,9.387729 H 17.197917 Z" /></g></svg>');
			background-repeat: no-repeat;
			background-position: center center;
			z-index: 7;
			transform-origin: 50% 50% 0px !important;
			transform: translate3d(0px, 0px, 0px) rotate(-45deg);
		}
	}
}

svg {
	overflow: visible;
}

#svg100b {
	transform: scale(1, -1) rotate(90deg);
}
#svg200b {
	transform: scale(-1, -1) rotate(90deg);
	opacity: 0.9;
}
</style>


  
  
</head>

<body translate="no">
  <div class="gsapWrapper">
	<div class="wBodyWrapper">
		<div class="wBody tl l1">

			<svg id="svg100&.........完整代码请登录后点击上方下载按钮下载查看