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