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