tailwind实现鼠标滚动信封打开飞出爱心情人节表白动画效果代码-html代码-BFW代码库

tailwind实现鼠标滚动信封打开飞出爱心情人节表白动画效果代码

代码语言：html

所属分类：表白

代码描述：tailwind实现鼠标滚动信封打开飞出爱心情人节表白动画效果代码

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

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

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

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
  
<style>
@property --flap-rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --text {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.0;
}

* {
  box-sizing: border-box;
}

body {
  height: 1000vh;
}


.text-to-show {
  animation: reveal-text ease both;
  animation-timeline: scroll();
  animation-range: 80%;
  opacity: var(--text);
}

.envelope {
  container: envelope / inline-size;
  perspective: 1000px;
}

.flap {
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
        width: 100cqw;
        height: 30cqw;
  tran.........完整代码请登录后点击上方下载按钮下载查看