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

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

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