zdog+svg实现拖动滑条礼盒打开爱心表白跳出动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：zdog+svg实现拖动滑条礼盒打开爱心表白跳出动画效果代码

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

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

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

  
  
<style>
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	color: hsl(31 100% 20%);
	background: hsl(50 100% 93%);
	min-block-size: 100svb;
	font-family: system-ui;
	display: grid;
	place-items: center;
}

div > * + * {
	margin-block-start: 0.5rem;
}

label {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "span svg" "input svg";
	gap: 1rem;
}

label > span {
	grid-area: span;
	font-weight: 700;
}

label > input {
	grid-area: input;
	inline-size: 100%;
	accent-color: hsl(44 93% 57%);
}

label > svg {
	grid-area: svg;
	inline-size: 4rem;
	block-size: 4rem;
}

body {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40">\
    <defs>\
      <pattern id="tree-pattern" viewBox="-42 -15 84 84" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">\
          <defs>\
              <path id="tree-stripe" d="M -25 0 -20 0 0 20 20 0 25 0 0 25" />\
              <clipPath id="tree-clip">\
              <path d="M 0 0 20 54 -20 54" />\
              </clipPath>\
          </defs>\
          <g clip-path="url(%23tree-clip)" fill="hsl(49 100% 87%)" transform="rotate(-45 0 27)">\
              <use href="%23tree-stripe" />\
              <use y="10" href="%23tree-stripe" />\
              <use y="20" href="%23tree-stripe" />\
              <use y="30" href="%23tree-stripe" />\
              <use y="40" href="%23tree-stripe" />\
              <use y="50" href="%23tree-stripe" />\
              <use y="-10" href="%23tree-stripe" />\
              <use y="-20" href="%23tree-stripe" />\
          </g>\
      </pattern>\
  </defs>\
  <rect fill="url(%23tree-pattern)" width="60" height="40" />\
    </svg>');
	background-size: 100%;
}
</style>



  
  
</head>

<body translate="no">
  <div>
	<canvas style="display: block; inline-size: 100%; max-inline-size: 400px" width="400" height="400"></canvas>
	<label>
		<span>Reach the momentous date</span>
		<input disabled type="range" min="0" max="1" step="0.01" steo="0.01" value="0" />
		<svg viewBox="0 0 9.5 9.5" width="1em" height="1em">
			<defs>
				<clipPath id="stamp-clip">
					<rect x="0.5" y="0.5" width="8.5" height="8.5" />
					<path id="stamp-border" d="M 0 0 0.5 0 A 0.5 0.5 0 0 0 1.5 0 L 2 0 A 0.5 0.5 0 0 0 3 0 L 3.5 0 A 0.5 0.5 0 0 0 4.5 0 L 5 0 A 0.5 0.5 0 0 0 6 0 L 6.5 0 A 0.5 0.5 0 0 0 7.5 0 L 8 0 A 0.5 0.5 0 0 0 9 0 L 9.5 0 9.5 0.5 0 0.5" />
					<use transform="translate(9.5 0) rotate(90)" href="#stamp-border" />
					<use transform="translate(9.5 9.5) rotate(180)" href="#stamp-border" />
					<use transform="translate(0 9.5) rotate(-90)" href="#stamp-border" />
				</clipPath>
			</defs>
			<rect clip-path="url(#stamp-clip)" fill="hsl(354 84% 57%)" width="20" height="20" />
			<rect fill="hsl(346 65% 39%)" x="1.25" y="1.25" width="7" height="7" />
			<text font-family="serif" font-weight="700" font-size="5" text-anchor="middle" x="4.75" y="6.5" fill="hsl(0 0% 99%)" stroke="hsl(0 0% 99%)" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round">
				25
			</text>
		</svg>
	</label>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
      <script  >
const { Anchor, Shape, Rect, Box, TAU } = Zdog;

const points = [
{ x: 0, y: -3.5 },
{ x: 0.04, y: -3.85 },
{ x: 0.33, y: -4.79 },
{ x: 1.04, y: -6.05 },
{ x: 2.27, y: -7.28 },
{ x: 3.95, y: -8.13 },
{ x: 5.93, y: -8.33 },
{ x: 7.92, y: -7.79 },
{ x: 9.63, y: -6.56 },
{ x: 10.79, y: -4.83 },
{ x: 11.2, y: -2.8 },
{ x: 10.79, y: -0.71 },
{ x: 9.63, y: 1.32 },
{ x: 7.92, y: 3.24 },
{ x: 5.93, y: 5.03 },
{ x: 3.95, y: 6.72 },
{ x: 2.27, y: 8.3 },
{ x: 1.04, y: 9.73 },
{ x: 0.33, y: 10.87 },
{ x: 0.04, y: 11.63 },
{ x: 0, y: 11.89 },
{ x: -0.05, y: 11.63 },
{ x: -0.34, y: 10.87 },
{ x: -1.05, y: 9.73 },
{ x: -2.28, y: 8.3 },
{ x: -3.96, y: 6.72 },
{ x: -5.94, y: 5.03 },
{ x: -7.93, y: 3.24 },
{ x: -9.64, y: 1.32 },
{ x: -10.8, y: -0.71 },
{ x: -11.2, y: -2.8 },
{ x: -10.8, y: -4.83 },
{ x: -9.64, y: -6.56 },
{ x: -7.93, y: -7.79 },
{ x: -5.94, y: -8.33 },
{ x: -3.96, y: -8.13 },
{ x: -2.28, y: -7.28 },
{ x: -1.05, y: -6.05 },
{ x: -0.34, y: -4.79 },
{ x: -0.05, y: -3.85 }];


const lines = [
[
{ x: 3.75, y: -12.02 },
{ x: 3.98, y: -12.74 }],

[
{ x: 9.78, y: -13.75 },
{ x: 10.37.........完整代码请登录后点击上方下载按钮下载查看